What are microfrontends

Microfrontends are an architectural pattern that deconstructs a front-end application into smaller, independent units. Each unit, or "microfrontend," embodies a specific business function and fosters independent development, deployment, and scaling.

These microfrontends are designed to load on demand, ensuring users only see the components relevant to the service they're using (e.g., admin panel, booking, customer support). This approach champions modularity and flexibility in the front-end application's architecture.

What are the microfrontends’ types?

There are 3 types of microfrontends:

Monorepository

All microfrontend projects reside within a single repository. While seemingly at odds with microfrontend independence, this approach centralizes projects with shared dependencies while maintaining relative autonomy.

Multirepository

Each microfrontend has its own separate repository, offering greater isolation and independent dependency management. However, this approach can present challenges:

Integration complexity — coordinating the integration of multiple repositories can be cumbersome.
Dependency management — careful management is crucial to ensure compatibility of dependencies across diverse repositories.

Metarepository

The strategy merges aspects of both monorepositories and multirepositories. While individual project repositories remain, an additional repository serves as a central hub for integration. This approach balances centralized management with individual project isolation, offering the advantages of both strategies while mitigating their drawbacks.

When should you use the microfrontend?

Microfrontends can be beneficial in various scenarios, and their adoption depends on the needs and characteristics of a specific project. Here are some examples of how microfrontends can come in handy:

Microfrontends enable independent work, fostering faster development and simplified maintenance.
Encourage the use of diverse frontend technologies for different application parts.
Support independent scaling of frontend sections based on varying resource needs.
Facilitate independent deployment of changes, speeding up releases and minimizing error risks.
Support the creation of reusable frontend components, minimizing duplication and enhancing development efficiency.
Aid in the gradual transition from monolithic to modular architectures, leveraging the advantages of modularity such as easier maintenance and scalability.
Help sort out UI components, styles, and functionality for easier management.
Assist with the management of large-scale applications by breaking them into smaller parts.

What are the cons of microfronteds?

From our experience, carefully weigh the downsides before adopting microfrontends:

It is too complex and costly for simpler applications.
Fragmented ownership and tech stacks can hinder communication and understanding.
It requires skilled developers and thorough documentation to avoid chaos.
Decoupling can lead to duplicate code and larger bundles.
There are version clashes. Managing dependencies across multiple repositories can be tricky
It can take time to find developers familiar with the diverse technologies used.

Key Takeaways

Microfrontends break down a frontend app into deployable units. Each of them represents a business capability that can be independently developed and scaled.
They come in three types: monorepository, multirepository, and metarepository.
Benefits include faster development, diverse technology use, independent scaling, deployment flexibility, reusability, modular transitions, simplified UI management, and better handling of large-scale applications.
Potential downsides like complexity, fragmented ownership, dependency management, code duplication, and version clashes should be considered.