Two years ago, I finished my bachelor’s degree with a thesis about micro frontends. It discussed the viability and the benefits of such a modular approach and showcased ways to implement micro frontends using different frameworks. In 2017 the concept was still new and not widely adopted. This changed over the recent years, as more people started to see the benefits of bringing the idea of microservices to the UI. The adoption of micro frontends can also be seen in the ThoughtWorks technology radar. Over the last four years, they have moved from the column Assess to Adopt, which means that the architecture evolved to a concept that many companies use successfully.

There are different ways to implement a micro frontend approach. The most commonly used one is achieved by using iframes, which may sound simple but still comes with much overhead when implementing the UI components. Another straightforward approach is build-time micro frontends, where all the different UI modules are packages that are included in the parent application as dependencies. For me, this approach is not feasible, as one of the essential advantages of using micro frontends is that the teams can deploy their frontend parts independently from others. In the case of build-time integration, the whole application has to be deployed every time something changes.

Micro frontends with Module Federation

When I first tried to get micro frontends to work, I choose Angular as my go-to framework for implementing them. Unfortunately, in 2017 the implementation possibilities were limited because many challenges were not solved back then, one being that the build tools like webpack and the frameworks did not support this concept. In webpack 5, which is currently in beta, the idea of module federation is introduced. Using this new feature, it is possible to load modules that are not known at compile time. Further, it takes care of shared dependencies, which means that the bundles only include the source code and are therefore relatively small and thus speed up the time it takes to load them. Using this new approach, it is possible for the first time to use the official angular-cli and webpack to build micro frontends without any extra scripts and hacks to load them. More about Angular and Module Federation can be found in the blog post series from Manfred Steyer.

No framework: Web Components

Another widely spread approach is to make use of web components. The idea behind web components is to let developers extend HTML with new elements that encapsulate their styling and behavior. The advantage here is that no framework is needed as web components are supported by most browsers natively. Still, some frameworks try to support the web component specification. For example, Angular provides Angular Elements. Using Elements, one can use all the features that are available in Angular within the custom element, such as dependency injection and change detection. it is also possible to use a react application as a web component, but a bit more work is needed as it is not supported out of the box.

Multiple frameworks: single-spa

The last approach that I want to propose is using the JavaScript framework single-spa. Utilizing single-spa as a router, it is possible to run multiple frameworks, such as Angular, React, and Vue.js, on the same page. When I first tried out the single-spa framework, it was only used by its founding company Canopy, and it was a pain to set it up as there was not that much support and no community. Now the project has over 100.000 downloads per month and over 6.400 stars on GitHub. It is used by multiple companies to build their micro frontends and has an active community.

Conclusion

In conclusion, it became apparent to me that micro frontends are still a concept that will be growing over the next years, but it has already found its place in the industry. The support for building micro frontends got a lot better over the last years, and with webpack 5 and module federation, we will again see a rise of micro frontend apps. With the different approaches getting more mature and building a community behind them, it will be interesting which one can become the leader in the field of micro frontends.