A practical walkthrough on building a micro frontend architecture with multiple Vue.js apps using single-spa. Note that you can replace Vue with your framework of choice.

What are Micro Frontends?

The concept of micro frontends has been around for a while now but has been getting more attention in the past couple of years.

Evolution of the search term “Micro Frontend” on Google Trends, 2015–2020

Micro frontends extend the concept of backend micro-services: breaking down a web app (a monolith SPA) into distinct pieces. Then, through an orchestrator layer, each part is assembled (or composed) together. There are multiple ways of doing so. In our case we will do what is called client-side composition using single-spa.

When should I use this approach?

At Unbabel we currently use a micro frontend architecture for one of our new customer-facing product.

Like any technical decision, there are gains and tradeoffs. We weighted a couple of factors when deciding for this approach:

• The product to build would be comprised of at least 6 distinct areas, i.e. interfaces;
• Several multi-disciplinary teams would own and have full autonomy on delivering parts of the product;
• Have the possibility of partially changing parts of the product’s stack. Although Vue is the company’s framework of choice, we don’t know if it’ll still be what we want to use 3 years from now;

You should consider these advantages:

• Teams have a greater autonomy on delivering value into the product at different paces as their development can be largely independent from other teams;
• Ability to have totally separate repositories, test and deployment flows;
• Ability to easily override parts of an application’s interface (i.e. A/B testing, incremental rollout);
• Use different frameworks side-by-side or perform experiments without affecting other parts of your application;
• Ability to refactor parts of your product without having to change it all at once;

You should consider these caveats:

• Increased overhead to set up, deploy and maintain depending on the scope and characteristics of the product you’re building;
• More moving parts: it’s important to have a solid documentation on how everything is setup and relates as well as defining guidelines that govern how development is to be done within the architecture;
• Steeper learning for developers to understand the architecture, its lifecycle and dependencies. Hence having thorough documentation is imperative;
• Micro frontends are still relatively new and there is no one-size-fits-all methodology or well established consensus on how to achieve this. Be ready to do a fair amount of R&D depending on your case;

In my experience, this approach is best when building a relatively large web app where you want to provide flexibility to multiple teams and have enough time to dedicate to governance and documentation.

Having said that, you can definitely leverage on many of the micro frontend advantages with a team of 2-3 people or even alone.

#software-development #vuejs #micro-frontends #web-development #development #vue