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 !

Nous avons créé  il y a un an un nouveau concept : les ORDRES à l’instar des Ordres Jedi.

J’ai trouvé un début de definition assez intéressante : l’Ordre Jedi était une ancienne communauté guidée par sa croyance et son observation de la Force et notamment de son côté lumineux. Pour les puristes je vous laisse faire un google pour une définition plus complète, quant à moi je vous donne la définition que nous, chez Groupe La Centrale, nous avons donné :

Un ordre est un sujet/projet transverse qui permet de réunir et constituer une équipe pluridiciplinaire pour travailler ensemble. Je vous fais un feedback sur ce nouveau process.

Qui : il concerne tout le monde des métiers Produit, IT ou marketing :

• Direction technique : Développeurs, Scrum master, Manager, Ops, Architecte, CTO
• Direction Produit : PO, UX/UI Designers…
• Direction marketing communication
• Direction marketing Btb
• Analytics
• SEO
• COO
• CPO

Quand

• On alloue une journée par semaine à chaque personne pour travailler sur son sujet
• Elle choisit sa journée mais en pratique c’est plus facile à gérer quand tout le monde a le même jour : ex le vendredi est officiellement la journée ordre pour ceux qui participent à un ordre
• La personne s’organise comme elle souhaite sachant qu’idéalement un weekly meeting est conseillé.
• 1 fois par mois un comité est mis en place pour donner l’avis sur les ordres proposés et actifs

Quoi

• Tout sujet transverse
• Nouveaux sujets innovants
• Les POC que l’on voudrait lancer (tiens si on teste AWS Timestream avec l’ordre Annonces)
• Un sujet technique
• Une façon de faire (comment je dois monitorer mon application)

Comment

• 1. Je crée un jira dans une file Projet
• 2. Je constitue mon equipe (je « vends » mon projet et je recrute les gens) : il faut le JEDI (oui comme dans StarWars, le plus fort quoi ou plutôt celui qui porte le sujet) , les membres de son equipe et un facilitateur (un manager IT pour aider et faire un sorte d’assurer le bon fonctionnement et de solutionner les points de blocage)
• 3. Je soumets mon idée à un comité pluridiciplinaire (Dev, architecte, Po, Manager …) avec les objectifs attendus dans un délai de 3 mois
• 4. Une fois le projet validé, tous les mois je fais un update auprès de ce comité d’ORDRES pour présenter les avancements
• 5. On valide chaque mois auprès de ce comité si on continue le sujet ou bien on arrête

Les questions qu’on a eu :

• En fait c’est pour faire les projets qui ne sont pas priorisés dans notre RoadMap?
• Ce sont les projets techniques de FE (François Emmanuel PIACENTINI le CTO) ?
• Ce sont les projets fonctionnels de Jérôme ? (Jérome PONSIN le COO)
• Je suis obligé de participer ? J’ai déjà les sujets de ma feature-team.

Exemples de sujets que nous avons eu :

• Feature Flipping 
• L’ordre JIRA (qui nous permet d’uniformiser nos boards/workflow) 
• Redesign d’une salle de réunion sans fenêtre qui a été désertée par tout le monde (qui d’ailleurs est devenue une des salles les plus prisées pour les réunions après le redesign)

Resultat de l’ordre du redesign de la salle Caroussel 2.0 :

• Storybook (mise en place chez GLC sur l’ensemble de nos sites)

Feedback

Effectivement nous avons eu plusieurs problématique et je vous indique ici comment nous les avons solutionnées

• La participation : « Je suis obligé de participer ? J’ai déjà les sujets de ma feature-team »
  • Expliquer l’intérêt de participer à un ordre (donner du sens) : on contribue à un projet transverse qui nous impacte, qui impacte notre feature team. Soit tu fais partie de ceux qui vont poser les normes, les standards en participant à l’ordre, soit tu vas « juste » les appliquer par la suite lorsque ce sera fait et donc on te donne l’opportunité de donner ton avis et de construire la base qui sert pour tous. Ex : Ordre Yeoman GLC ( définit un ensemble d’artefact prêt à être utilisé pour l’init d’un projet, en gros te simplifier la vie quoi !) et ça devient une norme chez GLC
  • Ça te permet de voir un sujet que tu n’aurais peut-être pas fait car tu n’as pas de connaissance sur le sujet ex : un sujet de Machine learning alors que je suis un developpeur Web
• Le temps «J’ai pas le temps, j’ai piscine »
  • On te donne le temps : tu crées les Jiras dans ton equipe et lors de la priorisation d’un sprint : il sera dans l’itération (bon la j’avoue que ce n’est pas aussi fluide car au sprint planning il n’y pas l’US et arrivé le vendredi la personne indique qu’il va faire de l’ordre et forcément le PO et le manager demandent mais où est le jira ???? ). Oui cela demande l’organisation ! C’est la qu’intervient le facilitateur et le JEDI !
  • Je ne vous cache pas que sur certains sujets primordiaux j’ai mis des « volontaires » de mes différentes equipes et je leur ai expliqué l’importance de leur participation pour leur feature team.

• L’avancement : les tickets sont là, mais parfois non priorisés ou n’avancent pas. C’est là qu’intervient le facilitateur pour voir les points de blocages de manière transverse et aider cette equipe d’ordre. Certains ordres avancent sans la présence obligatoire du facilitateur, c’est le JEDI qui le sollicite en cas de besoin.

Voici un KPI sur les 41 projets que nous avons eu : (oui tout n’est pas accepté ! on a eu 5 projets refusés, des idées qui sont restées à l’ordre de proposition et 22 projets en PROD)

Next step :  les projets transverses c’est bien mais on en fait quoi ?

C’est notre next step une fois le projet réalisé et en production, une Feature team récupère la stack et donc du maintien et des évolutions. Cette partie n’est pas encore rodée car les projets restent dans l’état de cloture. Il nous reste donc à continuer à les faire évoluer.