SlideShare une entreprise Scribd logo
.1
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved LE COMPTOIR OCTO - EVENT EN REMOTE
OCTO.COM
THERE
IS
A
BETTER
WAY
Améliorer le Time to Market
grâce au Headless : la
recette pour y arriver !
Mardi 21/05/2024
à 9h15
.2
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
OCTO
I
PART
OF
ACCENTURE
Software Engineering
220 artisans du logiciel
passionnés par la technologie
Nos interventions :
● conseil développement et
architecture: baf, audit, coaching
● delivery de produits stratégiques:
greenfield & brownfield
Nos engagements : qualité premium, des
produits qui fonctionnent, TTM,
cost-efficiency, implication
Nos focus 2024:
● l’augmentation des développeurs
par la GenIA
● l’accessibilité web et mobile
● le delivery brownfield
● l’hybridation des filières mobiles
● les architectures composables &
continues
.3
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Agenda
Qu’est-ce que le
headless ?
Démarche de
cadrage
Retours
d’expériences
1 2 3
.4
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Qu’est-ce que le
headless ?
.5
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Contenus
& configurations UI
Affichage & interactions
(web, mobile, IOT, interfaces
conversationnelles, …)
Données
& logiques métier
API
Séparer les responsabilités
● Affichage & interactions
● Données & logiques métier
● Contenus & configurations UI
dans des composants isolées en
exposant les backends via des
APIs OMNICANALES et
bénéficier des meilleurs solutions
du marché pour chaque brique
API
« Le Headless, c’est couper la tête ! »
.6
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Les douleurs à
l’origine d’une
transition headless
IT
Le backlog se remplit plus vite
qu'il ne se vide
Les priorités changent
constamment
Le recrutement est difficile
Le turnover est élevé, les
connaissances se perdent
Marketing
Trop de limitations techniques
Le TTM est trop long
La publication de contenu est
complexe
Le contenu éditorial devrait être
disponible sur tous les canaux
.7
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Qu’est-ce qu’une transition headless ?
Core business
● Products
● Carts
● Orders
CMS Headless
● UI configuration
● Pages management
● Editorial content
Frontend sur mesure
Frontend intégré
CMS intégré
Core business
● Products
● Carts
● Orders
API API
Un chantier « Going headless » consiste à passer d’un monolithe à un écosystème « best of
breed » pour permettre de livrer de manière indépendante
Solution vendor monolithique
intégrée
Le coeur de métier reste dans la solution vendor et est exposé via
API. Le CMS est déporté pour être interopérable via API. Le front
est fait sur mesure
Architecture existante Architecture headless
.8
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Les bénéfices d’une transition headless
Construire un front
qui déchire !
Être encore plus agile,
et réactif
Offrir l’omnicanalité
Bénéfice technique :
Augmentation des performances de 85%
Bénéfice business :
Augmentation des ventes de 40%
.9
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Frontend sur mesure
Rationalisation de l’UI
Expérience sans couture
Appliquer les standards by design
CMS headless
Migration
Gestion des “tenants”
Formation
Core business
Relocalisation des règles métier
API
Les challenges d’une transition headless
Un chantier as-is :
même UI
même UX
même métier
Dessiner une trajectoire de migration
Embarquer le produit
Identifier les bénéfices
Adhérer à la démarche
T
E
C
H
P
R
O
D
U
I
T
.10
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Démarche
.11
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Les étapes clés pour mettre sur les rails un chantier headless
Evaluer l’existant
● produit
● organisation
● technique
Définir la cible
● les enjeux et les
drivers
● architecture
fonctionnelle cible
● choix techniques
Définir les 1ères
étapes de la
trajectoire
Etape 1 Etape 2 Etape 3
Réaliser la 1ère
étape de la
trajectoire
& revoir le plan
Etape 4
.12
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Etape 2 : Définir la cible frontEnd
Composants frontend
Lib. de
composants
Moteur de
rendu
BFF
Architecture fonctionnelle Architecture technique Infrastructure
Librairie de
composants :
gestion de l’UI
Stratégie de build : persona, usages, …
Granularité du découpage
Choix du framework : react, vue, svelte
From scratch ou sur l’étagère :
● CSS : tailwind, SaaS
● Comportement : Radix UI,
React-aria
● Visuelle : Bootstrap, TailwindUI
packaging
versioning
CI-CD
Moteur de rendu :
génération des
pages
Stratégie de rendering (client | server
side)
Navigation
Hydratation
Choix du méta framework : next, nuxt,
astro, remix
Interopérabilité avec les outils front, ex
: 3rd parties
● CDN, WAF, reverse proxy, load
balancer
● Caching stratégie, gestion des
assets statiques
● Observabilité, expérience
développeur
● Environments, CI-CD
BFF : orchestration,
préparation des
données
Pertinence d’introduire un BFF ou pas ? Consistance de la stack : fullstack JS
.13
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
CMS headless
Capabilities business & tech
Stratégie de configuration
Solutions
Core business
Stratégie API
● API first omnicanale vs experience
API BFF
● Authentification
● Sécurité
● Attention aux microservices
Dette à résoudre
Etape 2 : Définir la cible core business et CMS Headless
.14
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Solution
actuelle
Solution cible
Pilote
Ensemble des marques,
des pays sont migrés
Solution
transitoire
Apporter de la valeur en
continu et limiter les doubles
coûts
S’inscrire dans l’architecture
continue
Embrasser l’amélioration
continue
une problématique technique mais surtout produit
Etape 3 : Définir les 1ères étapes de la trajectoire
.15
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Les différentes approches de migration
Approche big bang Approche page par page Approche élément d’UI
par élément d’UI
Description Migrer l’intégralité d’un site en
une fois
Migrer certaines pages d’un site
⇒ coexistence des 2 solutions
Intégrer des éléments headless
dans des pages legacy
Avantages Maitrise du plan de rollout,
visibilité
Périmètre plus restreint Micro périmètre
Flexibilité
Résout les sujets de cohérence
d’UI
Inconvénients Ne correspond pas aux attentes
en terme d’agilité : effet tunnel
Nécessite un plan solide
Double run et bridge pour le sans
couture (authentification, panier)
Introduit des évolutions sur le
legacy
Complexité de la roadmap
“Never ending story”
Repousse la complexité SEO et la
stratégie de rendering
.16
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Retours d’expériences
.17
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Un acteur e-commerce mondial du luxe
● environ 60 pays avec des spécificités SI régionales
● la solution existante est un monolythe SAP Hybris
● 8 semaines de cadrage stratégique
● un CMS headless maison réalisé en shadow IT
Contexte
L’architecture que nous avons dessiné
Core solution
CMS Headless
maison
BFF
Librairie de
composants
Rendering Engine
● cible : responsabilités du BFF, stratégie d’invalidation cache
● trajectoire : approche de migration, éléments transverses, des features ont été ajoutées dans l’existant
● build : le premier step = tunnel lié à la complétude fonctionnelle attendue et l’enjeu de limiter le rework
● organisation dense
Les difficultés que nous avons surmontées
.18
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Un acteur européen du tourisme
● 5 pays
● 9 tenants
● 4 backend pour gérer les réservations - billet et hôtellerie
Contexte
Le tunnel (multi-backend) engendre une augmentation
de 40% du taux de conversion ; donc des ventes en lignes
Le CMS headless est définitivement adopté !
Les succès
L’architecture que nous avons dessiné
CMS
Headless
API omnicanale
Front SPA multi tenant
● complexité d’interopérabilité des backend sous jacents
● covid ⇒ opportunité
Les difficultés que nous avons surmontées
o11y
.19
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Un acteur du domaine “beauté”
● Solution existante basée sur Salesforce Commerce Cloud
● Besoin d’accélérer sur l'omnicanalité et de réduire le TTM
● Réaliser un cadrage stratégique pour :
● Définir l'architecture cible et la stratégie de déploiement
● Impliquer les équipes commerciales dans cette migration technique
● Évaluer le coût et le temps nécessaires pour atteindre la cible
Contexte
● La vision à 360 degrés et l'exécution sur trois axes
(technologie, produit, organisation),
● Une équipe pluridisciplinaire,
● Une perspective de haut niveau et une granularité
contrôlée pour pouvoir aborder l'ensemble du spectre.
Facteurs clés de succès
● Une solution CMS pas identifiée au démarrage du delivery
● Un processus long (1 an ½ entre les 1ères reco et la 1ère ligne de code)
Challenges
● Obtention du soutien et l'approbation des équipes commerciales
● Validation du projet par la direction
● Démarrage du processus de RFP à partir du contenu stratégique
Résultats & bénéfices
Unified Omnichannel layer
BFF
.20
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
1.
OCTO Talks
12.06.2024
Modern et
Software
Engineering &
Architecture
GenAI, Architecture,
Accessibilité,
Développement
hybride
Lien d’inscription dans le chat
ou sur octo.com, catégorie
“Événements”
2. 3. 4.
Les Actus OCT
Publication
Culture Test Vol.2
Apprivoisez la
complexité
Tests automatisés et
Architecture Logicielle
Plus d’informations sur
octo.com
catégorie”Ressources”
Formation
Accelerate© :
adopter les bonnes
pratiques pour un
delivery plus
performant, rapide
et stable
Comprendre les
principes techniques,
méthodologiques et
organisationnels
régissant la
performance du delivery
logiciel
Rdv sur octo.academy
Conférence
Rendez-vous le 24
juin 2024 au Musée
du Quai Branly -
Jacques Chirac
“La technologie dans
l’exercice de la
souveraineté”
Plus d’informations sur
usievents.com
OCTO
I
PART
OF
ACCENTURE©
2024-
All
rights
reserved
.22
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
intro cachée
D: Bonjour, bienvenue au comptoire headless OCTO
P : Se présenter :
๏ P : Pierrette
๏ D : David
P : on va passer 45 min ensemble qui se découpe de la manière suivante :
- 20 min de présentation - enregistrée - replay
- 20 min de question / réponse
On vous demandera de garder vos questions pour la session de Q/R
Faites nous signe
.23
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Rappel du pitch
Un chantier headless consiste à extraire la partie interface d'une solution monolithique, souvent
e-commerce, afin de gagner en time to market et d’adresser les enjeux d’expérience, d'accessibilité,
de performance.
Une migration headless implique :
● d’extraire le front pour le construire sur des technologies modernes à l’état de l’art
● de piloter contenu via un CMS headless et par conséquent de simplifier la contribution
● de revaloriser la solution existante en exposant le métier via des APIs, et ainsi d’ouvrir les portes de
l’omnicanalité.
Le cadrage d’un tel chantier nécessite de s’arrêter sur les changements côté produit, technique et
organisationnel qu’il va engendrer. Venez découvrir la recette que nous avons forgée au cours de nos
expériences, pour réussir ce chantier stratégique.
.24
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Contenu
● Pourquoi se tourner vers le headless ? #pains
○ Market : Flexibilité, réactivité, agilité sur le front
○ Tech :
● Bénéfices du headless
● Intégralité des bénéfices à mettre en perspective des chantiers connexes (découpage vertical, DDD, DS,
infra à l’état de l’art)
● C’est quoi le front ? poser un scope
○ A11y
○ SEO
○ UI
● As-is c’est quoi ?
○ Même peinture - UI
○ Même comportement - UX
○ Mêmes features - business rules
P
B
E
D
A
O
S
.25
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Contenu
● Produit
○ Migration tech certes mais il faut embarquer le produit
● Tech
○ Choix d’architecture - drivers d’architecture - autonome - indep - homogénéité
○ Bcp de choix à faire > valider step by step
■ CMS
■ Stratégie API - APIs BFF or not BFF
■ DS - modèle fédéré
■ A11y, o11y
■ Homogène ou modulaire ?
■ Fwk, xperience dev, recrutement
● Orga
○ Build team
○ Support / opérations
DAOS
P
B
E
.26
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Contenu
● Produit
○ Existant ?
○ Nouvelle feature ? pas de as-is
○ Apporter de la valeur en continue
○ Il faut que ça marche as-is
■ Avez vous une bonne connaissance de l’existant pour guider la refonte ? reverse
documentation ? personnes disponibles ? estimation de la complexité à reprendre
○ Stratégie de bascule
■ Pilote
● Identification du pilote
○ Faible trafic ou trafic inexistant ? enjeux business (quel curseur pour aller
chercher de la valeur)
● Stratégie en entonnoir - drivers (aller très vite en prod avec un incrément
minimal)
○ Page / page
○ Pays / pays
○ Enseignes / Enseignes ou Marques / marques
○ Rollout
■ Big bang
■ Page par page
■ Composant d’UI / composant d’UI
○ Unité de migration grosse
■ Limiter l’effet tunnel
■ Seamless en double run
● Tech
● Orga
○ Nouvelles façons de travailler
○ Expertise front élargie exit les intégrateur > vrais devs front - JS lovers :)
○ Platform, Core team (DS, ops, …)
DAOS
PB
E
.27
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Axe organisationnel
Axe technique
Construire un objectif technique
Le cible organisationnelle reste vaine
à définir tellement la cible est loin
Intégrer dès le départ les équipes
support et opérations
Il est essentiel d’embarquer les représentants du
produit, une fois qu’ils comprendront la cible ils
seront des acteurs clés dans la définition de la
trajectoire
Chacun rêve déjà d’artefacts facilitants pour tenir les
objectifs du headless
Axe produit
La cible est un exercice “facile”
.28
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Une expérience développeur qui rocks !
● C4 model et ADR pour l’architecture
● Storybook pour les composants d’UI
● Swagger pour l’API
● Les logs, traces et métriques
remontent day 1 dans la solution
d’APM
● Quelle solution pour le RUM ?
● All inclusive type backstage pour
faciliter l’onboarding et accéder
facilement aux différents outils
Documentation as
code
Observabilité day 1 Portail développeur
.29
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
“Il a fallu des
années, des gens
et de la sueur,
pour offrir un site
web aussi riche”
Une transition headless est avant
tout un challenge business
L'implication des Product Owners est essentielle pour
comprendre les responsabilités à transférer
● Avez vous une connaissance profonde de
l’existant pour guider la refonte ?
● Les sachants seront-ils disponibles pour s’assurer
que la complexité est bien adressée ?
.30
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Apporter de la valeur en continu
💎
Identifier le pilote :
● le traffic sur le site
● le nombre de pages
● la performance business
Dessiner une stratégie de migration progressive
● Commencer simple pour augmenter la complexité version par
version
● La roadmap headless doit prendre en compte la roadmap du
SI
● Feature freeze n’est pas une option sur le legacy : un nouveau
besoin métier peut être candidat à une implémentation unique
sur l'architecture headless pour limiter les doubles couts
.31
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Architecture continue
L'architecture sera obsolète jour 1 ! Une demande va
émerger et remettre en cause les orientations de la
stratégie de migration
Il n'y a pas de baguette magique
Définir une ligne directrice à suivre pendant la
migration
Limiter le double
run et la double
contribution
Garantir la
cohérence UX-UI
pour une
expérience sans
couture
Intégrer les enjeux
SEO au plus tôt
Il est impossible de tout faire
parfaitement du premier coup,
nous validons les choix techniques
étape par étape, nous acceptons
de nous tromper et d’améliorer
M
.32
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
● Cycles courts : shift right to
collectecter des feedbacks
ASAP
● Organisation apprenante
● Traiter les sujets en largeur
avant la profondeur !
Amélioration continue &
nouvelles façons de travailler
Design
Run &
Configure
Build
.33
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Qu’est-ce que le headless ?
Composable
HEADLESS
API first
microservices
.34
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Un exemple avec un site e-commerce
Pages marketing Pages produit Pages checkout Pages my account
● Home
● Editorial (landing)
● Product List (PLP)
● Product Detail (PDP)
● Search
● Buying / booking funnel
● Payement
● Confirmation
● Loyalty program
● Order
● Profile
Pages sensibles : SEO
Mises à jour fréquemment
Represente des millions de pages
⇒ Pages plus prioritaires : valeur et attentes
business en terme de réactivité
Page authentifiées
Principalement non editorialisées
⇒ Pages moins prioritaires / nos expériences
.35
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
Contenu
● Dans quel ordre ?
● Cible
● Trajectoire
○ On va pas trop loin
○ Valeur produit et le step tech se retrouve dans l’orga - au fur et à mesure
DAOS
PBE
.36
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
1J1S
- 300 k visites / mois
- 650 k pages vues
- 400 k pages environ
-
- pages edito = articles
- pages maison = HP, …
surpris ETL un peu orverkill (indirection pourdes trucs simples = difficile à comprendre)
Next JS - SSR foireux
> amélioré - attention dev pour du univeersal c’est pas simple (use …)
Laurent Igou - combien de temps pour faire la refonte totale - exp CMS headless
Amélioration SEO - web perf
Voir avec GAUT
CDN cloudflare - passage JT on a tenu ! absorbé les pics de charge
x10 en 25 min - 35k à la minute
A11y au top avec Guillaume
.37
OCTO
I
PART
OF
ACCENTURE©
2024
-
All
rights
reserved
les rex
ce qui a marché ou pas
chanel :
ce qui a marché
- le plan certes bouge mais la cible reste l’objectif > les décisions sont prise l’atteindre
ce qui n’a pas marché
- cible on a galéré sur la stratégie API
- on bcp échangé sur le premier step > c’est quoi une page headless - est-ce qu’on commence menu + footer (ils
ont accepté de faire du dev sur le legacy)
- build : premier step trop gros (on attaque par la profondeur : construire une lin de composants parfait dès le
premier le premier coup)
Sephora @Davido =)
ce qui a marché
- on a embarqué le produit pour aller chercher le budget (et qu’ils y voient les bénéfices)
- headless : perdre la verticalité sur le Back > API > perte de sync entre l’équipe monolithe et l’équipe front

