English | EN 
Micro front end architecture is an extension to microservices leveraging all its benefits on the front-end parts of the application. Scalability issues of back-end systems are solved via microservices on the backend wherein you split the backend into multiple smaller standalone services which can be independently developed, deployed and scaled. Micro front end architecture is all about applying microservice design principles on the front-end parts of an application.
Like the monolith back-end, the front end of an application faces below issues:
- Grows into a large monolith over a period of time.
- Serious maintenance issue arises as a large front-end code base needs a larger team to maintain it.
- Small change needs full-blown regression testing which then leads to communication problems.
- Open source package dependencies increase as code and dependencies grow further.
- It gets harder to refactor or migrate to newer technology in the future.
- Code and testing complexity increases over a period of time since all features are intertwined.
- Eventually, the existing framework becomes old & legacy and there are very few people available to work on such a legacy framework.
- Eventually, Innovation and releases slow down which becomes detrimental to business.
Micro front end architecture helps solve these issues in the following ways:
- Monolith frontend gets broken down to smaller components.
- Each component has its own backend microservice API to communicate with.
- Each component talks to its API and developed as an end-to-end feature (as shown below).
- Each section/ component is independently developed, deployed and managed by a dedicated team who works on a specific component & its API without affecting the other component in any way.
- Base App acts as a shell which houses all the micro frontend components and is used for sharing data or sessions.
- The frontend components can be tech agnostic as well wherein each component can be either be developed using different frameworks like Angular, React or Vue.js.
- Thereby the project gets divided into a cross-functional group of developers who owns each component frontend and its backend API right from development to deployment.
