Architecture micro frontend et web perf

Qu’est-ce que l’architecture micro frontend ?

L’architecture micro frontend, à l’instar du micro-service pour le backend, est un ensemble d’applications indépendantes plus petites et cohabitant sur le même domaine. Cette architecture se place en opposition à l’architecture dite « monolithe » qui abordait le frontend comme un tout en une grosse application uniforme.

Le micro front est composé de fragments :

• qui sont indépendants,
• qui gèrent leurs propres datas,
• qui chargent leurs propres js/css.

Cette architecture est utilisée dans des grands groupes comme Amazon, Leroy Merlin ou encore Ikea.

Quels sont les principaux avantages de l'architecture micro frontend ?

Le principal intérêt est organisationnel, car le versioning est facile à maintenir, cloisonné à de petites équipes opérationnelles et indépendantes. Chaque équipe devient experte de son périmètre et peut déployer facilement sa solution de manière autonome, accélérant ainsi la livraison des fonctionnalités. Plus besoin d’attendre 6 mois pour mettre en production une mise à jour parce qu'elle impacte d’autres services...

Un autre avantage du micro frontend réside dans la facilité de maintenance, car même si c’est une architecture qui demande beaucoup de travail pour être implémentée, sur son temps de vie la maintenance est réduite. Couplé à de grosses actions marketing cela permet de déployer plus vite que les concurrents et ainsi augmenter son chiffre d’affaires.

Et la performance dans tout ça ?

Déployer une architecture micro frontend permettra d’aller chercher de l’excellence dans des « détails » tels que la web perf ou l’accessibilité, ce que d’autres architectures ne permettront pas ou de façon moins aisée.

Disposer d'éléments séparés permet de les monitorer plus facilement, de connaitre leurs performances et leur "état de santé" mais aussi de gérer les erreurs. Par exemple, si l'API du footer ne répond pas ou que son chargement est trop long, on ne l'affiche pas et l'utilisateur a quand même accès à la page pour acheter son produit​. Cela permet d’augmenter facilement le taux de résilience du site et le rendre le plus fiable possible.

Enfin, grâce à cette architecture, on peut charger les différents modules de manière parallèle pour accélérer le temps de chargement global de la page. Les ressources statiques de chaque micro front peuvent également être mises en cache indépendamment.

Comment et pourquoi déployer ?

En couplant le développement des micro fronts à une CI/CD, on accélère les temps de déploiement. En cas d'anomalie, il est possible de revenir facilement à la version précédente.

L'architecture micro frontend présente cependant quelques inconvénients :

• multiplication des ressources
• pas de partage de données entre les fragments
• multiplication des appels API

Attention à ne pas systématiquement recourir aux micro frontends car le ROI d’un tel processus est difficile à gérer. Sur des projets de grosses plateformes le contexte peut s’y prêter, mais pour des entreprises de taille plus modeste il ne faut pas oublier que cette façon de travailler a un gros coût de départ et sera plus difficile à rentabiliser.

Avoir conscience de ces points d'attention permet de les contourner au moment de la conception initiale. La préparation de l'architecture d'une application ou d'un site web basés sur des composants micro frontend demande plus de vigilance pour ne pas tomber dans les pièges éventuels.

 

Vous rencontrez des difficultés à voir aboutir vos projets digitaux ? Goweb possède une expérience solide en agilité pour vous accompagner. Contactez-nous !