Ease of UI releases- micro frontends with module federation

Let us consider a portal with multiple sub-sections with each sub-section developed by its team. With the portal being a single deployable artifact, releasing changes to sub-sections takes a lot of time and effort for coordination. Changes to different sub-sections of the portal involve coordination with other teams.

The below image shows an example portal with sub-sections coming from different subdomain teams. Having this deployed as one artifact slows the rate of evolution of this portal product. “Dashboard”, “My Learnings”, and “Catalog” sub-section were developed by their own team and deployed together to end-users.

Monolithic portal with subsections from different subdomains

A portal with a single deployable artifact will be deployed as below and any change to a sub-section will need the entire portal to be released.

Deployment diagram

We could make the process better with sub-sections coming in as micro frontends (MFE) and having that as compile-time dependencies for the portal. This evolution helps in splitting the code up by teams but not the deployment yet.

Module federation with webpack 5 provides an elegant solution for this problem. It facilities subdomain user interface sections to be made part of runtime dependency for portal instead of compile-time dependency.

Each of the subdomain teams can have its deployable artifact and a shell application can do the orchestration of pulling things together for the end-user.

Learnings section MFE from port 5100 with portal server from port 4000

Deployment can be moved as below where each of the shell and micro frontends is independently deployed.

Deployment with module federation

Code for this use case is in below GitHub repository as a reference implementation.

https://github.com/ganesh-murugappan/portal-mfe-module-federation

Shell and Micro frontend applications need to have angular-architects/module-federation dependency and we need to set the configuration on the webpack-config.js file for the respective application

Shell application configuration :

Remote pulled in shell application

Micro frontend application configuration :

MFE module exposed to remote

For a uniform experience for the user, we should be using a design system manager library for the components that are used in different subdomains.

Providing teams the ability to release code without dependencies and manual coordination will be creating values on multiple fronts. Each subdomain will be evolving at a different rate and we should be facilitating that evolution with the adoption of modern tools as they are available.