MicroFront End chez GLC

Il y a 4 ans …

En 2017, le site Lacentrale.fr est un monolithe à l’ancienne en Php, dans le cadre de refonte fonctionnelle nous avons souhaité pousser le principes de microservice côté Front. Cela faisait plus de 5 ans que le groupe avait mis en pratique les principes de microservice côté back, mais les frontaux restaient sur un monolithe.

Notre objectif et principe stratégique

Nous souhaitions à travers le principe de MicroFrontEnd implémenté par Mozart (nom donné à notre framework qui compose une page HTML avec plusieurs fragments) :

  • Augmenter la résilience des pages du site, jamais d’indisponibilité totale mais (seulement) partielle par fragment
  • Réaliser les features de bout en bout (back+front)
  • Eviter les couplages forts et des dépendances entre fragment (un fragment est une partie d’une page) : augmenter la résilience des sites et le défaut d’un fragment n’entraine pas le défaut de la page
  • Isoler le travail entre Feature Teams : permettre à plusieurs Feature Team de travailler sur une même page (eviter les dépendances inter-feature team, gestion de la base de donnée jusqu’à la l’interface)
  • Casser le monolithe lors de la construction de la page et de penser composant dès la conception du front
  • Gagner en time to market lors de la construction des pages
  • Composer des fragments venant de stack potentiellement avec des technos différentes (permettre ainsi une migration continue sans faire de big bang)

Nous sommes donc partis de la solution de Zalendo(https://www.mosaic9.org/) et apportés des ajustements par rapports à notre besoin. De la est né Mozart chez Groupe LaCentrale.

Principe des microfrontends

  • Etre agnostique de la technologie : Chaque équipe doit pouvoir choisir et mettre à jour sa stack sans avoir à se coordonner avec d’autres équipes.
  • Le code de chaque stack doit être isolé : pas de partage de runtime, les microservices sont buildés indépendamment et packagés de façon isolés. Pas da partage d’état ou de variable globale.
  • Le site est résilient : L’échec d’execution d’un fragment ne doit pas faire échouer les autres.

Concrètement comment ça marche ?

Mozart est un outil de composition front end basé sur l’assemblage de fragment HTML. Les fragments peuvent être issue de toutes stacks et quelques soit la technologie : statics snippets, statics from CDNs, micro front ends, legacy … 

Exemple ici avec la home de Lacentrale.fr, découpée en 7 fragments + 2 fragments techniques invisibles (head, tracking)

  • En fonction d’une url entrante, Mozart trouve le template associé puis le délivre en retour avec l’ensemble des fragments synchrones résolus, le résultat est donc 100% compatible SEO.
  • Le rendu final peut contenir à son tour des ressources privées liées à un fragment (css,js), pour lesquelles Mozart assurera le routage.
  • Le rendu final peut contenir des ressources publiques, servies classiquement par un cdn.
  • Le template permet de configurer chaque fragment indépendamment : timeout du fragments, les fallbacks urls en cas d’erreur, …

Pour résumer Mozart est l’assembleur de la page.

Best practices que nous avons notés au fil des réalisations :

  • Eviter le sur-découpage de fragments
  • Servir les statics CSS/JS via la façade fragment puis CDN si besoin
  • Gérer le cas aux limites (paramètres manquants, gestions des retours HTTP 4xx et 5xx, gestion du responsive en css/js uniquement )
  • Etre compatible SEO (pas de JS pour le contenu, Rewrite Apache)
  • Utiliser les librairies JS partagées pour réduire la taille globale de la page
  • Utiliser du cache (CloudFront basé sur la querty string)
  • Faire des tirs de performance sur les fragments (appel http avec Gatling par exemple) et sur la page complètement assemblée.

En terme de QOS

  • Temps de réponse < 120ms pour 95p
  • Uptime 99,9 % + MEPs sans downtime

Le suivi de la stack est fait via des alarmes Cloudwatch et Kibana

Retrospective 4 ans après :

Apres un peu plus de 4 ans de run, Mozart :

  • n’a subi aucune interruption de service connue
  • n’a eu de maintenance majeure : seulement quelques aspect au démarrage en 2018 et récemment un update d’image
  • encaisse les montées de charge et les attaques par DDOS

Les difficultés rencontrées :

  • des découpages trop micro qui ont complexifiées la page détail d’annonce de la Centrale, on apprend de nos erreurs en évitant ce type de decoupage sur les autres sites où on applique Mozart.
  • complexité de développer en local :
    • un outillage officiel a été mis en place pour le développement local
    • des archetypes de projet de type « fragment »
    • une ébauche pour passer en mode serverless

Le cout de montée en compétence en développement sur ce nouveau système (qui serait la même en choisissant n’importe quel autre framework), avec du recul je pense que c’est la montée en compétence sur serverless qui l’a induit et c’est en fonction des équipes et sur certaines problématiques on a géré directement au sein des features teams, plutôt que voir globalement. C’est ce que nous essayons de fixer notamment avec l’outillage du developpement en local pour Mozart. C’est un point que nous avions sous-estimé au départ.

Apres 4 ans on a souhaité rechallenger la solution en explorant les solutions du marché :

  • NextJS/Module Federation
  • Podium
  • Interface Framework (evolution de Zalando)
  • PuzzleJS

Nous n’avons pas trouvé d’outil qui change ou qui propose des améliorations notables par rapport à Mozart et changer d’outil engendrerait un coût important.

Les résultats de cette etude nous ont aidé à améliorer l’outillage en place et de prendre certaines notions implémentées dans les autres frameworks (bus client, …).

Glossaire :

Résilience : est la capacité d’un système ou d’une architecture à continuer de fonctionner en cas de panne d’un partie du système ou d’un autre système

Microservice : Stack fournissant un service métier léger et indépendant (STREAM et/ou une API RESTful JSON et/ou des fragments)

Fragment : Interface unitaire ou partie d’une page, généralement en Html + CSS + JS.

Micro-frontend : Microservice fournissant des fragments

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s