SlideShare une entreprise Scribd logo
.1
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Le micro-frontend
décomplexé : les dessous
d’une migration
incrémentale et itérative
.2
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
.3
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Qui sommes-nous ?
Xavier JULIEN
Head of Web Front
@Invivo Digital Factory
Brandone MARTINS
Lead Micro-frontend
@OCTO
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
.4
Le groupe et sa Digital Factory
Favoriser la transition agricole et alimentaire vers un agrosystème résilient
Agriculture - Négoce international - Agroalimentaire - Retail
Fondé en 2018
-
3 plateformes : B2B - B2C - Data/IA
.5
01
Posons le contexte !
.6
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
D’où l’on vient … (avant 2023)
● Single Page Application en VueJS débutée en 2018
● Conçue par plus de 100 contributeurs techniques
● Permettant de construire un site e-commerce
● Adressant 2 persona du monde B2B agricole :
○ les agriculteurs
○ leur technico-commerciaux
.7
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
… où on en était … (en 2023)
.8
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
… où l’on va ? (pour 2024 et après)
Transformer
un site en
plateforme
Pouvoir faire
de la marque
blanche
Ajouter de
nouveaux
périmètres
Gagner en
sérénité sur le
frontend
Travailler avec
un nombre d’
équipes
variables
.9
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Qu’est-ce qu’y nous a forcé à repenser notre architecture ?
La migration technique d’une version majeure du framework front
Fin du support de Vue2 (EOL) au 31 décembre 2024
2 3
.10
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
L’architecture au moment de la migration
Frontend
Backend
Bases de
données &
systèmes tiers
Application Web Monolithique
Application Layer - Back for Front
Microservice
Produit
Microservice
Offre
Microservice
Panier
Content
Management
System (CMS)
.11
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Passer sur Micro-frontend, c’est aller vers ça
Frontend
Backend
Bases de
données &
systèmes tiers
Microservice
Produit
Microservice
Offre
Microservice
Panier
Content
Management
System (CMS)
Micro-frontend
Produit
Micro-frontend
Offre
Micro-frontend
Panier
Micro-frontend
Marketing
Frontend - App Shell
Application Layer - Back for Front
.12
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2025
-
All
rights
reserved
Implémentation d’un domaine métier
1.
2.
3.
Standards et technologies utiles
au domaine et sans contraintes
Déployable indépendamment
des autres micro-frontend
.13
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Et chaque équipe devient autonome de bout en bout
Frontend
Backend
Bases de
données &
systèmes tiers
Microservice
Produit
Microservice
Offre
Microservice
Panier
Content
Management
System (CMS)
Micro-frontend
Produit
Micro-frontend
Offre
Micro-frontend
Panier
Micro-frontend
Marketing
Frontend - App Shell
Application Layer - Back for Front
Team
Produit
Team
Panier
Team
Marketing
Team
Offre
.14
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Comment découpe t-on un site e-commerce ?
Mon Compte
Page d’accueil
Articles
Commandes
Inscriptions
Tunnel de vente
Pages produit
Recherche et
Catégories
Légales
Panier
- 2 possibilités
- Découpage vertical : une page = un micro-frontend
- Découpage horizontal : une page = composition de micro-frontend
La manière de découper peut influencer vos choix techniques par la suite.
- Le micro c’est bien, le macro c’est plus réaliste (pour débuter)
.15
02
Comment mettre ça en place ?
.16
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Sur quoi pourrait t-on s’appuyer pour faire du micro-frontend ?
Qui a gagné selon vous ?
iFrame Module Federation
Routing Server
.17
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Conclusion des Proof Of Concept
Une conception en
Single Page Application
est incompatible avec un
Routing Server
sans changer le mode de
déploiement du projet
Le monolithe Vue2 est écrit en
CommonJS (CJS) et
l’utilisation de la
Module Federation
nécessite l’utilisation
d’ESModule (ESM)
��🏻
��🏻♂
Permet de travailler en
isolation, est nativement
supporté par tous les
navigateurs et éprouvé depuis
des décennies
iFrame Module Federation
Routing Server
.18
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Monolith
La roadmap
Novembre 2023
2
.19
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Monolith
La roadmap
Décembre 2023
Légales
3
2
.20
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Monolith
La roadmap
Septembre 2024
Légales
…
Mon Compte
Landing
Panier
Au total, 11 micro-frontends
2 3
3
3
3
3
.21
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Monolith
La roadmap
Novembre 2024
Légales
…
Mon Compte
Landing
Panier
3 3
3
3
3
3
Produit
Recherche
Home
Header / Footer
.22
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
App Shell
La roadmap
Décembre 2024
Légales
…
Mon Compte
Landing
Panier
3 3
3
3
3
3
Produit
Recherche
Home
Header / Footer
.23
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2025
-
All
rights
reserved
Porter l’outillage qui résout les problématiques cross-micro-frontend
À quoi sert une app-shell ?
Fonctionnalités de support (Monitoring &
Analytics)
02.
Chargement de micro-frontend, routing
et communication
03.
Gestion de l’état partagé (par exemple,
l’authentification)
01.
.24
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
App
Shell
MFE
Panier
(vertical)
MFE
Compte
(horizontal)
.25
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved Envoi à
Google
Analytics
Création de
commande
(Appel API
HTTPS)
Reception
orderID
Demande de
tracking
Analytics
(click -
begin_order)
Navigation
vers
Checkout
Demande de
routing
(navigateTo -
checkout -
orderID) ❤
.26
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
L’évolution du process de livraison chez Invivo
Build Package Deploy
dist aladin.farm/
dist
dist/mfe/account
dist/mfe/cart
dist/mfe/…
aladin.farm/
aladin.farm/mfe/account
aladin.farm/mfe/cart
aladin.farm/mfe/…
.27
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Pragmatique plus que dogmatique
Utiliser l’architecture pour répondre à des problèmes.
-
Invivo n’a pas de problématique de lead time. Investir sur
l’indépendance de livraison des micro-frontends n’est donc
pas le sujet prioritaire.
.28
03
L’heure du bilan
.29
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
1.
2.
3.
Les facteurs de succès
Microservices
Design System
Principes DevOps
.30
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Ce qui a changé dans l’organisation
Clarification pour chaque équipe des “bouts de code” à
maintenir
-
On ne se marche plus sur les pieds
.31
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Itératif + incrémental = confiance
Micro-frontend, une opportunité pour avancer pas à pas vers
la reprise en main du Front
-
Pas de Big bang
.32
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
S’outiller pour ses propres besoins
Sortez des patterns frameworks et revenez aux bases du web
-
Pragmatisme
❤
.33
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Isolation
Micro-frontend
Architecture
Pragmatisme
Sérénité
Itératif + incrémental = confiance
Monolithe
Big Bang
��
App
Shell
2 3
COIN
COIN
!
LA CONFÉRENCE TECH POUR LES ARCHITECTES DE SI
LA DUCK CONF BY OCTO TECHNOLOGY
COIN
COIN
!
LA CONFÉRENCE TECH POUR LES ARCHITECTES DE SI
LA DUCK CONF BY OCTO TECHNOLOGY
.36
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2025
-
All
rights
reserved
1.
2.
3.
.37
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
on est sympathique (j’ai l’air speed)
Comment réagir l’un à l’autre ?
Story telling =>
début crée de la confusion
à fond dedans slide 14 ()
On se bloque pas les mains avec la telecommande, faut rien avoir dans les mains, garde le
BRM : attention à ne pas être trop dans la forme, fait le deuil d’une précision
BRM : A chaque fois que je prends les phrases de mon script, fait le deuil de l’exhausistivité
BRM: T’es entre toi et toi => N’ait pas de rupture relationnelle
Faut clarifier que c’est une étude de cas => Ne
Problème de position : C’est quoi notre position ?
Ne mange pas ton nom : Fait une pause entre prenom et nom et fonction : BRANDONE … MARTINS … LEAD MFE à
OCTO
.38
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Le front c’est complexe, et ça donne des complexes => TOP
Mettre des phrases fortes au début (pragmratique + que dogmatique)
1min30 sur le gros monolithe et montrer que c’est un vrai problème
Slide 6 : d’ou l’on vient doit être plus claire
Slide 7 : Plus dramatique sur le plat de spaghetti
Slide 8 : Ce que ce nouvel outil devrait savoir faire (àa doit sentir bon
Slide 9 : Garder l’ombre de freddy
Entre 9 et 10 : Avec ça ce qu’on fait ? ET on amène MFE
7 et 11 : sont la même chose
Presentation
Contexte
Problématique (merge 7 et 11)
Sur l’histoire => c’est top
“J’ai éprouvé yb besoin d’illustration”
.39
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
On va s’entrainer à lever les mains : C’est un moment cool le vote à main levée
Avec un arbitre, qui compte bien
Un qui compte l’autre qui commente
Qui a gagné et on le montre
On nourrit notre relation au public
(on recommence de 0 ou on fait incrémental itératif ?) Trouver une autre question
TOP moment fort sur l’exemple : CLIMAX
Slide 26 : ça a tout changé, mais ça n’a rien changé
LE PLUS IMPORTANT : FAUT DONNER LA PROBLÉMATIQUE (SLIDE 7 ET 11 À MERGER)
VRAI PROBLEMATIQUE : Comment Invivo a utilisé micro-frontend
Phrase de fin : Pas de big bang pour faire la migration
.40
LA
DUCK
CONF
BY
OCTO
TECHNOLOGY
©
2024
-
All
rights
reserved
Slide 29 :
Lire les 7 points (Principe DevOps => illustrer 3 points à chaque fois, comme la slide 17
Slide 31 : redire avec des mots + faciles
Être moins subtil et plus directe
Slide 4 : Trop d’éléments ? definir Invivo plus simple (c’est de l’agro, ils sont pas sur la tech à la base). Servir la
problématique dans la slide
Première question : est-ce-que ça vous parle un peu, beaucoup, passionément

Contenu connexe

PDF
OCTO Talks - State of the art Architecture dans les frontend web
PDF
La Duck Conf - Les fakes news du low-code
PDF
Duck Conf 2025 - "Modern Software Engineering & Architecture" : Les Tech Tren...
PDF
Duck Conf 2025 - Les pièges des plateformes : apprenez à les reconnaitre et à...
PDF
Le Comptoir OCTO - Architecture Hexagonale & Clean architecture : bonnet blan...
PDF
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
PDF
La Duck Conf - Une équipe plateforme qui délivre
PDF
Duck Conf 2025 - L’architecture continue par la pratique
OCTO Talks - State of the art Architecture dans les frontend web
La Duck Conf - Les fakes news du low-code
Duck Conf 2025 - "Modern Software Engineering & Architecture" : Les Tech Tren...
Duck Conf 2025 - Les pièges des plateformes : apprenez à les reconnaitre et à...
Le Comptoir OCTO - Architecture Hexagonale & Clean architecture : bonnet blan...
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
La Duck Conf - Une équipe plateforme qui délivre
Duck Conf 2025 - L’architecture continue par la pratique

Similaire à Duck Conf 2025 - Le micro-frontend décomplexé : les dessous d’une migration incrémentale et itérative (15)

PPTX
Petit-Déjeuner : Ceci n'est pas un mobile
PDF
La Duck Conf - "Quelle place pour le no code/low code dans les entreprises ?"
PDF
L'histoire d'une infrastructure itérative
PDF
Le Web comme plateforme applicative - comment programme-t-on le Web?
PPTX
Objectif fluid<fab />
PDF
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
PPTX
Industrialiser le dev. front end · Boris Schapira · Bdx.io
PPT
Web Developpement
PDF
L'open source dans les nouvelles architectures web
PPTX
Kit De Survie Techno et Web à l'usage des Entrepreneurs
PDF
La Duck Conf - "Microservices & Servicemesh : le retour des frameworks d'entr...
PPTX
Restructurer un legacy comment et pourquoi
PPTX
La Duck Conf : "Observabilité"
PDF
Le Comptoir OCTO - Améliorer le Time to Market grâce au Headless : la recette...
PDF
Comptoir - Utiliser une solution d'edge Open Source pour améliorer l'inspecti...
Petit-Déjeuner : Ceci n'est pas un mobile
La Duck Conf - "Quelle place pour le no code/low code dans les entreprises ?"
L'histoire d'une infrastructure itérative
Le Web comme plateforme applicative - comment programme-t-on le Web?
Objectif fluid<fab />
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
Industrialiser le dev. front end · Boris Schapira · Bdx.io
Web Developpement
L'open source dans les nouvelles architectures web
Kit De Survie Techno et Web à l'usage des Entrepreneurs
La Duck Conf - "Microservices & Servicemesh : le retour des frameworks d'entr...
Restructurer un legacy comment et pourquoi
La Duck Conf : "Observabilité"
Le Comptoir OCTO - Améliorer le Time to Market grâce au Headless : la recette...
Comptoir - Utiliser une solution d'edge Open Source pour améliorer l'inspecti...
Publicité

Plus de OCTO Technology (20)

PDF
Comptoir OCTO - Agents IA : Tout ce qu'il faut savoir.
PDF
Comment l’IA générative peut-elle moderniser efficacement vos SI Brownfield ?
PPTX
La Grosse Conf - IA générative et mésinformation comprendre les mécanisme...
PPTX
La Grosse Conf - Data et Humanité, un bilan mitigé - Frédéric Duvivier
PPTX
La Grosse Conf - LLMOps, on s'y met tout de suite ? - Ali El Moussawi
PPTX
La Grosse Conf - Déployer des modèles d'IA à l'edge : live coding et bonne...
PDF
Le Comptoir OCTO - Transformer son organisation sans peur et sans douleur
PDF
Duck Conf 2025 - Déjouer les pièges de Conway dans l'agilité à l'échelle
PDF
Duck Conf 2025 - Des millisecondes contre des millions d'euros
PPTX
Duck Conf 2025 - Du chaos au flow : faut-il miser sur la DevEx ?
PDF
Duck Conf 2025 - Tests Pragmatiques : Comment j'ai (presque) arrêté de faire...
PPTX
La Grosse Conf 2025 - Baptiste Courbe - Model Platform : industrialiser et go...
PPTX
La Grosse Conf 2025 - Jean-Baptiste Larraufie - 30% plus rapide : notre recet...
PPTX
La Grosse Conf 2025 - Yannick Drant - Prototyper l’innovation : framework et ...
PPTX
La Grosse Conf 2025 - Karim Sayadi - Construire une data plateforme : entre m...
PPTX
La Grosse Conf 2025 - Laure Constantinesco - Mettez de l’UX dans votre IA
PPTX
La Grosse Conf - Philippe Prados - LangChain : Open Source, complexité et ada...
PPTX
La Grosse Conf 2025 - Théophile Molcard - Retour d'expérience de 2 ans de co...
PPTX
La Grosse Conf 2025 - Salomé Serin - Sociologie de l'IA Générative : l'ateli...
PPTX
La Grosse Conf 2025 - Matthieu Lagacherie - Transformer la gestion du savoir ...
Comptoir OCTO - Agents IA : Tout ce qu'il faut savoir.
Comment l’IA générative peut-elle moderniser efficacement vos SI Brownfield ?
La Grosse Conf - IA générative et mésinformation comprendre les mécanisme...
La Grosse Conf - Data et Humanité, un bilan mitigé - Frédéric Duvivier
La Grosse Conf - LLMOps, on s'y met tout de suite ? - Ali El Moussawi
La Grosse Conf - Déployer des modèles d'IA à l'edge : live coding et bonne...
Le Comptoir OCTO - Transformer son organisation sans peur et sans douleur
Duck Conf 2025 - Déjouer les pièges de Conway dans l'agilité à l'échelle
Duck Conf 2025 - Des millisecondes contre des millions d'euros
Duck Conf 2025 - Du chaos au flow : faut-il miser sur la DevEx ?
Duck Conf 2025 - Tests Pragmatiques : Comment j'ai (presque) arrêté de faire...
La Grosse Conf 2025 - Baptiste Courbe - Model Platform : industrialiser et go...
La Grosse Conf 2025 - Jean-Baptiste Larraufie - 30% plus rapide : notre recet...
La Grosse Conf 2025 - Yannick Drant - Prototyper l’innovation : framework et ...
La Grosse Conf 2025 - Karim Sayadi - Construire une data plateforme : entre m...
La Grosse Conf 2025 - Laure Constantinesco - Mettez de l’UX dans votre IA
La Grosse Conf - Philippe Prados - LangChain : Open Source, complexité et ada...
La Grosse Conf 2025 - Théophile Molcard - Retour d'expérience de 2 ans de co...
La Grosse Conf 2025 - Salomé Serin - Sociologie de l'IA Générative : l'ateli...
La Grosse Conf 2025 - Matthieu Lagacherie - Transformer la gestion du savoir ...
Publicité

Dernier (7)

PPTX
Cours Electrotechnique L2 - Séance 6.pptx
PPTX
test pour la présentation foire de Chalôns V1
PDF
Frais et décompte dans SAP S/4HANA Transportation Management, S4TM3 Col26
PDF
Analyse technique approfondie pour la gestion des transports dans SAP S/4HANA...
PDF
Architecture logicielle et Modeles de Conception
PDF
IPTV Meilleur - Le Meilleur Abonnement IPTV en France pour 2025
PDF
COURS GCDs Chap 9.pdf tous les éléments.
Cours Electrotechnique L2 - Séance 6.pptx
test pour la présentation foire de Chalôns V1
Frais et décompte dans SAP S/4HANA Transportation Management, S4TM3 Col26
Analyse technique approfondie pour la gestion des transports dans SAP S/4HANA...
Architecture logicielle et Modeles de Conception
IPTV Meilleur - Le Meilleur Abonnement IPTV en France pour 2025
COURS GCDs Chap 9.pdf tous les éléments.

Duck Conf 2025 - Le micro-frontend décomplexé : les dessous d’une migration incrémentale et itérative