# 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 ```typescript // 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) ```typescript // 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

; } export default function Shell() { return (

); } ``` ## Module Micro-Frontend ```typescript // 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 ```typescript // É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 ```yaml # 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.