Les applications web deviennent de plus en plus sophistiquées, et pour relever ce défi, les développeurs recherchent constamment de nouveaux modèles architecturaux. L'une de ces approches est l'utilisation de micro-frontends, qui vise à décomposer une couche front monolithique en éléments plus petits et plus faciles à gérer.
Cet article aborde le concept des micro-frontends, les avantages de l'utilisation de cette architecture et fournit un exemple concret d'une mise en œuvre réussie.
Il est tiré d'une vidéo disponible sur Youtube et réalisée par Luca Mezzalira durant la QCon.
Micro-frontends : Les bases
Les micro-frontends sont une représentation d'un sous-domaine métier, permettant une mise en œuvre indépendante avec des technologies homogènes ou hétérogènes. Les micro-frontends évitent de partager la logique et sont la propriété d'une seule équipe. Ces micro-applications plus petites et indépendantes fonctionnent ensemble pour créer une application plus grande et plus complexe.
L'idée est d'appliquer les mêmes principes que les micro-services au front-end, ce qui permet aux équipes de travailler de manière indépendante, de faire évoluer l'application plus rapidement et de réduire la complexité globale du système.
Il existe trois façons de composer des micro-frontends : la composition côté client, la composition côté serveur et la composition à la volée. Chaque méthode a ses avantages et ses inconvénients, qu'il s'agisse de l'expérience des développeurs ou de l'évolutivité. Le routage et la communication entre les micro-frontends sont d'autres aspects critiques à prendre en compte, avec différentes options disponibles pour chacun d'entre eux.
1. Composition côté client :
Dans la composition côté client, les micro-frontends sont chargés et composés dans le navigateur de l'utilisateur, généralement à l'aide de JavaScript. L'application principale (également appelée "conteneur" ou "shell") est chargée de récupérer et d'intégrer les micro-frontends individuels, qui sont généralement servis en tant qu'ensembles distincts. Cette approche permet une plus grande flexibilité et un meilleur contrôle de l'expérience de l'utilisateur, ainsi que la possibilité d'un chargement lazy et d'un fractionnement du code.
Avantages :
- Flexibilité dans la composition et la mise à jour des micro-frontends qui peut se faire de manière indépendante.
- Le lazy loading et le fractionnement du code peuvent être exploités pour améliorer les performances.
- Il est plus facile d'effectuer de l'A/B testing et de basculer d'une fonctionnalité à l'autre.
Défis :
- Complexité accrue dans la gestion de la communication entre les micro-frontends.
- Temps de latence potentiellement plus élevé en raison de l'extraction de plusieurs composants à partir de diverses sources.
- Le recours à JavaScript peut avoir un impact sur le référencement et les performances de chargement initial.
2. Composition côté serveur :
Dans la composition côté serveur, les micro-frontends sont composées coté serveur avant d'être envoyées au client. Cela peut se faire par le biais d'un rendu côté serveur (SSR), où chaque micro-frontend est rendu en HTML, ou par l'assemblage des micro-frontends en un seul document HTML. Le serveur est responsable de l'extraction, de la composition et de la livraison de l'application complète au client, qui peut ensuite être améliorée avec du JavaScript côté client.
Avantages :
- Meilleures performances de chargement initial et de référencement grâce à l'HTML rendu par le serveur.
- Communication simplifiée entre les micro-frontaux puisqu'ils sont servis ensemble.
- Possibilité d'améliorer la mise en cache et de réduire la latence du réseau.
Défis :
- Moins de flexibilité dans la composition et la mise à jour des micro-fronts de manière indépendante.
- Augmentation de la complexité et de la charge sur le serveur.
- Peut nécessiter des ressources et une infrastructure de serveur supplémentaires.
3. Composition à la volée :
La composition à la volée implique la composition de micro-frontaux au niveau du réseau de diffusion de contenu (CDN). Cette approche s'appuie sur les technologies telles que les fonctions lambda, pour rechercher et composer des micro-frontends plus proches de l'utilisateur, réduisant ainsi le temps de latence du réseau. Cela peut se traduire par une amélioration des performances en permettant une mise en cache plus efficace et une livraison plus rapide de l'application composée.
Avantages :
- Réduction de la latence du réseau et amélioration des performances grâce à l'informatique en périphérie.
- Efficacité accrue de la mise en cache au niveau du CDN.
- Décharge le serveur d'origine de la charge de composition.
Défis :
- Complexité de la gestion de l'infrastructure et des configurations.
- Risque de verrouillage avec des fournisseurs de CDN spécifiques qui proposent les lambdas d'assemblage.
- Moins de contrôle sur le processus de composition par rapport aux approches côté serveur et côté client.
Chacune de ces approches a ses avantages et le choix dépend de facteurs tels que les exigences de performance, l'expertise de l'équipe et les contraintes d'infrastructure. Il est important d'examiner attentivement votre cas d'utilisation spécifique et les exigences de votre projet lors de la sélection d'une approche pour la composition de micro-frontends.
Avantages des micro-frontends
L'adoption d'une architecture micro-frontend présente plusieurs avantages :
1. Développement et déploiement indépendants : Les équipes peuvent travailler sur des micro-frontends individuels sans affecter les autres parties de l'application, ce qui augmente l'efficacité et permet un déploiement plus rapide de nouvelles fonctionnalités.
2. Évolutivité : Les micro-frontends peuvent scaler et être maintenus au fur et à mesure que l'application se développe, sans que cela n'ait d'incidence sur l'ensemble du système.
3. Amélioration de l'expérience des développeurs : Grâce à une séparation claire des tâches à réaliser, les développeurs peuvent se concentrer sur un domaine et utiliser les meilleurs outils et technologies pour leur micro-frontend.
4. Flexibilité : Les micro-frontends permettent aux équipes de choisir la meilleure pile technologique pour leur cas d'utilisation, ce qui permet d'expérimenter et d'innover sans affecter l'ensemble de l'application.
Un exemple concret : DAZN
DAZN est une plateforme VOD (video on demand) similaire à Netflix qui se concentre sur les sports en live. DAZN a mis en œuvre des micro-frontends en utilisant l'approche de composition côté client, en s'appuyant sur une application bootstrap pour charger et orchestrer les micro-frontends. Cette approche permet d'améliorer les performances, la maintenabilité et la flexibilité dans le développement de l'application.
Les principaux enseignements tirés de la mise en œuvre des micro-frontends chez DAZN sont les suivants :
1. Construire l'architecture : Déterminer comment composer, orchestrer et communiquer entre les micro-frontends.
2. Investir dans l'automatisation et l'observabilité : L'automatisation garantit un processus de développement harmonieux, tandis que l'observabilité permet une surveillance proactive et la résolution des problèmes. L'absence d'observabilité est plus une approche "quick and dirty" qu'une approche pour la scalabilité.
3. Donner la priorité à la duplication plutôt qu'à l'abstraction : Il est parfois préférable de dupliquer le code plutôt que de créer des abstractions complexes, en particulier lorsqu'il s'agit d'équipes importantes et de développement distribué.
4. Être agnostique sur le plan technologique : Les micro-frontends doivent être suffisamment flexibles pour permettre différents choix technologiques, en fonction des besoins du projet et des particularités de l'équipe.
5. Tenir compte de l'impact sur l'équipe : Les décisions relatives à la mise en œuvre d'un micro-frontend doivent tenir compte de l'impact social sur l'équipe de développement et de la manière dont cela peut affecter la communication et la collaboration. Il y a une vraie organisation à mettre en place et un véritable changement de culture. Le passage aux micro-frontends n'est pas qu'un sujet technologique.
So ?
Les micro-frontends offrent une approche pour gérer le côté scalable du développement front. Cette approche permet de décomposer le front-end en éléments petits et faciles à gérer.
En permettant aux équipes de développement de travailler de manière indépendante, d'évoluer plus rapidement et de réduire la complexité de leurs applications, les micro-frontends peuvent offrir de vrais plus pour innover.
Liens externes : Vidéo de Luca Mezzalira
