What are micro frontends?

What are micro frontends?

Microfrontends is an architectural approach towards designing scalable front-ends. It involves designing front ends as smaller self contained units instead of large monolithic codebases. This means each of the smaller units can be developed, tested and deployed independently of each other. This approach makes it easier for large teams to isolate their work and plan better.

Microservices and Microfrontends

Micro services is a well known architectural approach for building backend systems. The same idea has been extended to frontends but it is much difficult to design because unlike backends, frontends do not make sense to the user when seen independently.

Why micro frontends

Isolation

Allows large teams to be split based on pieces they own and work independently on their own sprints.

Scalability

Micro frontends can be independently scaled based on the needs of each module. This can be particularly beneficial in large and complex applications where certain features may require more resources than others.

Allows for experimentation

This approach allows teams to adopt different technologies and and try different things in their own isolated micro frontend.

Why avoid microfrontends

Microfrontends, as a concept, have faced significant criticism and are considered controversial. This architectural approach is often deemed to introduce unnecessary complexity, particularly when the advantages of this complexity are not readily apparent. The associated tooling, deployments, and related tasks become a burden for DevOps teams to manage.

In frontend technology, the user interface (UI) must seamlessly come together to present a unified view to the user. However, the intricate nature of the architecture often leads to bugs arising in the realm of inter-component communication. Fixing these issues becomes more challenging due to the involvement of multiple teams in the communication process.

Overall micro frontends solve a problem not common to most organizations. Even when you run into those problems there are other better alternatives that exist.

Micro frontend example

Given that micro frontends is a solution for teams that are large, chances are you will end up refactoring a very large codebase to achieve that. However as an academic exercise you may consider playing with example here to understand how a typtical micro fronend might look1.

1