All organizations face challenges while growing, scaling their products, choosing the right technology, shuffling the team, fault intolerance, and inconsistencies across the projects.
Many organizations have already started using microservices in the modern world to decouple apps. These services are perfect to implement on the server side.
For the front-end, there is a micro-frontend that is different from microservices in owing the complete business subdomain. Module federation is used for micro-frontend.
What is Module Federation?
Module Federation is an architecture of JavaScript that provides a sharing method to share code at runtime between different frontend apps. The main concern is the subdivision of a big application into small parts.
Module Federation Characteristics
Such applications have the following characteristics:
- The applications are optimized
- The small-size bundles are created
- Provide better user experience due to shared components
- Shared components can go through lazy loading whenever needed
- Huge applications can be divided into small modules
- The scattered development team can work on the technology stack of their choice
What is Micro-frontend?
Micro-frontend is designed as a client-side architecture in which each component is hosted in a separate domain and integrated into the host application.
Micro-app Characteristics
Each micro-app subdomain has the following characteristics:
A dedicated team for each subdomain
One team owns each micro-app. It means there is a dedicated team with complete business, technology, and domain knowledge. So, only one team will not be responsible to resolve all the bugs.
Implement Independently
Each micro-app team has the freedom to choose a technology stack. It can be a different architecture, framework, or coding practice.
Deploy Independently
As each micro-app is hosted in a different domain, it has to be deployed separately also. It means that you have to build multiple pipelines which may be challenging.
Decoupling
All micro-apps need to be as decoupled as possible. There should not exist any dependency ideally between them.
Fault Tolerance
Reliability is one of the biggest advantages of micro-apps. The issues in one micro-app will not affect the other.
Handle Enormous Projects
If the application is enormous and contains many modules, models, and components, the micro-frontend will be helpful. Nx mono repository plays an important role in this regard.
What are Mono Repositories?
The micro-apps will go live in a mono repository. It means that the complete application will be in the same workspace. These repositories are helpful in resolving version conflicts because there is no need to publish the libraries into NPM.
It means that there are the same versions of the package in every project as there is only one package.Json and one angular.Json. This way, having different versions of angular would not be possible.
Module Federation in Angular
The architecture is already defined in Angular that matches perfectly with Mono Repository principles and the best practices of micro-frontend. High-level architecture has three major parts:
Workspace
Angular workspace is initialized to create the mono repository application skeleton that further contains libraries and projects.
Project
Each project can be a micro-app with a separate entry point and a customizable and flexible structure.
Libraries
All the libraries use reusable and shared data between projects. It can be UI components, utility functions, and data layers.
What are the core features of Modular Federation in Angular?
There are several tips and tricks involved in micro-frontend implementation. The solid and simple solution is provided by the webpack module federation. For performance improvement, libraries are shared and there are strategies to deal with and configure versions that are incompatible.
The core features of Modular Federation in Angular for micro-frontend are the following:
Modular Approach
Modules are the main building blocks of Angular. They contain a set of components, complete features, and a page with dependencies. It is the perfect approach to completing a micro-frontend application.
Routing
Angular contains the routing feature into it by default and there is no need to install an external package for this purpose. It consists of everything that is required to maintain the transition of a page between micro-apps.
Routing Outlets
Routing outlets are required to configure the shell app to host each of the micro-app for navigation. The developer can choose a route of his choice for an angular module.
Lazy Loading
Lazy loading loads the angular module when required. It reduces the app bundle size and accelerates the load of the page. Angular provides native integration between lazy loading modules and routing. It only loads during the compilation time but we have to load all the modules in runtime dynamically.
How to build?
As we have discussed already the best practices for micro-frontend and reviewed the suitability of angular to implement this architecture. Now, there are a few things that need to keep in mind as well:
- To load data dynamically in real time, the module federation plugin is used. This plugin is provided by the webpack and supports remote and local modules.
- To combine all the sources for the workspace, use NX cli.
Algoscale utilizing Angular for Module Federation
As we have discussed that micro-frontend is highly compatible with Angular. Module Federations is the best way to integrate micro-frontend with Angular.
Algoscale is utilizing Angular for Module Federation. We are also finding out if the future versions of Angular will be compatible with it or not.
It will be popular in the future as it will also allow sharing of common data like global filters and information about the current user.
With module federation, applications are compiled separately at runtime. We can share also common dependencies. As module federations are suitable for runtime integration, it is important also for micro-frontend architecture and plugin systems.
This approach imposes more responsibility on developers as they have to ensure that the components must be loaded only at runtime and as much compilation as desired. Moreover, they also have to deal with version conflicts. For example, there is the possibility that the components compiled with different Angular versions will not work at runtime. Developers need a high level of concentration to recognize conventions.
Algoscale has an experienced team and provides micro-frontend solutions in Angular.
