Mono & Msa : Front 4. Multifront Ends


Posted on Wed, Nov 23, 2022 architecture vue singlespa

🀷 So, What is a Multi-Frontend?

Have you ever thought about using different frontend technologies in one app or project? For instance, using React.js, Vue.js, or Angular harmoniously. That's the type of freedom a micro-frontend gives you.

Micro Front End Representation πŸ™‚

The Micro frontend extends the principles of microservices to the frontend ecosystem. In this case, you can have front-end teams working together on the same project but with different technologies and shared dependencies.

The type of comfort this approach gives to development teams is out of this world. That's exactly why many top tech companies are exploring this technology, and many have tipped it as the future of front-end development. And of course, it's worth the hype!

The Advantages of Micro Frontends

You'll be surprised to see how many benefits you will get by embracing the micro-frontend approach. You may be wondering about adoption, but just know that big tech companies like Apple, Netflix, and so on are already using this technology.

Below are some advantages of micro frontends :

  1. Faster development and deployment 🚴

    Before the advent of micro frontends, some development teams sent their members to learn a particular framework or language before they could collaborate or build together.

    This will indeed slow down the development speed of the team. But with micro frontends, developers are allowed to use the framework of their choice. Hence, boosting the speed of development and deployment as deployment configurations target different packages but remain in one project.

  2. Use of different tech stacks 🍑

    Micro frontends are tech stack agnostic. This means that different parts of an application can work together regardless of the tech stack or framework you're using. This will increase the amount of expertise working on a project.

    As everybody has the freedom to choose the framework that they know better. Roles are shared between teams in the tools that they are perfect at which is less problematic than a monolithic approach.

    πŸ€”

    For instance, a product owner may act as the supervisor with full access to the project's root scripts and processes. Testers can also run tests with their favorite tools due to the decoupled micro front ends. Each framework has their own testing library with their own benefit. This type of setup promotes productivity and increases teams’ efficiency as well.

  3. Less difficult to scale and maintain πŸŽ›οΈ

    Micro frontends are easier to maintain than monolithic ones. This is simply because of the fact that each part of it is divided into smaller manageable chunks. Another thing is that everybody is involved in the testing process of the web applications, as they can work with a framework of their choice.

  4. Less difficult to debug πŸ•΅οΈ

    Errors can easily be traced in micro frontends due to webpack splitting each application into chunks or units. Unlike in the monolithic setup, a faulty unit can easily be detected and corrected.