Microfrontends

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 article

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:

Server-Side Composition

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.

Edge-Side Composition

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

Client-Side Composition

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:

Articles

Videos

Available Frameworks

Micro-Frontends is new, and frameworks are evolving. There are several frameworks in the market today:

Webpack 5 Module Federation
Webpack is a well-known framework that is widely used in Frontend for years. Webpack added a new plugin for Micro-Frontends that solved most of the issues with previous frameworks. It does not require added overhead for systems that are already using Webpack. Webpack is an open-source JavaScript module bundler. Simply, Webpack takes modules with dependencies and generates static assets representing those modules that can be stored in a Web-enabled AWS S3 storage to have a website without servers. It can be used with Nginx to route URLs to the appropriate bucket on S3. It is very efficient as it reduces the need for servers and reduces the package size to only needed dependencies. In Micro-Frontends architecture, Webpack Module Federation allows JavaScript application to dynamically import code from another application at runtime from different URLs. Webpack provides Build-time and Run-time integrations without the need for a server. It also tackles the problem of code dependency and increased bundle size by enabling dependency sharing. For example, if you’re downloading a React component, your application won’t import React code twice. The module will smartly use the React source you already have and only import the component code. Finally, you can use React.lazy and React.suspense to provide a fallback should the imported code fail for some reason, making sure the user experience won’t be disrupted because of the failing build.
AWS Serverless Microfrontends @Edge
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
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.
Single SPA
PuzzleJS
Open Components
SystemJS
Qiankun
Piral
Luigi
FrintJS
Mosaic 9