Concepts des micro-frontends et compromis

Les micro-interfaces étendent le principe des microservices à la couche d’interface utilisateur. Une application web unique est divisée en éléments d’interface dont la propriété, le développement et le déploiement sont indépendants, chaque élément étant géré par une équipe distincte.

Il existe trois grandes stratégies d’intégration : à la compilation (packages npm), côté serveur (composition en périphérie) et à l’exécution (Module Federation, cadres intégrés et composants web).

Publiez les composants partagés sous forme de packages npm. C’est simple, mais toute modification nécessite une nouvelle publication et le redéploiement de tous les consommateurs : il ne s’agit donc pas d’un déploiement véritablement indépendant.

Webpack 5 Module Federation permet à une application (l’hôte) de charger à l’exécution des composants provenant d’une autre application (le module distant) : le déploiement est véritablement indépendant.

Intégrez les micro-interfaces dans des cadres intégrés pour une isolation maximale. Avantages : aucun conflit CSS/JS. Inconvénients : expérience utilisateur médiocre (défilement, focus, dimensionnement), partage de l’état difficile et mauvais référencement.

Encapsulez chaque micro-interface dans un élément personnalisé. Cette approche fonctionne avec n’importe quel framework et fournit une isolation native, mais elle ne propose pas les fonctionnalités propres à React, comme le partage du contexte.

Déploiement indépendant (déployer l’interface d’une équipe sans toucher aux autres), autonomie des équipes (choisir sa propre pile et ses dépendances) et évolutivité (les équipes travaillent en parallèle sans conflits de code).

Complexité opérationnelle (davantage de dépôts, de chaînes d’intégration continue et de déploiements), duplication des paquets (React est chargé plusieurs fois sans partage), coût en performances et débogage plus difficile entre les différentes limites.

Les micro-interfaces sont particulièrement utiles lorsque plusieurs grandes équipes travaillent sur le même produit, lorsque différentes piles technologiques sont nécessaires selon les sections, ou lorsque vous devez déployer des sections complètement indépendamment.

Évitez-les pour les petites équipes (la surcharge dépasse les avantages), les applications simples ou lorsque vous contrôlez l’ensemble de l’interface : les monodépôts avec Nx/Turborepo suffisent généralement.

Quelle que soit la stratégie d’intégration, un système de conception partagé (publié sous forme de package ou exposé via Module Federation) garantit la cohérence visuelle entre les micro-interfaces.

Quelle approche d’intégration permet le déploiement véritablement indépendant des micro-interfaces à l’exécution ?

Les micro-interfaces décomposent l’interface utilisateur pour favoriser l’autonomie des équipes et le déploiement indépendant. Les options d’intégration vont des packages npm (simples, mais non indépendants) à Module Federation (à l’exécution et véritablement indépendant). Évaluez les coûts opérationnels : les micro-interfaces conviennent aux produits gérés par de grandes équipes multiples, mais ajoutent de la complexité aux projets plus petits.