Micro Frontend Architecture Explained

Microfrontend architecture allows breaking a monolithic frontend into smaller, independent apps that work together seamlessly. Each microfrontend can be developed, deployed, and scaled independently, similar to microservices for the frontend.

---

Microfrontend Architecture

1️⃣ Core Components of Microfrontend Architecture

Microfrontend architecture consists of the following key components:

• Host (Shell) Application → Loads microfrontends dynamically and acts as the main container.
• Microfrontends (Remotes) → Independent frontend applications that expose components.
• Module Federation (Webpack) → Enables dynamic loading of remote components.
• Shared Dependencies → Common libraries like React, Vue, or Angular shared across microfrontends.
• Routing and Communication → Ensures navigation and data sharing between microfrontends.

2️⃣ Microfrontend Architecture Diagram

+------------------------------------------------+
|               Host Application (Shell)         |
| +------------------------------------------+  |
| |   Header Component (Shared)             |  |
| +------------------------------------------+  |
| |                                          |  |
| |   🛒 Cart Microfrontend (React)         |  |
| |   🔎 Search Microfrontend (Vue)         |  |
| |   🛍️ Product Microfrontend (Angular)   |  |
| |   📢 Notifications Microfrontend (Svelte) |  |
| |                                          |  |
| +------------------------------------------+  |
| |   Footer Component (Shared)             |  |
| +------------------------------------------+  |
+------------------------------------------------+

• The host application (shell) contains a common layout (header/footer) and dynamically loads microfrontends.
• Each microfrontend is built separately and integrated into the host.
• Module Federation allows real-time sharing of components between different microfrontends.

---

How Microfrontends Work?

Instead of having a single large frontend application, we split it into multiple smaller apps. These microfrontends can be built with different frameworks (React, Angular, Vue, etc.) and loaded dynamically in a host application.

Example Scenario

Imagine an e-commerce site with:

• 🛒 Cart Microfrontend (React)
• 🔎 Search Microfrontend (Vue)
• 🛍️ Product Microfrontend (Angular)
• 📢 Notifications Microfrontend (Svelte)

Each team can work on their part independently, and the main app (host) stitches them together.

---

How to Implement Microfrontends?

1️⃣ Use Webpack Module Federation

Webpack Module Federation Plugin allows microfrontends to share components dynamically.

Host App (Shell)

This app loads other microfrontends dynamically.

// webpack.config.js (Host App)
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        cart: "cart@http://localhost:3001/remoteEntry.js",
      },
    }),
  ],
};

Microfrontend App (Cart)

This microfrontend exposes its components.

// webpack.config.js (Cart App)
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "cart",
      filename: "remoteEntry.js",
      exposes: {
        "./CartComponent": "./src/CartComponent",
      },
      shared: {
        react: { singleton: true, eager: true },
        "react-dom": { singleton: true, eager: true },
      },
    }),
  ],
};

Now, the host app can dynamically import the cart component:

import("cart/CartComponent").then((Cart) => {
  Cart.default();
});

---

Microfrontend Terminology in Webpack Module Federation

1. exposes – Sharing Modules

The exposes option is used by a microfrontend to make specific modules available for other apps to consume.

exposes: {
  "./CartComponent": "./src/CartComponent",
},

This means that CartComponent can now be imported by other applications.

2. remotes – Importing Remote Microfrontends

The remotes option allows the host app to dynamically load a microfrontend from another app.

remotes: {
  cart: "cart@http://localhost:3001/remoteEntry.js",
},

The host app can now import components from the cart microfrontend.

3. remoteEntry.js – The Entry File

This is auto-generated by Webpack and contains metadata about the exposed modules and dependencies. The host app fetches this file dynamically at runtime.

4. shared – Optimizing Dependencies

The shared option prevents multiple versions of the same dependency from being loaded across microfrontends.

shared: {
  react: { singleton: true, eager: true },
  "react-dom": { singleton: true, eager: true },
},

• singleton: true → Ensures only one instance of React is loaded across all microfrontends.
• eager: true → Loads the dependency immediately instead of waiting for runtime resolution.

5. library – Defining How the Remote Microfrontend is Exposed

library: { type: "var", name: "cart" }

This exposes the cart microfrontend as a global JavaScript variable.

---

Why Use Microfrontends?

✅ Independent Deployment → Each team can deploy their microfrontend separately.

✅ Tech Flexibility → Different teams can use different frameworks.

✅ Better Scalability → Scale only the parts of the app that need it.

✅ Faster Development → Teams work in parallel without merge conflicts.

---

How to Use Microfrontends in a Blog?

If you're building a blog platform with microfrontends, you can split features like:

• 📝 Editor Microfrontend → Built in React (Markdown support).
• 📊 Analytics Microfrontend → Built in Vue (Shows views, shares, etc.).
• 📜 Comments Microfrontend → Built in Angular (User interactions).

Each of these can be loaded dynamically into a single host blog app.

🚀 Now you’re ready to build a microfrontend architecture like a pro!