There is more than one way to build a micro frontend architecture. The most sensible, and popular, is via the appropriate framework. If you're short on time, here's our quick take: single-spa is likely the framework you'll want for your project right now. It is light, fast and reliable.
However, there are alternatives, such as Webpack 5 with Module Federation, or foregoing a framework altogether. In some cases, they can rival the best micro frontend frameworks, depending on what your project needs the most right now.
Micro frontend frameworks are a set of tools and methodologies that break down an application’s frontend into smaller, more manageable fragments.
The main goal of such frameworks is to streamline the development process by providing a structure that complies with a micro frontend architecture. It enables engineering teams to work on fragments independently while ensuring that each contributes to a whole.
Micro frontend frameworks can be compared to industry standards: they establish rules and guidelines focused on practical applications. An architecture created this way is then used to improve the scalability of the frontend.
Employing a micro frontend framework is a relatively new practice for frontend development. However, on the back-end side, dividing an application into smaller, more manageable pieces is already known as building a microservices architecture.
The main benefits of employing micro frontend frameworks are increased scalability and optimized development team management. With the application divided into smaller parts, each team can work independently. Other benefits are a smoother legacy integration and avoiding a single point of failure.
Smoother legacy integration:
A micro frontend framework can be used to create a new layer around a legacy application. This enables the incremental migration (or upgrade) of the legacy application while keeping it operational throughout the process. Without this additional layer, migrating to a new architecture would require rewriting the entire frontend all at once.
Adding a new layer also saves developers from having to build the same features twice: once for the legacy version and again for the rewritten version. Without a micro frontend framework, two development teams would have to "race" each other to ensure the new version has all the same features as the legacy one.
Avoiding single point of failure:
By breaking up the frontend into multiple pieces, you reduce the risk of creating a single point of failure that can bring down the entire application. Since each micro frontend operates independently, if one fails, the others will not be affected.
An additional byproduct of splitting applications into smaller pieces is that it speeds up the loading times of project files.
The most notable downside of a micro frontend framework is the necessity to run multiple applications locally.
When an application is split into micro frontends, the engineering team must test each change made to one micro frontend against the others. To do this, they often need to run several micro frontends locally, which adds unnecessary complexity to the development process.
To avoid that, software engineers test one of the micro frontends while assuming certain behaviors of the rest of the system. They do that using the technique called mocking, where they simulate the behaviors of micro frontends that are not currently being worked on by providing predefined responses to requests.
Over the years, we’ve researched different solutions and we’ve found that, the single-page application (SPA) is one of the best micro frontend frameworks available.
The single-spa framework is a simple tool for working with multiple JavaScript frontends. It’s lightweight, so there is very little code to download in the first place, but the reasons why software engineers appreciate it go beyond that.
- Compatibility with various application build tools
- Lightness and fast performance
- Comprehensive documentation
- Wide adoption and popularity within the community
- Stability and reliability in production environments
Applications built with single-spa are typically made of two parts: applications and root config.
Applications
Within the single-spa framework, applications are what we call self-contained micro frontend units. They handle their own navigation and lifecycle in the web browser without the need for a full page reload. Each application is designed to understand how to perform three key actions.
- Bootstrap (initialize itself)
- Mount (integrate into the DOM)
- Unmount (remove itself from the DOM)
Root config
The root config acts as a coordinator for all micro frontend applications. It is the primary entry point that renders HTML pages for users to interact with.
For the root config to effectively manage the micro frontends, it must be aware of their existence. It is done via registering applications, where the root config is informed about each individual micro frontend is called registering applications.
During this process, the root config learns about each micro frontend—what it does, where it fits into the larger application, and under what conditions it should be active. Each application is registered with three key pieces of information:
- A name
- A function to load the application's code
- A function that determines when the application is active/inactive
The root config is also responsible for directing traffic within the application. As users navigate the application, the root config determines which view or micro frontend should be displayed, based on the URL path or other navigation events.
Our client, a large multinational retailer needed a platform that would enable their employees to communicate with each other on a global scale. A critical requirement was that the platform needed to work with multiple third-party applications that the client was using.
We approached this project by building a large-scale micro frontend platform, using single-spa as its framework. This made the platform scalable, easy to maintain, and compliant with our client’s security standards. We also enhanced the application's performance on mobile devices and introduced lazy loading to improve efficiency.
This solution is currently used by over 500,000 users globally and helped our client streamline their communication and productivity. It handles more than 12m+ requests every week and over 20 transactions per second.
Building a micro frontend architecture without a dedicated framework is possible. However, it requires the engineering team to perform a significant amount of manual configuration that frameworks usually handle. Another way to achieve this is with a dedicated tool.
For some projects, instead of a single-spa framework, we use Webpack 5 with Module Federation.
Webpack 5 is a versatile development tool. One of its features, called Module Federation, facilitates the implementation of a micro frontend architecture. It works out of the box and, with the help of engineering teams, allows for some degree of configuration. It is best suited for projects that need to kick off quickly, but it adds value in other ways as well.
- Improves performance of the web application with lazy loading of selected modules.
- Allows for server-side rendering
- Enhances both user and developer experience
- Optimizes resource loading in the browser
When choosing the best micro frontend framework for your project, it's important to consider the maturity of the solution. Before committing to one, you should determine if it’s sufficiently developed so it can meet your needs and stand the test of time. This niche is still developing and there are no 'golden standards' yet. Currently, only a few frameworks available on the market have reached full maturity.
