MicroFrontend Design Pattern

What is a micro-frontend?

A micro frontend is like building a website using small, independent building blocks. Each block (or module) is self-contained and can be reused on different pages.

While JavaScript and its frameworks are the most common choices for building these blocks, developers can use any programming language as long as it can be converted into a format that works with JavaScript.

In a micro frontend setup, a large web application is split into smaller, manageable pieces. Each piece is developed, tested, and deployed separately. Different teams can work on different parts of the project without interfering with each other. However, when users visit the website, they experience it as a single, smooth application without realizing it’s made up of multiple independent parts.

Different Architectural Approaches

Core Ideas behind Micro Frontends:

1. Each micro frontend should be deployable on its own without affecting others.
2. Enables faster updates and reduces deployment risks.
3. Teams should have full ownership of their micro frontend, from development to deployment.
4. Promotes autonomy and speeds up feature development.
5. Users should not feel they are interacting with multiple micro frontends.
6. Ensure consistent design, navigation, and performance across all fragments.
7. Micro frontends allow teams to scale specific parts of an application independently.
8. Easier to maintain and upgrade without impacting the entire system.
9. Use lightweight communication methods such as browser events and API calls.
10. Avoid deep dependencies between micro frontends to maintain flexibility.
11. Load only the necessary micro frontends dynamically instead of bundling everything together.
12. Optimize rendering strategies to improve speed and efficiency.
13. Implement authentication and authorization at the micro frontend level.
14. Prevent unauthorized data access between different micro frontends.
15. Encourage best practices, shared UI libraries, and common design systems.
16. Define clear ownership and communication standards for better cooperation.

Implement Micro Frontend architecture in React:

There are several ways to implement Micro Frontend in React

1. Using Module Federation Plugin (Webpack 5)👍
   In webpack 5 introduced Module Federation, which allows multiple independent applications to share components dynamically.

How it Works:

• Each microfrontend exposes components via Webpack’s ModuleFederationPlugin.
• The host application dynamically loads these components at runtime.

Steps to Implement:

1. Install Webpack Module Federation Plugin.

npm install webpack webpack-cli webpack-dev-server --save-dev

2. Configure Webpack in Microfrontend App.

const { ModuleFederationPlugin } = require("webpack").container;
module.exports = {
  entry: "./src/index",
  mode: "development",
  devServer: {
    port: 3001,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "microfrontend",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/components/Button",
      },
    }),
  ],
};

3. Configure Webpack in Host App (Shell App).

const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      	name: "host",
	filename:'remoteServer.js',
      	remotes: {
        microfrontend: "microfrontend@http://localhost:3001/remoteEntry.js",
      },
    }),
  ],
};

4. Import Remote Component in the Host App.

import Button from "microfrontend/Button"; 
or
const Button = React.lazy(()=> import('microfrontend/button'));

Best For: Large applications with multiple teams working on different features.

Limitation: Not works with multiple technologies 

 2. Single-SPA (Meta-framework for Microfrontends):

Single-SPA is a framework that enables multiple frontend applications to coexist.

How it Works:

• Each microfrontend registers itself using single-spa.
• The shell application loads the microfrontend dynamically.

Steps to Implement:

1. Install Single-SPA

npx create-single-spa

2. npx create-single-spa

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@app/navbar",
  app: () => System.import("@app/navbar"),
  activeWhen: ["/"],
});

start();

3. Expose Microfrontends

Each microfrontend registers itself:

export function bootstrap() {
  console.log("Microfrontend bootstrapped");
}

export function mount() {
  console.log("Microfrontend mounted");
}

export function unmount() {
  console.log("Microfrontend unmounted");
}

Best For: Applications with multiple frameworks (React, Vue, Angular).

Limitations: Single-SPA’s main limitation is the complexity of managing multiple frameworks, ensuring seamless communication, and handling performance overhead in large-scale applications.

3. Iframe-based Microfrontends:

In this approach, microfrontends run inside iframes and communicate via window.postMessage.

Steps to Implement:

1. Host App (Shell App)

<iframe src="http://localhost:3002" />

2. Microfrontend App (Running on Port 3002):

window.addEventListener("message", (event) => {
  console.log("Received:", event.data);
});

Best For: Isolated apps with strict security requirements.

Limitations: Limited functionality.

Which One Should You Choose?

Approach	Best For	Complexity	Performance
Webpack Module Federation	Large-scale projects	Medium	High
Single-SPA	Multiple frameworks(React, Vue, Angular)	High	Medium
Iframe-based	Security-sensitive applications, Limited features	Low	Low