Micro-Frontends en 2026 : Architecture et Implémentation

Les micro-frontends appliquent le principe de séparation du backend aux frontends. Chaque équipe déploie son bout indépendamment.

Quand utiliser les micro-frontends ?

Situation	Micro-frontends ?
3+ équipes sur le même produit	✅ Oui
Déploiements indépendants nécessaires	✅ Oui
Stack technique hétérogène	✅ Oui
Petite équipe (< 5 devs)	❌ Non
Application simple	❌ Non

Architecture Module Federation

// webpack.config.ts — Shell (host)
import { ModuleFederationPlugin } from 'webpack/lib/container/ModuleFederationPlugin';

export default {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        header: 'header@https://header.example.com/remoteEntry.js',
        products: 'products@https://products.example.com/remoteEntry.js',
        cart: 'cart@https://cart.example.com/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18' },
        'react-dom': { singleton: true, requiredVersion: '^18' }
      }
    })
  ]
};

Shell (Host)

// src/App.tsx
import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('header/App'));
const Products = lazy(() => import('products/App'));
const Cart = lazy(() => import('cart/App'));

function Loading() {
  return <div className="skeleton skeleton-header" />;
}

export default function Shell() {
  return (
    <div className="app">
      <Suspense fallback={<Loading />}>
        <Header />
      </Suspense>

      <main className="content">
        <Suspense fallback={<Loading />}>
          <Products />
        </Suspense>
      </main>

      <aside className="sidebar">
        <Suspense fallback={<Loading />}>
          <Cart />
        </Suspense>
      </aside>
    </div>
  );
}

Module Micro-Frontend

// products/webpack.config.ts
new ModuleFederationPlugin({
  name: 'products',
  filename: 'remoteEntry.js',
  exposes: {
    './App': './src/App',
    './ProductCard': './src/components/ProductCard'
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true }
  }
});

Communication entre modules

// Événements custom pour la communication
class MicroFrontendBus {
  private static instance: MicroFrontendBus;

  static getInstance() {
    if (!this.instance) this.instance = new MicroFrontendBus();
    return this.instance;
  }

  emit(event: string, data: any) {
    window.dispatchEvent(new CustomEvent(`mf:${event}`, { detail: data }));
  }

  on(event: string, handler: Function) {
    const wrapper = (e: Event) => handler((e as CustomEvent).detail);
    window.addEventListener(`mf:${event}`, wrapper);
    return () => window.removeEventListener(`mf:${event}`, wrapper);
  }
}

// Cart écoute les ajouts de Products
const bus = MicroFrontendBus.getInstance();
bus.on('product:add', (product) => {
  addItemToCart(product);
});

Déploiement indépendant

# Chaque micro-frontend a son propre pipeline
name: Deploy Products
on:
  push:
    branches: [main]
    paths: ['products/**']

jobs:
  deploy:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: products
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm test
      - run: npm run build
      - run: aws s3 sync dist/ s3://mf-products-prod/ --delete

Avantages mesurés

Métrique	Monolith	Micro-Frontends
Deploy time	15 min	2 min
Rollback time	15 min	1 min
Team autonomy	Dépendante	Indépendante
Build time	8 min	2 min par module

Conclusion

Micro-frontends = autonomie d'équipe x déploiement indépendant. Commencez par extraire un module, pas tout d'un coup.