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.

The joint work of several 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 and other updates.

Development teams therefore like to use the so-called Micro-Frontend 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. 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. 

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. 

"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.

• 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.
• Flexibility: in a Micro-Frontend architecture, you can just select the best tool for the job. Since the modules work independently of each other, they can be implemented in JavaScript, Go, etc. in parallel. 

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.

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:

• The Art of Micro Frontends: Build websites using compositional UIs that grow naturally as your application scales (Amazon.com)
• Micro-Frontends in Aktion (manning.com)