18 Jun The state of micro frontends
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
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.