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

I wanted to share here my impressions and feedback about AgileEnSeine. It is just a sum up of my key takeaways from this event.

A few words about why I attended to this event :

I’m always passionate about the agile methods and it’s been three years that I’ve prioritized AWS technical events over agile ones.

Honestly it is really very interesting to go out your head from your daily environment et and look around, it is inspiring, it gives you some ideas and sometimes let’s be honest comforting on your organization.

I’m just going to just talk about a few conferences/workshop I’ve attended

On the first day after the inspiring keynote given by Isaac Getz, i went to a workshop/Serious Game about the prioritization animated by Moïra Degroote. She promotes a system driven by value.

She is really focusing on the value, and to make people realize that the value is more important that give an accurate estimation.

So we started the workshop with a first estimation of the effort and then by the value. She gave us different kinds of estimation : tee-shirt size, ski slope… and she put the focus on the cognitive bias we use during the estimation. We are « programmed » to put an accurate value on tasks where the meaning/value is no longer in the discussion. Her advice is to give more place to the collaboration between business and the development team, and not only be focused on an accurate estimation.

She is energetic and knows to make her audience questioning oneself! She also reminded us what’s matter for our client via the model Kano.

As a manager, I just can’t tell to the product team that we can’t estimate a task, we need to planify the projects and their delivery. But we need to collaborate more and design the product together with the business. She reminded us what is really matter.

The second conference I found interesting was the one talking about the solution focus method animated by Natixis (Jean-Marie Froux Pascal Merin). They gave an insight of being solution focus by a simple way of questioning your team. « Imagine… »

We had an example of a failed delivery, and in the first scene we had a conversation between the project manager and his manager, the project manager enumerated all the things that went wrong, and gave the justification on why things went wrong.

On the second part, the manager just ask :  » Imagine that delivery went well, what would be the situation, the consequences… ». Then we focus on the resources we had already, what we want, what’s working already etc….

It is just a way of thinking and change the mindset.

With this method we don’t focus on the root cause, but we explore in detail the things we want to have and the resources/skills we already have and can use.

Obviously it is not a new approach but the way they presented in this conference was really interesting and I need to keep it in mind every day.

The last one a really enjoyed was the one with Eduardo Alvim. To be honest I’am not a big fan of Safe. But his both talk was really interesting. He talked about the KPI in safe in a first session and in a second one, he shared about all the anti-pattern we shouldn’t use if we go through Safe.

Eduardo is the storyteller, he knows via some simple story how to keep his audience captivated on key topics.

I’m not going to put here all his recommendations and his inputs, but there are pretty obvious :

Have a system thinking perspective to define the metrics

Identify the most appropriate metrics to our context

Generate date, make interpretations and use to improve our system

…

To conclude, these three days were really interesting and would be useful !