Contenu connexe

Similaire à Le Comptoir OCTO - Améliorer le Time to Market grâce au Headless : la recette pour y arriver !

Fin de support Windows Server 2003, quelles options ?
Fin de support Windows Server 2003, quelles options ?Fin de support Windows Server 2003, quelles options ?
Fin de support Windows Server 2003, quelles options ?
Microsoft Technet France
 
Le Comptoir OCTO - Mouv’ ton orga Produit
Le Comptoir OCTO - Mouv’ ton orga ProduitLe Comptoir OCTO - Mouv’ ton orga Produit
Le Comptoir OCTO - Mouv’ ton orga Produit
OCTO Technology
 
Les 4 grandes offres Keonys
Les 4 grandes offres KeonysLes 4 grandes offres Keonys
Les 4 grandes offres Keonys
Marc Jouve
 
Afterwork OCTO Delivery - L'ADN d'un développement produit réussi
Afterwork OCTO Delivery - L'ADN d'un développement produit réussiAfterwork OCTO Delivery - L'ADN d'un développement produit réussi
Afterwork OCTO Delivery - L'ADN d'un développement produit réussi
cyrilpicat
 
L'ADN d'un développement produit réussi
L'ADN d'un développement produit réussiL'ADN d'un développement produit réussi
L'ADN d'un développement produit réussi
OCTO Technology Suisse
 
