Enhancing Frontend architecture using Federated Modules

Written By- Arshmeet Singh

Introduction

In today’s tech-driven world, it’s essential to adopt new technologies that can help businesses to grow and expand. One of the most popular technologies in recent years has been micro frontends.

At Airtel, we have successfully implemented and improved micro frontend architecture that has helped us to improve our development speed, reduce complexity, and enhance the overall user experience. It has helped us reduce the time it takes to release new features and updates, giving us a competitive edge.

In this post, we will discuss in detail how we improved our existing micro frontend architecture at Airtel and the benefits that we derived from this implementation.

Problem Statement

We want external dependencies to be resolved on-demand at run-time from any number of sources, rather than the traditional approach of bundling dependencies at build time.

We needed a mechanism to expose and consume code between builds. Multiple separate builds should form an application, creating a single and unified application.

Solution

We required a parent application that functions as a consumer, serving as the central hub for consuming various applications exposed through containers. The child applications expose all their routes from their respective containers, which are then consumed within the parent application. Our objective was to develop a dedicated container application that acts as an interface for sharing reusable components and functionalities across applications, similar to a UI library.

A Theoretical Explanation

We wanted external dependencies to be resolved on-demand at run-time from any number of sources, rather than the traditional approach of bundling dependencies at build time.

We needed a mechanism to expose and consume code between builds. Multiple separate builds should form an application, creating a single and unified application.

Compile Time Integration

Runtime Integration

An Implementation with React

High Level Architecture

Architecture Diagram

We created a shell application which would act as host for all child applications. This shell application will be responsible for rendering common layout for the application as well as a place to fetch and initialise any global data/state.

Flow Diagram

Creating a parent app

Here app_shell serves as parent app and contains layout like Header, Sidebar and Footer. User profile is fetched and saved in global state. We are using Recoil, you can use any global state management tool

Creating a child app

Each child application would expose entire App or Routes as a resource. This will be consumed by shell application to render child application basis “base path” of child application.

Here billing with routes like /pay and /download exposes all routes from webpack module federation. In app_shell, /billing renders billing child app

Other modules like inventory, help_support can be exposed which can be consumed in app_shell.

Here other modules inventory and help_support, can be exposed and consumed in app_shell

Creating a shared app

We created a shared module in z-plane, this module can be used to resolve any dependency in between

In this we exposed reusable components, utilities, constants, etc. from shared module which can be used by any other module

Possibilities are endless

This approach can be extended to expose resources at any level. At highest granular level we can expose entire application or routes, at lowest granular level we can expose any component, utility etc. add limitations

We can compose application out of multiple resources exposed by other applications

Thanks for Reading

Have fun, keep learning, and always keep coding. Follow me on Medium & Linkedin.

🤝 Like, Share, Leave your comment

If you have any questions or feedback, let me know in the comments below 👇