Our Hunters have got down to work again and are going to talk to us about the architecture of micro frontends. Read on!

Micro-frontend architecture is an architectural approach with a main (aggregator) application and individual (aggregated) applications, where each individual application exposes its functionality so that it can be included in the main application. This architecture is able to link different individual micro frontends, which can operate completely independently.

An example of micro frontends is shown in Figure 1. See how different teams take care of different services, each as a separate application. The frontend of these applications has an entry point to be integrated by the aggregator application.

Micro frontends can be implemented in different languages and even frameworks.

Figure 2 shows a container application that aggregates different micro frontends.

The authentication block is implemented in TypeScript and Keycloak, the search feature in React, user profile management in Angular and order management in a different version of React using TypeScript. All these micro frontends expose their functionality through an entry point for the main application to aggregate it in a way that is fully transparent to the user.

How are the different micro-frontends integrated?

The integration of micro-frontends can be done through an automated framework or manually. There are currently different approaches to this:

• Server integration: Each micro frontend is hosted on a separate server that renders and serves the application. When the browser request is received, the aggregator communicates with the aggregated application. Implementing a good caching strategy is recommended to decrease latency.
• Compile-time integration: In this type of integration, the aggregator has access to the code of the aggregated applications during their development and compilation phase. You can include the aggregated applications as dependencies in the “package.json” file. If any changes are made, the entire application has to be redeployed.
• Run-time integration: The integrator application has access to the code of the integrated applications while running on the browser. Any changes do not need the application to be redeployed, as the code of each micro frontend is dynamically loaded. There are different implementations for this type of integration:
  • Through iframe or script elements, which can be embedded in a web page to load and render components. Iframes offer highly isolated styles and global variables that do not interfere with each other, creating an isolated environment for each component. However, a 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 aggregate application whose route matches the browser request.
  
  
  • Webpack Module Federation Plugin: it allows JavaScript applications to load code from other applications at runtime and implement the micro frontend architecture, as the aggregator application (called host app) can route to different aggregated applications (called remote apps) at runtime. It also allows sharing dependencies between different applications to avoid library redundancy and thus reduce the bundle size of aggregated applications.

What are the advantages of micro frontends?

The advantages of micro frontends include:

• Modularisation: the macro frontend application becomes an architecture of micro applications that are aggregated into a central application.
• High speed: modularisation results in higher deployment speed, each module having its own lifecycle independent of the others; and development speed, with the elimination of coupling when developing separate modules.
• Maintainability: aggregated applications are easy to maintain, manage and debug; we simplify them by dividing them by business area, mission or domain.
• Elasticity: a domain or area is highly scalable due to low coupling.
• Heterogeneity: micro frontends can be implemented with different technologies (frameworks) or different versions of the same one.
• Easy migration of applications written in obsolete technologies.

Case study

This architecture is useful for large applications that need the collaboration of many developers, or in Domain Driven Design (DDD) contexts. In this type of project, each microservice takes care of a part of the domain, without interfering with the rest. The micro frontend approach helps simplify the domain layer, especially in large projects. However, the micro frontend framework is not useful for small applications or those that do not need to be divided because of their simplicity.

Want to know more about Hunters?

A Hunter rises to the challenge of trying out new solutions, delivering results that make a difference. Join the Hunters programme and become part of a diverse group that generates and transfers knowledge. Anticipate the digital solutions that will help us grow. Find out more about Hunters on our website.

Tahir Farooq

Software Technician at Altia