Architecture Micro Frontend: un guide de mise en œuvre pratique

Micro Frontend résolvent les défis de mise à l'échelle dans les grandes équipes en permettant un développement et un déploiement indépendants. 1) Choisissez une stratégie d'intégration: utilisez la fédération des modules dans WebPack 5 pour le chargement d'exécution et la véritable indépendance, l'intégration de build-temps pour des configurations simples ou les composants IFRAMES / Web pour une forte isolation. 2) Définir les limites de l'équipe par les domaines commerciaux, chaque équipe possédant une pile Micro Frontend, CI / CD et déploiement. 3) Répondre aux préoccupations croisées: partager les dépendances via le paramètre Singleton de la fédération module, appliquer un système de conception partagé, centraliser le routage de niveau supérieur dans l'application hôte et communiquer via des événements personnalisés ou des URL au lieu de l'état mondial. 4) Implémentation de DevOps indépendants: chaque équipe gère son repo, son pipeline et son suivi, tandis que l'hôte surveille la santé à distance et fournit des replies pour les échecs. 5) Adoptez de manière incrémentale en extrayant une page bien conçue dans un micro frontend autonome et en l'intégrant via la fédération des modules, puis répétez. Cette approche équilibre l'autonomie avec cohérence, ce qui rend le développement frontal évolutif pratique pour les grandes organisations.

Les micro fronts ne sont pas seulement un mot à la mode - ils sont une solution pratique pour mettre à l'échelle le développement du frontage dans les grandes équipes. L'idée est simple: casser un frontend monolithique en pièces plus petites et indépendantes, chacune appartenant à une équipe distincte. Mais comment implémentez-vous cela sans créer de chaos? Passons à une approche du monde réel.

Quel problème résolvons-nous?

Avant de sauter dans le code, comprenez les points de douleur:

• Builds et déploiements lents sur de grandes applications.
• Les goulots d'étranglement de l'équipe lorsque plusieurs équipes travaillent sur la même base de code.
• Le verrouillage de la pile technologique , où la mise à niveau ou l'expérimentation est risquée.
• Couplage de libération , où le bogue d'une équipe retarde tout le monde.

Micro Frontend aide en permettant l'autonomie de l'équipe , les déploiements indépendants et la diversité technologique .

Étape 1: Choisissez votre stratégie d'intégration

Il n'y a pas de taille unique. Voici les options les plus pratiques:

Option A: intégration de build-temps (simple mais limité)

Chaque micro frontend est construit séparément, puis combiné dans une application Shell au moment du déploiement.

• ✅ Facile à configurer avec l'outillage existant.
• ❌ Les équipes partagent toujours un pipeline de déploiement.
• ❌ Pas de véritable indépendance.

Idéal pour: des applications ou des équipes à petite échelle passant des monolithes.

Option B: Intégration d'exécution via la fédération des modules (WebPack 5)

Ceci change la donne. La Fédération des modules de WebPack 5 vous permet de charger JavaScript d'une application à une autre lors de l'exécution.

 // dans l'application hôte (conteneur)
Nouveau moduleFederationPlugin ({
  Nom: "conteneur",
  Remotes: {
    Tableau de bord: "Dashboard @ https: //dashboard-app.com/remoteentry.js",
    Profil: "Profil @ https: //profile-app.com/remoteentry.js",
  },
  partagé: ["react", "react-dom"],
});

 // dans l'application distante (micro frontend)
Nouveau moduleFederationPlugin ({
  Nom: "Dashboard",
  Nom de fichier: "RemoteEntry.js",
  Expose: {
    "./Dashboard": "./src/components/dashboard",
  },
  partagé: ["react", "react-dom"],
});

Maintenant, l'hôte peut charger dynamiquement les composants:

 import {paresseux, suspense} de "react";

Const Dashboard = Lazy (() => import ("Dashboard / Dashboard"));

Function App () {
  retour (
    <Suspense Fallback = "Loading ...">
      <Tableau de bord />
    </suspense>
  ));
}

