Micro frontends — a path to cleaner code and faster development

The traditional model to build, deploy, deliver and maintain web applications requires large-scale developer teams and complex, centralized systems. But now, the use of micro frontends is gaining traction. The micro frontend design approach decomposes a frontend app into individual, semi-independent “micro apps,” which work loosely together, similar to microservices.

This new technique creates a massive impact by decoupling large teams and empowering smaller groups to develop strategies and make decisions on their projects. Some of the advantages are:

• Reducing cross dependencies
• Separating deployment plans for individual services/applications
• Splitting the frontend codebase into manageable pieces

As Luca Mezzalira, Chief Architect at DAZN, states:

Micro frontends can really help an organization to move faster, innovate inside a business domain and isolate the failures…Often, centralization causes team frustrations because external dependencies are difficult to be resolved considering a team cannot affect too much the work of another one.

What are the benefits of micro frontends?

With the right tools and components, any team can overtake a monolithic application and reduce its complexity to individual release features. There isn’t a constant fear of an application breaking down due to an unrelated change. Independent teams can collaborate and easily work on a set of divided frontend features, developing it end-to-end from the database to the user interface. Micro frontends make it possible to:

• Enable each team to work on their part of the project without coordinating or depending on other teams
• Build independent applications that don’t rely on shared variables or sharing runtime, even if the entire team is using the same framework or same codebase
• Provide more versatility to use potential ideas and designs, as each team works independently
• Build cross-team APIs and favor native browsers for communication
• Offer greater flexibility in terms of updates and upgrades. Since each team works on an independent feature, the whole process is more user-centric, streamlined, quicker and more effective with new releases
• Decrease and clean up the codebase of each project making it easier to work with. By clearly defining each component of the application’s goals, it’s easier to make changes and avoid any problematic coupling of components that takes place otherwise
• Implement autonomous deployment. This is a crucial factor in micro frontends; the independent nature gives a continuous delivery pipeline that supports building, testing and deployment without having to worry about other the status of other code in the same application
• Take advantage of better scalability and extensibility; micro-frontends are developed in smaller units, making it easier for developers to have better control over their projects. Developers can also toggle features on and off to help limit complexity
• Apply the Single Responsibility Principle, as each module has only one responsibility
• Improve the user experience — with cross-functional team independence, every point of friction in your UX and app can be thought through meticulously

Micro frontend architecture

As the product grows, so does the codebase. Along comes the responsibility to delegate different features to different teams. When multiple teams start to work regularly on the same codebase, it leads to code conflicts and CI/CD pipeline delays. Splitting the monolithic architecture of the large application codebase gives individual teams the power to own the feature development and utilize the framework in the best possible way to suit their product needs.

Just like microservices, micro frontends have no single approach or a well-known architecture structure. The Trulioo approach uses a SPA micro frontend architecture, which promises scalability in a distributed development environment.

The diagram displays an overview of Trulioo micro frontend architecture. It shows the relationship between MF source control, deployment to CI/CD pipeline, and host app consisting of micro frontend services:

Our host app embeds micro frontend applications within their codebases, servers and CI/CD pipelines. These mini-apps have been broken down based on routes. Our DevOps team efficiently builds and deploys various feature updates continuously to the production environment, without worrying about affecting the whole product.

When splitting the app, we follow a value-driven approach, with each mini-app having value on its own.

Issues with micro frontends

As each team makes their own technology choices, a browser may download multiple frameworks and duplicate code. Also, increasing use of the micro-app can impact performance.

There is tension between letting teams compile their applications independently to work autonomously and the desire to build applications that can share common dependencies. However, a change in the dependency might end up needing extra efforts for a one-off release.

The environment matters. If developing locally in an environment that is not production-like, it’s necessary to regularly integrate and deploy the micro frontend to environments that are like production. Also, testing (manual and automated) in these environments is needed to catch integration issues as early as possible.

Micro frontends for solving complex codebases

Micro frontends can help in solving complex codebases and the need to scale architectures. It’s a good component model and a better way to build modular applications, standardize development and deliver on projects faster. While there are many available solutions in the market, it’s essential to check the variety of patterns, consider your team’s size, and how the components will communicate with the framework.

Micro frontends can help in forming a targeted solution for a specific set of problems in the application. Getting an extensive frontend application into micro-front can significantly reduce technical friction.