CRIP De la Supervion à la communication : Dashboard de production informatique
CRIP De la Supervion à la communication : Dashboard de production informatiqueCRIP De la Supervion à la communication : Dashboard de production informatique
CRIP De la Supervion à la communication : Dashboard de production informatique
Yann SESE
 
Le Comptoir OCTO - Les nouvelles topologies du Cloud
Le Comptoir OCTO - Les nouvelles topologies du CloudLe Comptoir OCTO - Les nouvelles topologies du Cloud
Le Comptoir OCTO - Les nouvelles topologies du Cloud
OCTO Technology
 
[Webinar Niji] Clés de succès et partage d’expériences pour mettre en œuvre e...
[Webinar Niji] Clés de succès et partage d’expériences pour mettre en œuvre e...[Webinar Niji] Clés de succès et partage d’expériences pour mettre en œuvre e...
[Webinar Niji] Clés de succès et partage d’expériences pour mettre en œuvre e...
Niji
 
Presentation impararia french
Presentation impararia frenchPresentation impararia french
Presentation impararia french
Yoan FOURNY
 
La Duck Conf - "Quelle place pour le no code/low code dans les entreprises ?"
La Duck Conf - "Quelle place pour le no code/low code dans les entreprises ?"La Duck Conf - "Quelle place pour le no code/low code dans les entreprises ?"
La Duck Conf - "Quelle place pour le no code/low code dans les entreprises ?"
OCTO Technology
 
