#103 🚀 Migration architecture microfrontend & Concept d'idempotence des APIs

Wednesday 16 april 2025 à 17:00

Rejoignez-nous à l'INSA Lyon le 16 avril pour notre 103ᵉ meetup ! 🎉

Pour la première fois, un événement LyonJS est sponsorisé par Fulll, une véritable pépite logicielle née de la fusion de trois éditeurs, au service des experts-comptables. ✨

Et ce n’est pas tout ! Nous avons également la chance d’être accueillis par l’INSA Lyon, ce qui nous permettra de vous recevoir dans d'excellentes conditions. Un immense merci à eux ! 🙌

📍Insa Télécommunication, Bâtiment Hedy Lamarr, 6 Av. des Arts, 69100 Villeurbanne

🆓 L'événement est gratuit ! ✍️ Pensez à vous inscrire ici !

📣 TALK 1 / Refondre sans tout casser : notre migration vers une architecture microfrontend

Chez Fulll, notre stack front repose sur plus de 20 applications React autonomes, réparties par sous-domaines. Ce découpage favorisait l’isolation et l’ownership organisationnel, mais posait deux problèmes majeurs :

• UX : une navigation transverse frustrante pour les utilisateurs, avec perte du layout et des contextes partagés ;
• DX : un enfer de dépendances transverses à maintenir à jour dans chaque app.

Une nouvelle architecture

Nous avons repensé notre architecture en adoptant une approche microfrontend basée sur des Web Components, avec un Shell central et des Remotes chargées dynamiquement au runtime.

Ce que vous découvrirez dans ce talk

• Ce qui se cache derrière ce buzzword microfrontend ;
• Pourquoi pas de Module Federation ?
• Les motivations techniques et fonctionnelles derrière cette refonte ;
• Comment nous avons migré progressivement nos apps avec un minimum de disruption (double run, stratégie de transition) ;
• Nos choix d’outillage : Vite, Shadow DOM, custom events, librairies maison pour la communication inter-app ;
• Les galères rencontrées : fonts, librairies tierces, styles, contraintes du Shadow DOM via les dépendances ;
• Les leçons tirées de cette aventure.

Avantages

• Possibilité d’utiliser des technos différentes au sein d’une même interface (React, Vue, …) ;
• Architecture permettant l’isolation des fonctionnalités et des produits.

Inconvénients

• Communauté faible et peu de ressources ;
• Le Shadow DOM reste un concept assez complexe à maîtriser, surtout sans pratique.

💡Spoiler : on a encore du chemin, mais la navigation est déjà bien plus fluide — et notre DX a clairement gagné en sérénité ! ✨

Nicolas Lefebvre & Maël Martin

📣 TALK 2 / Rendre ses API idempotentes avec NestJS

Il y a un concept fréquemment ignoré des développeurs quand ils architecturent leurs API : l'idempotence ! Le principe : si une requête est exécutée plusieurs fois, elle aura toujours le même effet. Par exemple, une commande ne sera créée qu'une seule fois, même si la requête est appelée en boucle.

C'est vraiment utile ? Oui ! Parce qu'en cas d'erreur de réseau, de proxy, de système, etc… on peut réessayer la requête sans inquiétude, la commande ne sera pas créée plusieurs fois.

Ce talk aborde ce concept dans sa théorie mais présente aussi un cas pratique. Vous pourrez voir une codebase NestJS évoluer en live pour qu'elle devienne réellement indempotent. Vous n'utilisez pas NestJS ? C'est pas grave, ce framework n'est qu'un support de présentation, ici on va tous parler le même langage, ou plutôt le même protocole : HTTP !

Johann Pardanaud

🍻 Et, bien évidemment, on se retrouvera à la fin des présentations pour un apéro offert par notre sponsor fulll ! 🥰🎁