Micro Frontend Architecture

#javascript #react #angular #vue

Micro Frontend Architecture

One of the most prominent developments in the front-end world over the past year is the Micro frontend (MFD). Though the concept is still in its infancy, it is gaining support and has the potential to completely alter the game.

Micro Frontend: What is it?

The idea behind MFD is to think about a website or web app as a composition of features that are owned by independent teams. Every team focuses on and is an expert in a certain area of business or mission. A team is cross-functional and develops its features end-to-end, from database to user interface. So MFD is where we take a monolithic application and we divide it into multiple smaller applications. The willingness to use MFE is mainly linked to the size of the organization and the number of developers.

With the help of the architectural design pattern known as the MFD, the front end may be built up from smaller, loosely connected apps before being put together as a whole.

Implementing MFE: Some Ordinary Methods

1. Build time integration
In build time integration, each MFE is developed independently, and then they are integrated during the build process. This is often done by combining the compiled assets (like JavaScript, CSS, etc.) of the individual MFE into a single bundle that is served to the client.

Advantages:

Simplifies the deployment process as the integration happens during build time.
Reduces complexity on the client side as the integration work is already done.

2. Run time integration

In run-time integration, MFE is loaded independently at run-time. This means that each MFE is responsible for loading itself and interacting with other MFES when necessary.

Advantages:

Allows for dynamic loading of components, potentially reducing initial page load time.
Enables more flexibility in how and when components are loaded.

Run-time integration has three types of Compositions:

Server-Side Composition
Edge-Side Composition
Client-Side Composition

Server-Side Composition
In this approach, the server takes on the responsibility of aggregating the individual MFE into a complete page. The server fetches the required MFE components and combines them into a single HTML response, which is then sent to the client.

Advantages

Provides a clear separation of concerns between the client and server.
Reduces the complexity of the client-side code.

Edge-Side Composition
Edge-side composition involves using a content delivery network (CDN) or edge server to handle the aggregation of MFDs. The edge server intercepts the client's request, fetches the necessary components, and combines them into a complete page before delivering it to the client.

Advantages

Helps in offloading processing from the application servers.
Can improve performance by serving content from locations closer to the client.

Client-Side Composition
In this approach, the client browser is responsible for fetching and combining the MFE components to render the complete page. This is often done using JavaScript frameworks or libraries that handle the dynamic loading and rendering of components.

Advantages