What are Micro-Frontends?
Martin Fowler defined the Micro-Frontend architecture as "an architectural style where independently deliverable frontend applications are composed into a greater whole". Simply, a Micro-Frontend is a portion of a webpage (not the entire page). In the Micro-Frontend Architecture, there is a "Host" or a "Container"page that can host one or more Micro-Frontends. The Host/Container page can also share some of its own Micro-Frontend components. For example, as we implemented in our previous articles, we exposed a Button component from mfe1 page into mfe2 (the host/container) Or the live one at http://mfe1.s3-website-us-east-1.amazonaws.com/ that we deployed together to S3 in this articleRead More ...
Micro Frontends Implementation
The main key in Micro-Frontends is the integration between the host/container and Micro-Frontends. There are two ways to integrate Micro-Frontends
1. Build Time Integration
This is what most of the code implemented today. The container will install the components as libraries, similar to the libraries you install from npm. The issues with this approach are syncing different versions of libraries and build issues. Also, it is very hard to use different technologies. Also, the size of the final package will be big because it contained all dependencies. Moreover, you have to deploy again for any changes in dependencies. Also, there is a tight coupling between the container and all Micro-Frontends.
2. Run Time Integration
Run-Time integration has three types of Compositions:
In this case, all the functionality will be in the backend that decides which Micro-Frontend to load. The server will decide which URL to route the request to. This is a standard server-side composition. I have used simple reverse-proxy using Nginx to do this task. However, there are many other implementations.
In this approach, you make use of CDN (Ex: AWS CloudFront) and Lambda@Edge. The orchestration will happen on the CDN itself, instead of the Client-Side or Server-Side. More about this at https://youtu.be/fT-5RHTtFNg
This is what I have explained in the previous articles. In this case, the container is built and deployed separately. Each Micro-Frontend can be exposed as a separate package that the container/host can fetch the needed Micro-Frontend. For more explanation of this approach, refer to the list of articles here. In this case, the container and the Micro-Frontends are completely de-coupled. They do not share build or deployment and can use different technologies. The container can decide on the version of the Micro-Frontend to deploy. One of the methods used, recently, is Webpack 5 Module Federation Plugin. Webpack 5 Module Federation Plugin has been trending very high and providing very successful results. If you need more details you can follow my other videos and articles here:ArticlesVideosRead More ...
Micro-Frontends is new, and frameworks are evolving. There are several frameworks in the market today:
AWS Severless Micro-Frontends at the Edge: In this approach, AWS make use of their CDN (AWS CloudFront) and Lambda@Edge. The orchestration will happen on the CDN itself, instead of the Client-Side or Server-Side. More about this at https://youtu.be/fT-5RHTtFNg
Bit is a Build-Time integration Framework. Bit provides a full framework, including CI/CD pipeline. It takes separate components and builds them into micro-frontends. Bit is similar to Webpack that it works in Build time. However, with the Module Federation Plugin, Webpack has an advantage of Run-Time integration, as well, which makes components are more decoupled.
- Micro Frontends From Beginner to Expert
- Micro Frontends What, Why, and How
- Understanding Micro Frontends With a Hands-On Example Using React, Webpack 5, and Module Federation
- Micro Frontends Hands-On Example Using React, Webpack 5, and Module Federation: Adding a third React Micro Frontend
- Micro Frontends Step by Step Using React, Webpack 5, and Module Federation
- Deploying Micro Frontends to AWS Step by Step Using React, Webpack 5, and Module Federation
- Understanding Micro-Frontends Webpack5 configurations Step by Step
- Understanding Micro-Frontends Webpack5 Module Federation configurations Step by Step
- Micro Frontends by Martin Fowler
- 11 Micro Frontends Frameworks You Should Know
- Micro-frontends decisions framework
- Why Frontend Developers Need to be Webpack Experts
- Micro-Frontends at scale (part 1)
- Frontend Architectural Patterns: Backends-For-Frontends