La Duck Conf - "Mon DSI veut une MEP par jour, comment faire de l'architectur...
La Duck Conf - "Mon DSI veut une MEP par jour, comment faire de l'architectur...La Duck Conf - "Mon DSI veut une MEP par jour, comment faire de l'architectur...
La Duck Conf - "Mon DSI veut une MEP par jour, comment faire de l'architectur...
OCTO Technology
 
Démarche de développement d'une activité Cloud
Démarche de développement d'une activité CloudDémarche de développement d'une activité Cloud
Démarche de développement d'une activité Cloud
INNOVER PLUS
 
Accélérez itSMF 2013
Accélérez itSMF 2013Accélérez itSMF 2013
Accélérez itSMF 2013
itSMF France
 
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Microsoft Ideas
 
Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013
Charbel Abdo
 
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
OCTO Technology
 
2022.04.05 - Afterwork partenaire - Global.pptx
2022.04.05 - Afterwork partenaire - Global.pptx2022.04.05 - Afterwork partenaire - Global.pptx
2022.04.05 - Afterwork partenaire - Global.pptx
CodyAllsage1
 
Whitecape - Odoo - Offre ERP
Whitecape - Odoo - Offre ERPWhitecape - Odoo - Offre ERP
Whitecape - Odoo - Offre ERP
Souheil Ladjimi
 
La Duck Conf - "Microservices & Servicemesh : le retour des frameworks d'entr...
La Duck Conf - "Microservices & Servicemesh : le retour des frameworks d'entr...La Duck Conf - "Microservices & Servicemesh : le retour des frameworks d'entr...
La Duck Conf - "Microservices & Servicemesh : le retour des frameworks d'entr...
OCTO Technology
 
BtoBIM : Les pitchs
BtoBIM : Les pitchsBtoBIM : Les pitchs
BtoBIM : Les pitchs
Novabuild
 

Similaire à Le Comptoir OCTO - Améliorer le Time to Market grâce au Headless : la recette pour y arriver ! (20)

Fin de support Windows Server 2003, quelles options ?
Fin de support Windows Server 2003, quelles options ?Fin de support Windows Server 2003, quelles options ?
Fin de support Windows Server 2003, quelles options ?
 
Le Comptoir OCTO - Mouv’ ton orga Produit
Le Comptoir OCTO - Mouv’ ton orga ProduitLe Comptoir OCTO - Mouv’ ton orga Produit
Le Comptoir OCTO - Mouv’ ton orga Produit
 
Les 4 grandes offres Keonys
Les 4 grandes offres KeonysLes 4 grandes offres Keonys
Les 4 grandes offres Keonys
 
Afterwork OCTO Delivery - L'ADN d'un développement produit réussi
Afterwork OCTO Delivery - L'ADN d'un développement produit réussiAfterwork OCTO Delivery - L'ADN d'un développement produit réussi
Afterwork OCTO Delivery - L'ADN d'un développement produit réussi
 
