Micro-Frontends: Breaking Down Monolithic UIs

Micro-frontends extend microservices principles to frontend development. This architecture enables teams to build, deploy, and scale frontend applications independently.

What Are Micro-Frontends?#

Micro-frontends decompose a frontend application into smaller, independent units that can be developed and deployed by separate teams.

Traditional Monolith          Micro-Frontend Architecture
┌─────────────────────┐       ┌──────┬──────┬──────┐
│                     │       │ Team │ Team │ Team │
│   Single Frontend   │  →    │  A   │  B   │  C   │
│   Application       │       │      │      │      │
│                     │       │ Auth │ Shop │ Blog │
└─────────────────────┘       └──────┴──────┴──────┘

Implementation Approaches#

1. Module Federation (Webpack 5)#

Module Federation allows loading remote modules at runtime:

// host/webpack.config.js
const ModuleFederationPlugin = require('@module-federation/enhanced/webpack');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        shop: 'shop@http://localhost:3001/remoteEntry.js',
        auth: 'auth@http://localhost:3002/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

// shop/webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shop',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductList': './src/components/ProductList',
        './Cart': './src/components/Cart',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

Use remote modules in the host:

// host/src/App.jsx
import React, { Suspense } from 'react';

const ProductList = React.lazy(() => import('shop/ProductList'));
const LoginForm = React.lazy(() => import('auth/LoginForm'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LoginForm />
        <ProductList />
      </Suspense>
    </div>
  );
}

2. Web Components#

Framework-agnostic approach using custom elements:

// product-card/index.js
class ProductCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  static get observedAttributes() {
    return ['product-id'];
  }

  async connectedCallback() {
    const productId = this.getAttribute('product-id');
    const product = await this.fetchProduct(productId);
    this.render(product);
  }

  render(product) {
    this.shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #ddd;
          padding: 16px;
          border-radius: 8px;
        }
        .price {
          color: #2563eb;
          font-weight: bold;
        }
      </style>
      <div class="card">
        <h3>${product.name}</h3>
        <p class="price">$${product.price}</p>
        <button>Add to Cart</button>
      </div>
    `;

    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('add-to-cart', {
        detail: { productId: product.id },
        bubbles: true,
      }));
    });
  }
}

customElements.define('product-card', ProductCard);

3. Single-SPA Framework#

Orchestrate multiple frameworks:

// root-config.js
import { registerApplication, start } from 'single-spa';

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

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

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

start();

Shared State Management#

Custom Event Bus#

// shared/eventBus.js
class EventBus {
  constructor() {
    this.events = {};
  }

  subscribe(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);

    return () => {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    };
  }

  publish(event, data) {
    if (!this.events[event]) return;
    this.events[event].forEach(callback => callback(data));
  }
}

window.__EVENT_BUS__ = window.__EVENT_BUS__ || new EventBus();
export default window.__EVENT_BUS__;

When to Use Micro-Frontends#

Good fit:

Large teams (10+ developers)
Multiple business domains
Need for independent deployments
Legacy migration scenarios

Avoid when:

Small teams or projects
Tight performance requirements
Simple applications

Micro-frontends provide organizational scalability at the cost of technical complexity. Start with a clear organizational need and choose the simplest integration approach that meets your requirements.