Microfrontends: what are they and what benefits do they provide?

In the last years, different types of software architecture have become popular, which help us respond to the real needs of the product that we are going to develop.

Software-level architecture deals with the design of a system’s structure; a set of patterns and abstractions that evolve into a defined and clear framework that allows us to interact with the program.

In this constant evolution of the patterns that help us design software, the concept of microfrontends arises; highly related to the microservices architecture.

What are the Microfrontends?

The term microfrontend emerged around 2016. The concept of monolithic software had evolved towards a modularized backend in different pieces and these communicate with the front through an API gateway. However, in this new architecture, the front was still considered as a monolithic block. As a result of this approach using microservices, we can see the broad advantages that modularizing the front-end can offer us as well.

Consider the website of a travel agency. We could isolate the reservations and search features, or even the blog, into different independent applications, being able to develop different back and front-ends for each one, using the technology that we want for them. Because, one of the great advantages that this architecture offers us is the ability to use different front-end frameworks for each application, which will later be coupled to a host application.

Experts like Luca Mezzalira define microfrontends as a technical representation of a business subdomain. Each independent application avoids sharing logic with other subdomains, each one having its own rules.

The author himself defends the use cases for which the use of this type of architecture would be recommended:

“I don’t think microfrontends are the key to frontend development, however I do think it’s a great addition to Single Page Applications (SPA) and Server Side Rendering (SSR) architectures. Microfrontends are especially useful when we have projects with dozens of developers working together in a large business domain and want to reduce complexity by splitting into multiple subdomains, independently deploying different parts of applications without overloading communication and coordination between teams.”

Advantages and disadvantages of using Microfrontends

The use of this architecture in the development of our product can offer us many advantages:

• Possibility of using different technologies: As we have already mentioned, being agnostic in terms of the technology used is one of the most useful solutions offered by this type of architecture. We can have some parts of our application developed with Vue, React, or Angular among others. Development teams will work independently on each microfrontend, designing self-contained applications that don’t depend on each other.
• Scalability: The fact that an application is scalable allows us, in business terms, to be able to continue growing according to the needs of the project without losing the qualities that add value to it, adding new ones. This independence from the front[1]end allows us to progressively add new functionalities without depending on the existing code.
• More maintainable and reduced code: Developers will be able to work on each part of the front-end in isolation, in smaller pieces than if they had to do it on a monolithic front-end.
• Independence and autonomy: Each microfrontend can be developed in parallel without depending on the others. Different parts of the host application can have different versions, and be tested and deployed individually.
• Optimization of company resources: By dividing the development teams to work on the different features, everyone can work in parallel and in an organized manner, shortening development times. This is especially interesting in a large-scale project, where the impact of this type of organization can be greater than in a project of lesser technical complexity.

Adopting this methodology doesn’t always have to bring benefits to our project. Before choosing one or another working path, it is important to analyze the characteristics of our product to see with what type of architecture we will obtain greater performance. In this way, we can find the following problems in a microfrontend oriented architecture:

• Higher operational complexity: Each microfrontend must be deployed independently, so we will have to manage a greater number of development environments, servers… with all the economic expense and resources that this entails.
• Increased size of the final bundle of the host application: The final or host application in which all the microfrontends converge can be higher compared to a monolithic front-end, for example, due to duplication of dependencies. Creating a shared dependency library can help us reduce the final size of our application.

Microfronted Architecture: How to manage a project with them?

By using this architecture pattern, we can organize groups of developers in our team that will be dealing with each division of the final application. The code generated in each microapplication can be stored in a monorepo, that is, a common repository for all the pieces that make up the app. On the other hand, we can also use multirepos to have the microfrontends completely isolated.

Regarding the integration of each microapplication within the host application, we could use the following technical approaches:

• Client-side integration: The browser handles the integration.
• Server-side integration: The server handles the integration.
• Build-time integration: The integration is carried out at compilation time.

Tools like Webpack Federation Module or single-spa can help us working with our microfrontends.

We will have to observe the course of this new development paradigm. Still, we can say for sure that its popularity will continue growing over the years, and it will be especially necessary for large companies with projects of high technical complexity that allow them to work in a modularized way, distributing its technical and operational resources more efficiently.