Skip to main content

Micro Frontend

Definition​

Micro Frontend is a pattern to emerge for decomposing frontend monoliths into smaller, simpler chunks that can be developed, tested and deployed independently, while still appearing to customers as a single cohesive product.

Benefits​

Incremental upgrades​

The ability to upgrade or even rewrite parts of the frontend in a more incremental way than was previously possible with the monolith.

This concept gives us more freedom in decisions on individual parts of our product. If we want to experiment with some new technologies, we can do it in this isolated part.

Each micro frontend can be upgraded whenever it makes sense. It can be useful during the migration of monolithic applications to micro applications, because it is painful to bring down the monolith at once.

Decoupled, smaller and more cohesive​

The source code of each micro frontend tends to be smaller and cohesive, as they solve specific details of that micro application. We avoid the complexity of unintentional coupling between parties that shouldn't know each other.

This concept gives greater confidence in creating solutions, making bad decisions hard, and good ones easy.

Problem-solving is more effective, as it focuses attention on a specific part of every application.

Autonomous teams​

Teams have greater ownership over what they build, with decision-making power over that specific slice of the product. This way helps our teams to be formed around product features such as subject-matter experts for example, graphics, notifications or checkouts and these domains are spread out in other parts of the project, without the need to strictly break from page to page.

Independent deploy​

Each micro frontend must have its own continuous delivery pipeline, which it builds, tests and deploys in production. Independence avoids queues, one of the biggest productivity gains of this architecture, in addition to preventing deployment problems from affecting other parts of the application.


Independent deploy

How to define a micro frontend​

Here we will see some guidelines to help us define a micro frontend when splitting the layout.

It is important to emphasize that there is no right or wrong way to define what will be a micro frontend, as long as this definition meets the benefits and concepts as seen above.

Assuming we have a page layout and we need to understand how to define the micro frontend, the diagram below can help us:

Diagram to define a Micro frontend

Single per page​

The most common case is the division of a micro frontend for each page, where the team is responsible for the entire page and parts of this page do not work independently


Single per page

Another case is when we need to ensure a navigation flow on a single micro frontend simulating multiple pages, for example, a wizard flow or integration where the interaction needs a beginning and an end.

Keep your attention on the definitions and benefits of using a micro frontend, be careful not to create a mini monolith with this structure, make sure the flow and connection between pages (steps) are needed.


Single per page with multiple pages

Multiple per page​

Another know case is the division of multiple micro frontend per page, which is most often preferred where there is high complexity in each part of this division, making decoupling and cohesion necessary, besides to enabling:

  • Be reused on other pages;
  • Works independently of each other;
  • Each one will deploy independently;
  • Share responsibility of some part with another team;

Multiple per page