Micro-frontends et dérive du système de conception : maintenir la cohérence de l'interface utilisateur entre les équipes
Comment les équipes utilisant des micro-frontends conservent une interface utilisateur cohérente : jetons et composants partagés sous forme de packages versionnés, isolation CSS, politiques de mise à niveau et contrôles de régression visuelle.
À retenir
Les micro-frontends permettent aux équipes de déployer des parties d'un produit de manière indépendante, ce qui rend probable une dérive de l'interface utilisateur : différentes versions de composants, CSS contradictoires et styles dupliqués. Maintenez la cohérence en partageant les jetons et les composants de conception sous forme de packages versionnés, en isolant le CSS de chaque équipe, en convenant d'une politique de mise à niveau et en détectant les différences grâce à des tests de régression visuelle.
Pourquoi la dérive se produit
Le site de Martin Fowler décrit les micro-frontends comme des applications frontales livrables indépendamment et composées en un tout plus vaste, avec un déploiement indépendant comme avantage clé. La même indépendance provoque une dérive : les équipes mettent à niveau le système de conception à des moments différents, copient les composants pour se déplacer plus rapidement et écrivent CSS qui s'infiltre dans d'autres parties de la page. L'article prévient également que certaines implémentations dupliquent les dépendances et que CSS, étant global et en cascade, nécessite une isolation délibérée.
Partager le système sous forme de packages
Publiez les jetons et les composants sous forme de packages versionnés, et non de code copié-collé. Les jetons dans un format standard, tel que le format W3C DTCG, peuvent être créés pour chaque framework utilisé par une équipe, de sorte qu'une équipe React et une équipe Vue partagent toujours les mêmes couleurs, espacement et mouvement.
Isoler CSS
Empêchez les fuites de styles entre les équipes grâce à une approche cohérente : conventions de dénomination telles que BEM, modules CSS, CSS-in-JS ou Shadow DOM pour les composants Web. Choisissez une convention pour l'ensemble du produit et peluchez-la.
Une politique de mise à niveau
Convenez du retard qu'une équipe peut prendre, par exemple pas plus d'une version majeure, et utilisez le versioning sémantique pour que les équipes sachent quand les changements sont interrompus. Suivez la version utilisée par chaque micro-frontend dans un tableau de bord partagé.
Attraper automatiquement la dérive
Les tests de régression visuelle sur les écrans clés, les règles de charpie interdisant les valeurs brutes de couleur et d'espacement et les révisions de conception sur les surfaces partagées (en-têtes, navigation, paiement) détectent les incohérences avant que les utilisateurs ne les voient.
Principes clés à retenir
- Le déploiement indépendant rend probable la dérive de l'interface utilisateur
- Partager des jetons et des composants sous forme de packages versionnés
- Isolez CSS avec une approche cohérente
- Acceptez une politique de mise à niveau et suivez les versions
- Utiliser des tests de régression visuelle et des règles de charpie
Questions fréquentes
Sources
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org