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.
An Implementation with React
High Level Architecture
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.
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 👇