What are Micro-Frontends, and why is everyone talking about them (again)?
If you are involved in building or modernising your web application, it’s quite possible that you’ve already come across the term Micro-Frontends. Among software developers, this not-so-new web architecture is quite popular thanks to its advantages, and is being used more and more often.
To answer whether Micro-Frontends will become the new standard for the development of web frontends, we have summarised the advantages and disadvantages for you.
What are Micro-Frontends?
Micro-frontends represent a paradigm shift in web development, offering a dynamic approach to building modern frontend applications. At their core, micro-frontends break down large, monolithic frontend architectures into smaller, more manageable pieces. These pieces, often referred to as "web components" or "custom elements," are self-contained modules that can be developed, tested, and deployed independently using different technologies. This modularization fosters agility in web development, as different teams can work on individual modules concurrently, speeding up the development lifecycle. However, it's essential to consider the downsides of this approach, such as potential challenges with end-to-end integration and maintaining consistency in frontend code.
The joint work of single teams on the code base of a web application, is becoming less and less practicable — above a certain size, software becomes too complex and is therefore hard to overview. Changes need long-term planning, and implementation workflows frequently need to be paused. In a scenario like this, where the entire system must be able to accept a change, errors occur more quickly during implementation, other updates and various use cases.
Development teams therefore like to use the so-called Microservice architecture:
Micro-Frontends are user interfaces that are made up of individual, isolated components. They can be developed, implemented, maintained and changed independently of each other, enhancing client-side frontend development. The special feature here is that both backend and frontend are modular.
Microservices follow a similar approach to Micro-Frontends:
The idea behind Microservices is to break down a large task into various subtasks and process them individually. In this modularisation, the domains are divided into individual, independent systems that are connected by interfaces. A non-modularised system is a monolith.
Micro-Frontend vs. Microservices
Microservices are an approach that is used in the backend of a web application. In 2016 for the first time, a similar approach was set up for the frontend, to enable the use and advantages of separate systems. Today, it is impossible to imagine frontends of complex applications without such an architecture, which combines both server-side and client-side components.
"Microservices are currently a topic mainly in the backend.
If we transfer the approach to the frontend, it becomes Micro-Frontends."
(it-economics, Nov. 2017)
Each module of the Micro-Frontend architecture is managed holistically by a cross-functional team, from the database to the user interface.
For an online shop, for example, it makes sense to form independent teams for modules such as Inspire, Product, Search and Check-out.
However, the idea is not new. It has a lot in common with the concept of ‘self-contained systems’. In the past, such approaches went by the name of Front-End Integration for Verticalized Systems. Micro-Frontends has finally established itself as a somewhat less cumbersome term for this.
One of the key technologies that enable micro-frontends is module federation, which facilitates the integration of these independent modules both at build-time and runtime. Module federation allows web components to be loaded on-demand, reducing initial page load times and enhancing the overall user experience. This runtime integration is particularly beneficial for larger applications with complex feature sets, as it enables the selective loading of modules only when needed, reducing unnecessary overhead. However, achieving seamless end-to-end integration and ensuring a smooth user experience across different modules can be a complex task.
Benefits of Micro-Frontends
- Easy customisation: unlike a monolith, the individual Micro-Frontends can be changed independently of each other.
- Robustness: if an error occurs within one module, it is very likely that other modules will not be affected. Since they function independently of each other, it is possible to repair the faulty module or offer a short-term alternative.
- Simplicity: the complexity of a small module is significantly less than that of a monolith, which comprises the entire functional scope of an application. Developers can thus have a better overview of the individual modules, than would be possible within a large, coherent construct.
Develop and update: individual user interface components independently, thanks to well-defined APIs, routing, HTML, and client-side web app development, which can lead to faster development cycles and greater flexibility in adapting to changing requirements, all of which will enhance the user experience.
The biggest disadvantage of a Micro-Frontend architecture is that it isn’t suitable for every project — due to the greater operating expense and increased complexity (infrastructure, communication, etc.), the approach is not worthwhile for smaller projects.
Which Frontends frameworks are particularly popular
Angular is a frontend web application framework (software for developing web applications). The Micro-Frontend architecture is particularly compatible with Angular and is therefore preferred by many developers for implementation in Micro-Frontends.
Angular also works with building blocks, i.e. each module mentioned above, comprising: a function, a set of components or a page. Micro-Frontends can therefore be developed excellently as Angular Micro-Frontends.
Micro Frontends React
Another popular Micro-Frontend framework is React. React works on the same, namely component-based, principle in which standalone components (modules) can be created and then assembled into complex user interfaces.
We have summarised more detailed information about React here.
Would you like to learn more about Micro-Frontends?
We recommend the following books: