Micro frontend architecture is an architectural approach that combines a main application (aggregator) and individual applications (aggregates). Each application exposes its functionality so that it can be included in the main application. This architecture allows for the integration of different individual micro frontends, which can operate completely independently.
Figure 1: End-to-End architecture (or vertical organization) of micro frontends.
An example of micro frontends would be the one we find in Figure 1. It shows different teams handling different services, each as a separate application . The frontend of these applications exposes an entry point for integration by the aggregator application.
Micro frontends can be implemented in different languages and even frameworks .
Figure 2: Example of micro frontends written in different frameworks.
Figure 2 shows a container application that aggregates different micro frontends.
The authentication block is implemented in TypeScript and Keycloak , search is implemented in React, user profile management is implemented in Angular , and order management is implemented in a different version of React using TypeScript . All of these micro frontends expose their functionality through an entry point, allowing the main application to add it completely transparently to the user.
How do different micro frontends integrate?
Micro frontend integration can be done using an automated framework or manually . Currently, there are several approaches to doing this:
- Server Integration : Each microfrontend is hosted on a separate server that renders and serves the application. When the browser request is received, the aggregator application makes a call to the aggregated application. It's recommended to implement a good caching strategy to reduce latency.
- Compile-time integration : In this type of integration, the aggregator application has access to the code of the aggregated applications during their development and compilation phase. The aggregated applications can be included as dependencies in the "package.json" file. If any changes are made, they require a redeployment of the entire application.
Runtime integration : The integrating application has access to the integrated application code while it runs in the browser. Changes made do not require redeploying the application, as the code for each microfrontend is dynamically loaded. There are several implementations of this type of integration:
- Using iframe or script elements, which can be included within a web page to load and render components. On the one hand, the iframe offers a high degree of isolation of styles and global variables that do not interfere with each other, creating an isolated environment between each component. However, the script element offers a more flexible approach as it allows data to be passed between them.
First, the aggregated applications would be loaded. Then, a global function is exposed that routes to each of the loaded applications. When a browser request arrives, the rendering request is made to the aggregated application whose route matches the browser's request.- Webpack Module Federation Plugin: This allows JavaScript applications to load code from other applications at runtime and implement the micro frontend architecture, as the aggregator application (called the host app) can route to different aggregated applications (called remote apps) at runtime. It also allows dependencies to be shared between different applications to avoid library redundancy and thus reduce the bundle size of aggregated applications.
What are the advantages of micro frontends?
Among the advantages of micro frontends are:
- Modularization : The frontend macro application is eliminated and now becomes an architecture of micro applications that are aggregated into an aggregator application.
- High speed : Derived from modularization, faster deployment speeds are achieved, with each module having its own lifecycle and being independent of the others; and faster development speeds are achieved, with the elimination of coupling when developing separate modules.
- Maintainability : Aggregate applications are easy to maintain, manage, and debug because we simplify them by dividing them by business area, mission, or domain.
- Elasticity : A domain or area is highly scalable due to loose coupling.
- Heterogeneity : Micro frontends can be implemented with different technologies (frameworks) or with the same one, but with different versions.
- Ease of migration of applications written in obsolete technologies.
Case study.
This architecture is useful for large applications that require collaboration from many developers, or in Domain Driven Design (DDD) contexts. In these types of projects, each microservice handles a portion of the domain without interfering with the rest. Therefore, the microfrontend approach helps simplify the domain layer, especially for large projects. However, this microfrontend pattern is not useful for small applications or for applications that do not require division due to their simplicity.
Want to know more about Hunters?
Being a Hunter means accepting the challenge of testing new solutions that deliver differentiated results. Join the Hunters program and become part of a cross-functional group capable of generating and transferring knowledge. Get ahead of the digital solutions that will drive our growth. Find more information about Hunters on the website.
Tahir Farooq - Software Technician at Altia
