Setup a Micro Frontend Architecture With Vue and single-spa

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. The first article of a three part guide that aims at laying the foundations on how to setup and organize a micro frontend architecture for your projects using single-spa.

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

To make the most out of the benefits of offshore software development, you should understand the crucial factors that affect offshore development.

Want to Hire VueJS Developer to develop an amazing app? **[Hire Dedicated VueJS Developers](https://hourlydeveloper.io/hire-dedicated-vue-js-developer/ "Hire Dedicated VueJS Developers")** on the contract (time/project) basis providing regular...

Create a new web app or revamp your existing website? Every existing website or a web application that we see with an interactive and user-friendly interface are from Front-End developers who ensure that all visual effects come into existence....

Vinew Technologies focused majorly over ERP Software services and POS Software services, Web & Application development services & Woo commerce and Wordpress easy-to-use, multipurpose social media plugin for WordPress.

Check out these five criteria for the selection of your software vendor, and you will never regret having the wrong quality product made for you.