L'ADN d'un développement produit réussi
L'ADN d'un développement produit réussiL'ADN d'un développement produit réussi
L'ADN d'un développement produit réussi
 
CRIP De la Supervion à la communication : Dashboard de production informatique
CRIP De la Supervion à la communication : Dashboard de production informatiqueCRIP De la Supervion à la communication : Dashboard de production informatique
CRIP De la Supervion à la communication : Dashboard de production informatique
 
Le Comptoir OCTO - Les nouvelles topologies du Cloud
Le Comptoir OCTO - Les nouvelles topologies du CloudLe Comptoir OCTO - Les nouvelles topologies du Cloud
Le Comptoir OCTO - Les nouvelles topologies du Cloud
 
[Webinar Niji] Clés de succès et partage d’expériences pour mettre en œuvre e...
[Webinar Niji] Clés de succès et partage d’expériences pour mettre en œuvre e...[Webinar Niji] Clés de succès et partage d’expériences pour mettre en œuvre e...
[Webinar Niji] Clés de succès et partage d’expériences pour mettre en œuvre e...
 
Presentation impararia french
Presentation impararia frenchPresentation impararia french
Presentation impararia french
 
La Duck Conf - "Quelle place pour le no code/low code dans les entreprises ?"
La Duck Conf - "Quelle place pour le no code/low code dans les entreprises ?"La Duck Conf - "Quelle place pour le no code/low code dans les entreprises ?"
La Duck Conf - "Quelle place pour le no code/low code dans les entreprises ?"
 
La Duck Conf - "Mon DSI veut une MEP par jour, comment faire de l'architectur...
La Duck Conf - "Mon DSI veut une MEP par jour, comment faire de l'architectur...La Duck Conf - "Mon DSI veut une MEP par jour, comment faire de l'architectur...
La Duck Conf - "Mon DSI veut une MEP par jour, comment faire de l'architectur...
 
Démarche de développement d'une activité Cloud
Démarche de développement d'une activité CloudDémarche de développement d'une activité Cloud
Démarche de développement d'une activité Cloud
 
Accélérez itSMF 2013
Accélérez itSMF 2013Accélérez itSMF 2013
Accélérez itSMF 2013
 
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...Customer Show case : Mise en place d’une solution de gestion de projet avec l...
Customer Show case : Mise en place d’une solution de gestion de projet avec l...
 
Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013Exemple de mise en place d'une solution EPM 2013
Exemple de mise en place d'une solution EPM 2013
 
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
Matinale OCTO - "Blockchain : comment s'orienter dans la désorientation"
 
2022.04.05 - Afterwork partenaire - Global.pptx
2022.04.05 - Afterwork partenaire - Global.pptx2022.04.05 - Afterwork partenaire - Global.pptx
2022.04.05 - Afterwork partenaire - Global.pptx
 
Whitecape - Odoo - Offre ERP
Whitecape - Odoo - Offre ERPWhitecape - Odoo - Offre ERP
Whitecape - Odoo - Offre ERP
 
La Duck Conf - "Microservices & Servicemesh : le retour des frameworks d'entr...
La Duck Conf - "Microservices & Servicemesh : le retour des frameworks d'entr...La Duck Conf - "Microservices & Servicemesh : le retour des frameworks d'entr...
La Duck Conf - "Microservices & Servicemesh : le retour des frameworks d'entr...
 
BtoBIM : Les pitchs
BtoBIM : Les pitchsBtoBIM : Les pitchs
BtoBIM : Les pitchs
 

Plus de OCTO Technology

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
OCTO Technology
 
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonnéLe Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
OCTO Technology
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
OCTO Technology
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
OCTO Technology
 
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
OCTO Technology
 
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
OCTO Technology
 
OCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeursOCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Technology
 
OCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture TestOCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture Test
OCTO Technology
 
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
OCTO Technology
 
Refcard GraphQL
Refcard GraphQLRefcard GraphQL
Refcard GraphQL
OCTO Technology
 
Comptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/LeaseplanComptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/Leaseplan
OCTO Technology
 
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ? Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
OCTO Technology
 
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
OCTO Technology
 
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...
OCTO Technology
 
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conceptionLe Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
OCTO Technology
 
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
OCTO Technology
 
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...
OCTO Technology
 
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
OCTO Technology
 

Plus de OCTO Technology (20)

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
Le Comptoir OCTO - Qu'apporte l'analyse de cycle de vie d'un audit d'éco-conc...
 
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonnéLe Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
Le Comptoir OCTO - Se conformer à la CSRD : un levier d'action insoupçonné
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
 
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
 
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
Le Comptoir OCTO - Maîtriser le RAG : connecter les modèles d’IA génératives ...
 
OCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeursOCTO Talks - Les IA s'invitent au chevet des développeurs
OCTO Talks - Les IA s'invitent au chevet des développeurs
 
OCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture TestOCTO Talks - Lancement du livre Culture Test
OCTO Talks - Lancement du livre Culture Test
 
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
Le Comptoir OCTO - Green AI, comment éviter que votre votre potion magique d’...
 
Refcard GraphQL
Refcard GraphQLRefcard GraphQL
Refcard GraphQL
 
Comptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/LeaseplanComptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/Leaseplan
 
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ? Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
Le Comptoir OCTO - Comment optimiser les stocks en linéaire par la Data ?
 
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
Le Comptoir OCTO - Retour sur 5 ans de mise en oeuvre : Comment le RGPD a réi...
 
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...Le Comptoir OCTO -  Affinez vos forecasts avec la planification distribuée et...
Le Comptoir OCTO - Affinez vos forecasts avec la planification distribuée et...
 
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conceptionLe Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
Le Comptoir OCTO - La formation au cœur de la stratégie d’éco-conception
 
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
Le Comptoir OCTO - Une vision de plateforme sans leadership tech n’est qu’hal...
 
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...Le Comptoir OCTO - L'avenir de la gestion du bilan carbone :  les solutions E...
Le Comptoir OCTO - L'avenir de la gestion du bilan carbone : les solutions E...
 
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
Le Comptoir OCTO - Continuous discovery et continuous delivery pour construir...
 