✅ Véritable indépendance
✅ Différentes piles technologiques (tant qu'elles exposent des modules)
✅ Déploiements indépendants

Utilisez-le si vous utilisez WebPack 5 et souhaitez la flexibilité.

Option C: IFRAME ou composants Web (Isolement-First)

Lorsque vous avez besoin d'isolement fort (par exemple, la sécurité, les systèmes hérités):

• Iframes : sable complet mais pauvre UX (défilement, style, communication).
• Composants Web : prise en charge du navigateur natif, framework-agnostique, mais besoin de polyfills et de manipulation d'événements personnalisés.

Idéal pour: des environnements de haute sécurité ou l'intégration des applications non JS.

Étape 2: Définissez les limites de l'équipe claire

La propriété est importante. Chaque micro frontend doit mapper un domaine commercial , pas un composant d'interface utilisateur.

Exemples:

• orders@https://orders.company.com
• user-profile@https://profile.company.com
• analytics@https://analytics.company.com

Chaque équipe:

• Choisit leur pile (réagir, vue, angulaire, etc.)
• Possède leur pipeline CI / CD
• Publie leur point de terminaison remoteEntry.js

Évitez le chevauchement. Il n'y a pas deux équipes ne devraient posséder des parties de la même longueur d'onde, sauf découplés clairement.

Étape 3: Résoudre les préoccupations croisées

Même lorsque les applications sont divisées, les utilisateurs s'attendent à une expérience transparente.

1. Dépendances partagées

Utiliser shared dans la fédération des modules pour éviter la réaction en double, le lodash, etc.

 partagé: {
  react: {singleton: true, impatient: true},
  "react-dom": {singleton: true, impatient: true},
}

singleton: true garantit qu'une seule version charge - critique pour le contexte et les crochets React.

2. Styles globaux et système de conception

Ne laissez pas chaque équipe redéfinir les boutons.

• L'application hôte fournit des CS de base (polices, réinitialités, jetons).
• Publiez un package de système de conception partagé (par exemple, @company/ui ) via NPM ou CDN.
• Appliquer l'utilisation via des revues de liaison ou de relations publiques.

3. Route

L'application hôte doit contrôler le routage.

 // application de conteneur
<Route Path = "/ Dashboard" Element = {<Dashboard />} />
<Route Path = "/ Profil" élément = {<profil />} />

Chaque micro frontend gère ses itinéraires internes (par exemple, /profile/settings ), mais le shell gère la navigation de haut niveau.

4. État et communication

Évitez l'état mondial partagé. Plutôt:

• Utilisez des URL et des paramètres de requête pour transmettre des données.
• Utilisez des événements personnalisés pour une communication légère:

 // de Micro Frontend
Window.DispatchEvent (new Customevent ("User-Login", {Detail: User}));

// dans l'hôte ou une autre application
window.addeventListener ("utilisateur-login", (e) => console.log (e.detail));

Pour des cas complexes, considérez un bus de message léger ou un contexte passé via des accessoires.

Étape 4: DevOps et observabilité

Les applications indépendantes signifient des pipelines indépendants.

✅ Chaque équipe a:

• Leur propre réprimande
• CI / CD (actions GitHub, Jenkins, etc.)
• Environnement de mise en scène
• Surveillance (Sentry, LoGrocket, etc.)

✅ Moniteurs d'application hôte:

• Santé des entrées à distance
• UIS de secours si un micro frontend ne charge pas

Exemple de limite d'erreur:

 classe RemoteFallback étend React.
  state = {Haserror: false};

  statique GetderivedStateFromError () {
    return {Haserror: true};
  }

  rendre() {
    if (this.state.haserror) {
      return <div> Le tableau de bord est temporairement indisponible. </div>;
    }
    Renvoyez ceci.props.children;
  }
}

Étape 5: Adoption incrémentielle

Vous n'avez pas besoin de tout réécrire.

Commencez par:

1. Identification d'une page bien conçue (par exemple, «paramètres» ou «rapports»).
2. L'extrait dans une application autonome avec la fédération de module.
3. Le charger dans l'application principale en tant que télécommande.
4. Répéter.

De cette façon, vous prouvez la valeur tôt et réduisez les risques.

Réflexions finales

Les micro fronts ne sont pas gratuits. Vous échangez une simplicité pour l'évolutivité.

Ils ont du sens quand:

• Vous avez plusieurs équipes
• Vous déployez souvent
• Vous voulez expérimenter avec des piles technologiques
• Votre frontend est devenu un goulot d'étranglement

Mais si vous êtes une petite équipe, un monolithe bien structuré pourrait encore être meilleur.

Avec la Fédération des modules de WebPack 5, l'outillage est désormais suffisamment mature pour rendre les micro frondendes pratiques - non seulement théoriques.

Fondamentalement: démarrez les petites interfaces standardisantes et automatisant tout.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!