Le Comptoir OCTO - Améliorer le Time to Market grâce au Headless : la recette pour y arriver !

  • 1. .1 OCTO I PART OF ACCENTURE© 2024 - All rights reserved LE COMPTOIR OCTO - EVENT EN REMOTE OCTO.COM THERE IS A BETTER WAY Améliorer le Time to Market grâce au Headless : la recette pour y arriver ! Mardi 21/05/2024 à 9h15
  • 2. .2 OCTO I PART OF ACCENTURE© 2024 - All rights reserved OCTO I PART OF ACCENTURE Software Engineering 220 artisans du logiciel passionnés par la technologie Nos interventions : ● conseil développement et architecture: baf, audit, coaching ● delivery de produits stratégiques: greenfield & brownfield Nos engagements : qualité premium, des produits qui fonctionnent, TTM, cost-efficiency, implication Nos focus 2024: ● l’augmentation des développeurs par la GenIA ● l’accessibilité web et mobile ● le delivery brownfield ● l’hybridation des filières mobiles ● les architectures composables & continues
  • 5. .5 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Contenus & configurations UI Affichage & interactions (web, mobile, IOT, interfaces conversationnelles, …) Données & logiques métier API Séparer les responsabilités ● Affichage & interactions ● Données & logiques métier ● Contenus & configurations UI dans des composants isolées en exposant les backends via des APIs OMNICANALES et bénéficier des meilleurs solutions du marché pour chaque brique API « Le Headless, c’est couper la tête ! »
  • 6. .6 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Les douleurs à l’origine d’une transition headless IT Le backlog se remplit plus vite qu'il ne se vide Les priorités changent constamment Le recrutement est difficile Le turnover est élevé, les connaissances se perdent Marketing Trop de limitations techniques Le TTM est trop long La publication de contenu est complexe Le contenu éditorial devrait être disponible sur tous les canaux
  • 7. .7 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Qu’est-ce qu’une transition headless ? Core business ● Products ● Carts ● Orders CMS Headless ● UI configuration ● Pages management ● Editorial content Frontend sur mesure Frontend intégré CMS intégré Core business ● Products ● Carts ● Orders API API Un chantier « Going headless » consiste à passer d’un monolithe à un écosystème « best of breed » pour permettre de livrer de manière indépendante Solution vendor monolithique intégrée Le coeur de métier reste dans la solution vendor et est exposé via API. Le CMS est déporté pour être interopérable via API. Le front est fait sur mesure Architecture existante Architecture headless
  • 8. .8 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Les bénéfices d’une transition headless Construire un front qui déchire ! Être encore plus agile, et réactif Offrir l’omnicanalité Bénéfice technique : Augmentation des performances de 85% Bénéfice business : Augmentation des ventes de 40%
  • 9. .9 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Frontend sur mesure Rationalisation de l’UI Expérience sans couture Appliquer les standards by design CMS headless Migration Gestion des “tenants” Formation Core business Relocalisation des règles métier API Les challenges d’une transition headless Un chantier as-is : même UI même UX même métier Dessiner une trajectoire de migration Embarquer le produit Identifier les bénéfices Adhérer à la démarche T E C H P R O D U I T
  • 11. .11 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Les étapes clés pour mettre sur les rails un chantier headless Evaluer l’existant ● produit ● organisation ● technique Définir la cible ● les enjeux et les drivers ● architecture fonctionnelle cible ● choix techniques Définir les 1ères étapes de la trajectoire Etape 1 Etape 2 Etape 3 Réaliser la 1ère étape de la trajectoire & revoir le plan Etape 4
  • 12. .12 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Etape 2 : Définir la cible frontEnd Composants frontend Lib. de composants Moteur de rendu BFF Architecture fonctionnelle Architecture technique Infrastructure Librairie de composants : gestion de l’UI Stratégie de build : persona, usages, … Granularité du découpage Choix du framework : react, vue, svelte From scratch ou sur l’étagère : ● CSS : tailwind, SaaS ● Comportement : Radix UI, React-aria ● Visuelle : Bootstrap, TailwindUI packaging versioning CI-CD Moteur de rendu : génération des pages Stratégie de rendering (client | server side) Navigation Hydratation Choix du méta framework : next, nuxt, astro, remix Interopérabilité avec les outils front, ex : 3rd parties ● CDN, WAF, reverse proxy, load balancer ● Caching stratégie, gestion des assets statiques ● Observabilité, expérience développeur ● Environments, CI-CD BFF : orchestration, préparation des données Pertinence d’introduire un BFF ou pas ? Consistance de la stack : fullstack JS
  • 13. .13 OCTO I PART OF ACCENTURE© 2024 - All rights reserved CMS headless Capabilities business & tech Stratégie de configuration Solutions Core business Stratégie API ● API first omnicanale vs experience API BFF ● Authentification ● Sécurité ● Attention aux microservices Dette à résoudre Etape 2 : Définir la cible core business et CMS Headless
  • 14. .14 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Solution actuelle Solution cible Pilote Ensemble des marques, des pays sont migrés Solution transitoire Apporter de la valeur en continu et limiter les doubles coûts S’inscrire dans l’architecture continue Embrasser l’amélioration continue une problématique technique mais surtout produit Etape 3 : Définir les 1ères étapes de la trajectoire
  • 15. .15 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Les différentes approches de migration Approche big bang Approche page par page Approche élément d’UI par élément d’UI Description Migrer l’intégralité d’un site en une fois Migrer certaines pages d’un site ⇒ coexistence des 2 solutions Intégrer des éléments headless dans des pages legacy Avantages Maitrise du plan de rollout, visibilité Périmètre plus restreint Micro périmètre Flexibilité Résout les sujets de cohérence d’UI Inconvénients Ne correspond pas aux attentes en terme d’agilité : effet tunnel Nécessite un plan solide Double run et bridge pour le sans couture (authentification, panier) Introduit des évolutions sur le legacy Complexité de la roadmap “Never ending story” Repousse la complexité SEO et la stratégie de rendering
  • 17. .17 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Un acteur e-commerce mondial du luxe ● environ 60 pays avec des spécificités SI régionales ● la solution existante est un monolythe SAP Hybris ● 8 semaines de cadrage stratégique ● un CMS headless maison réalisé en shadow IT Contexte L’architecture que nous avons dessiné Core solution CMS Headless maison BFF Librairie de composants Rendering Engine ● cible : responsabilités du BFF, stratégie d’invalidation cache ● trajectoire : approche de migration, éléments transverses, des features ont été ajoutées dans l’existant ● build : le premier step = tunnel lié à la complétude fonctionnelle attendue et l’enjeu de limiter le rework ● organisation dense Les difficultés que nous avons surmontées
  • 18. .18 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Un acteur européen du tourisme ● 5 pays ● 9 tenants ● 4 backend pour gérer les réservations - billet et hôtellerie Contexte Le tunnel (multi-backend) engendre une augmentation de 40% du taux de conversion ; donc des ventes en lignes Le CMS headless est définitivement adopté ! Les succès L’architecture que nous avons dessiné CMS Headless API omnicanale Front SPA multi tenant ● complexité d’interopérabilité des backend sous jacents ● covid ⇒ opportunité Les difficultés que nous avons surmontées o11y
  • 19. .19 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Un acteur du domaine “beauté” ● Solution existante basée sur Salesforce Commerce Cloud ● Besoin d’accélérer sur l'omnicanalité et de réduire le TTM ● Réaliser un cadrage stratégique pour : ● Définir l'architecture cible et la stratégie de déploiement ● Impliquer les équipes commerciales dans cette migration technique ● Évaluer le coût et le temps nécessaires pour atteindre la cible Contexte ● La vision à 360 degrés et l'exécution sur trois axes (technologie, produit, organisation), ● Une équipe pluridisciplinaire, ● Une perspective de haut niveau et une granularité contrôlée pour pouvoir aborder l'ensemble du spectre. Facteurs clés de succès ● Une solution CMS pas identifiée au démarrage du delivery ● Un processus long (1 an ½ entre les 1ères reco et la 1ère ligne de code) Challenges ● Obtention du soutien et l'approbation des équipes commerciales ● Validation du projet par la direction ● Démarrage du processus de RFP à partir du contenu stratégique Résultats & bénéfices Unified Omnichannel layer BFF
  • 20. .20 OCTO I PART OF ACCENTURE© 2024 - All rights reserved 1. OCTO Talks 12.06.2024 Modern et Software Engineering & Architecture GenAI, Architecture, Accessibilité, Développement hybride Lien d’inscription dans le chat ou sur octo.com, catégorie “Événements” 2. 3. 4. Les Actus OCT Publication Culture Test Vol.2 Apprivoisez la complexité Tests automatisés et Architecture Logicielle Plus d’informations sur octo.com catégorie”Ressources” Formation Accelerate© : adopter les bonnes pratiques pour un delivery plus performant, rapide et stable Comprendre les principes techniques, méthodologiques et organisationnels régissant la performance du delivery logiciel Rdv sur octo.academy Conférence Rendez-vous le 24 juin 2024 au Musée du Quai Branly - Jacques Chirac “La technologie dans l’exercice de la souveraineté” Plus d’informations sur usievents.com
  • 22. .22 OCTO I PART OF ACCENTURE© 2024 - All rights reserved intro cachée D: Bonjour, bienvenue au comptoire headless OCTO P : Se présenter : ๏ P : Pierrette ๏ D : David P : on va passer 45 min ensemble qui se découpe de la manière suivante : - 20 min de présentation - enregistrée - replay - 20 min de question / réponse On vous demandera de garder vos questions pour la session de Q/R Faites nous signe
  • 23. .23 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Rappel du pitch Un chantier headless consiste à extraire la partie interface d'une solution monolithique, souvent e-commerce, afin de gagner en time to market et d’adresser les enjeux d’expérience, d'accessibilité, de performance. Une migration headless implique : ● d’extraire le front pour le construire sur des technologies modernes à l’état de l’art ● de piloter contenu via un CMS headless et par conséquent de simplifier la contribution ● de revaloriser la solution existante en exposant le métier via des APIs, et ainsi d’ouvrir les portes de l’omnicanalité. Le cadrage d’un tel chantier nécessite de s’arrêter sur les changements côté produit, technique et organisationnel qu’il va engendrer. Venez découvrir la recette que nous avons forgée au cours de nos expériences, pour réussir ce chantier stratégique.
  • 24. .24 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Contenu ● Pourquoi se tourner vers le headless ? #pains ○ Market : Flexibilité, réactivité, agilité sur le front ○ Tech : ● Bénéfices du headless ● Intégralité des bénéfices à mettre en perspective des chantiers connexes (découpage vertical, DDD, DS, infra à l’état de l’art) ● C’est quoi le front ? poser un scope ○ A11y ○ SEO ○ UI ● As-is c’est quoi ? ○ Même peinture - UI ○ Même comportement - UX ○ Mêmes features - business rules P B E D A O S
  • 25. .25 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Contenu ● Produit ○ Migration tech certes mais il faut embarquer le produit ● Tech ○ Choix d’architecture - drivers d’architecture - autonome - indep - homogénéité ○ Bcp de choix à faire > valider step by step ■ CMS ■ Stratégie API - APIs BFF or not BFF ■ DS - modèle fédéré ■ A11y, o11y ■ Homogène ou modulaire ? ■ Fwk, xperience dev, recrutement ● Orga ○ Build team ○ Support / opérations DAOS P B E
  • 26. .26 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Contenu ● Produit ○ Existant ? ○ Nouvelle feature ? pas de as-is ○ Apporter de la valeur en continue ○ Il faut que ça marche as-is ■ Avez vous une bonne connaissance de l’existant pour guider la refonte ? reverse documentation ? personnes disponibles ? estimation de la complexité à reprendre ○ Stratégie de bascule ■ Pilote ● Identification du pilote ○ Faible trafic ou trafic inexistant ? enjeux business (quel curseur pour aller chercher de la valeur) ● Stratégie en entonnoir - drivers (aller très vite en prod avec un incrément minimal) ○ Page / page ○ Pays / pays ○ Enseignes / Enseignes ou Marques / marques ○ Rollout ■ Big bang ■ Page par page ■ Composant d’UI / composant d’UI ○ Unité de migration grosse ■ Limiter l’effet tunnel ■ Seamless en double run ● Tech ● Orga ○ Nouvelles façons de travailler ○ Expertise front élargie exit les intégrateur > vrais devs front - JS lovers :) ○ Platform, Core team (DS, ops, …) DAOS PB E
  • 27. .27 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Axe organisationnel Axe technique Construire un objectif technique Le cible organisationnelle reste vaine à définir tellement la cible est loin Intégrer dès le départ les équipes support et opérations Il est essentiel d’embarquer les représentants du produit, une fois qu’ils comprendront la cible ils seront des acteurs clés dans la définition de la trajectoire Chacun rêve déjà d’artefacts facilitants pour tenir les objectifs du headless Axe produit La cible est un exercice “facile”
  • 28. .28 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Une expérience développeur qui rocks ! ● C4 model et ADR pour l’architecture ● Storybook pour les composants d’UI ● Swagger pour l’API ● Les logs, traces et métriques remontent day 1 dans la solution d’APM ● Quelle solution pour le RUM ? ● All inclusive type backstage pour faciliter l’onboarding et accéder facilement aux différents outils Documentation as code Observabilité day 1 Portail développeur
  • 29. .29 OCTO I PART OF ACCENTURE© 2024 - All rights reserved “Il a fallu des années, des gens et de la sueur, pour offrir un site web aussi riche” Une transition headless est avant tout un challenge business L'implication des Product Owners est essentielle pour comprendre les responsabilités à transférer ● Avez vous une connaissance profonde de l’existant pour guider la refonte ? ● Les sachants seront-ils disponibles pour s’assurer que la complexité est bien adressée ?
  • 30. .30 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Apporter de la valeur en continu 💎 Identifier le pilote : ● le traffic sur le site ● le nombre de pages ● la performance business Dessiner une stratégie de migration progressive ● Commencer simple pour augmenter la complexité version par version ● La roadmap headless doit prendre en compte la roadmap du SI ● Feature freeze n’est pas une option sur le legacy : un nouveau besoin métier peut être candidat à une implémentation unique sur l'architecture headless pour limiter les doubles couts
  • 31. .31 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Architecture continue L'architecture sera obsolète jour 1 ! Une demande va émerger et remettre en cause les orientations de la stratégie de migration Il n'y a pas de baguette magique Définir une ligne directrice à suivre pendant la migration Limiter le double run et la double contribution Garantir la cohérence UX-UI pour une expérience sans couture Intégrer les enjeux SEO au plus tôt Il est impossible de tout faire parfaitement du premier coup, nous validons les choix techniques étape par étape, nous acceptons de nous tromper et d’améliorer M
  • 32. .32 OCTO I PART OF ACCENTURE© 2024 - All rights reserved ● Cycles courts : shift right to collectecter des feedbacks ASAP ● Organisation apprenante ● Traiter les sujets en largeur avant la profondeur ! Amélioration continue & nouvelles façons de travailler Design Run & Configure Build
  • 33. .33 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Qu’est-ce que le headless ? Composable HEADLESS API first microservices
  • 34. .34 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Un exemple avec un site e-commerce Pages marketing Pages produit Pages checkout Pages my account ● Home ● Editorial (landing) ● Product List (PLP) ● Product Detail (PDP) ● Search ● Buying / booking funnel ● Payement ● Confirmation ● Loyalty program ● Order ● Profile Pages sensibles : SEO Mises à jour fréquemment Represente des millions de pages ⇒ Pages plus prioritaires : valeur et attentes business en terme de réactivité Page authentifiées Principalement non editorialisées ⇒ Pages moins prioritaires / nos expériences
  • 35. .35 OCTO I PART OF ACCENTURE© 2024 - All rights reserved Contenu ● Dans quel ordre ? ● Cible ● Trajectoire ○ On va pas trop loin ○ Valeur produit et le step tech se retrouve dans l’orga - au fur et à mesure DAOS PBE
  • 36. .36 OCTO I PART OF ACCENTURE© 2024 - All rights reserved 1J1S - 300 k visites / mois - 650 k pages vues - 400 k pages environ - - pages edito = articles - pages maison = HP, … surpris ETL un peu orverkill (indirection pourdes trucs simples = difficile à comprendre) Next JS - SSR foireux > amélioré - attention dev pour du univeersal c’est pas simple (use …) Laurent Igou - combien de temps pour faire la refonte totale - exp CMS headless Amélioration SEO - web perf Voir avec GAUT CDN cloudflare - passage JT on a tenu ! absorbé les pics de charge x10 en 25 min - 35k à la minute A11y au top avec Guillaume
  • 37. .37 OCTO I PART OF ACCENTURE© 2024 - All rights reserved les rex ce qui a marché ou pas chanel : ce qui a marché - le plan certes bouge mais la cible reste l’objectif > les décisions sont prise l’atteindre ce qui n’a pas marché - cible on a galéré sur la stratégie API - on bcp échangé sur le premier step > c’est quoi une page headless - est-ce qu’on commence menu + footer (ils ont accepté de faire du dev sur le legacy) - build : premier step trop gros (on attaque par la profondeur : construire une lin de composants parfait dès le premier le premier coup) Sephora @Davido =) ce qui a marché - on a embarqué le produit pour aller chercher le budget (et qu’ils y voient les bénéfices) - headless : perdre la verticalité sur le Back > API > perte de sync entre l’équipe monolithe et l’équipe front