SlideShare une entreprise Scribd logo

OCTO Talks - State of the art Architecture dans les frontend web

Vous avez dit architecture front 💅 ? Du CSS au CDN, personne ne sera épargné ! par Pierrette Bertrand (Head of Web Front Development @OCTO Technology), David Ostermann (Developpeur Front End @OCTO Technology) et Florian Leroy (Consultant Senior @OCTO Technology) Qu’est-ce qu’une architecture front ? Selon que vous demandiez à un intégrateur, un développeur frontend, un développeur d’API ou tout simplement, à un architecte, la réponse sera bien différente. Car selon notre expérience, ce dernier, n’a en réalité qu’une partie de la réponse. Dans ce talk, nous regarderons ensemble les avantages et inconvénients de la multitude des choix possibles, à chaque étage, afin de donner une carte utile pour s’y retrouver. N’en déplaise aux développeurs front, le concept d’architecture front dépasse de loin le choix de leur framework préféré !

1  sur  64
Télécharger pour lire hors ligne
1
Vous avez dit
architecture web ?
2
OCTO Part of Accenture © 2022 - All rights reserved
Pierrette Bertrand
pierrette.bertrand@octo.com
15 ans d’experience
8 ans chez OCTO Technology
Leader des équipes orientées
développement web
Experte en architecture front
Luxe, retail, divertissement
David Ostermann
david.ostermann@octo.com
22 ans d’experience
5 ans chez OCTO Technology
Expert en architecture front
Divertissement, agriculture, retail
Florian Leroy
florian.leroy@octo.com
10 ans d’experience
6 ans chez OCTO Technology
Expert en développement web front
Énergie & utilities, telecom & media,
divertissement
Qui sommes nous ?
3
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
Cabinet de conseil et réalisation IT
MÉTHODES
L’engagement forfaitaire
LE PRAGMATISME
NOS VALEURS
DE BEAUX SUCCÈS
TRANSFORMATION
L’EXCELLENCE
&
LE PLAISIR
Partage de
nos savoirs
DEPUIS 1998
DE DÉVELOPPEMENT
AGILE
4
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
Software Engineering
220 artisans du logiciel (développeurs, leaders techniques et
architectes) basés en France, principalement en IDF.
NOUS SOMMES UNE COMMUNAUTÉ D’ EXPERTS PASSIONNÉS PAR
LA TECHNOLOGIE
La garantie de délivrer rapidement vos produits stratégiques, et des produits
qui fonctionnent !
Un développement sur mesure « haute-couture » de produits d’une qualité
PREMIUM avec des architectures et technologies à l’état de l’art
En réalisant avec vous, nous élevons votre culture tech et vos façons de faire
4 ateliers d’experts pour soutenir votre transformation digitale
Product & Design
200 passionnés pour designer
vos produits numériques et les
rendre utiles, utilisables, utilisés
et économiquement viables
Cloud & Platform
130 experts cloud et infra
Data & IA
130 experts pour un usage
responsable de la DATA et de
l’IA
Notre organisation
5
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
Delivery de logiciels stratégiques
Notre engagement : Qualité PREMIUM / Logiciel qui fonctionne / T2M / Cost
efficient
Nos offres Modern Software Engineering & Architecture
Conseil en dev & architecture
Audit
Coaching
BAF
d’architecture
Due Diligence
(tech)
Ex nihilo (greenfield)
ou évolution de l’existant(brownfield)
Web Apps
à forte visibilité
Back-end
Monolith / API-First / Event driven
Mobiles Apps
natives / hybrides / PWA
Audit
de code
Coaching
Technos & trends
Coaching
Mobile-Web-API
Audit
de perf
Les leviers de croissance du delivery en 2024
Headless
« Break the Vendor Monolith »
Legacy Modernization
« Brownfield reprenez le
controle »
Accessibilité
Delivery distribué
Sécurité
OAuth2/OIDC
Des devs armés de
Gen AI
OCTO Talks - State of the art Architecture dans les frontend web
Publicité

Recommandé

Design Systems: Parts, Products & People
Design Systems: Parts, Products & PeopleDesign Systems: Parts, Products & People
Design Systems: Parts, Products & Peoplenathanacurtis
 
Le Comptoir OCTO - Accessibilité
Le Comptoir OCTO - Accessibilité Le Comptoir OCTO - Accessibilité
Le Comptoir OCTO - Accessibilité OCTO Technology
 
The Future of UX is here: AI and Cognitive Design
The Future of UX is here: AI and Cognitive DesignThe Future of UX is here: AI and Cognitive Design
The Future of UX is here: AI and Cognitive DesignJohn Whalen
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeMadhuri Garg
 
Introduction to Usability
Introduction to UsabilityIntroduction to Usability
Introduction to UsabilityGretchen Thomas
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and PrinciplesPeeyush Sahu CAPM®
 

Contenu connexe

Tendances

UX STRAT Online 2021 Presentation by Vikas Vaishnav Autodesk
UX STRAT Online 2021 Presentation by Vikas Vaishnav AutodeskUX STRAT Online 2021 Presentation by Vikas Vaishnav Autodesk
UX STRAT Online 2021 Presentation by Vikas Vaishnav AutodeskUX STRAT
 
Hawk Eye - The smart video surveillance system
Hawk Eye - The smart video surveillance systemHawk Eye - The smart video surveillance system
Hawk Eye - The smart video surveillance systemShahid Vadakkekad
 
Azure Custom Vision Best Practice using WeDX
Azure Custom Vision Best Practice using WeDXAzure Custom Vision Best Practice using WeDX
Azure Custom Vision Best Practice using WeDXJingun Jung
 
Introduction to Design Thinking and UX Research
Introduction to Design Thinking and UX ResearchIntroduction to Design Thinking and UX Research
Introduction to Design Thinking and UX ResearchMuhamad Edison A
 
UX & Color Blindness
UX & Color BlindnessUX & Color Blindness
UX & Color BlindnessDave Cooksey
 
assisting device for visually impaired person
assisting device for visually impaired personassisting device for visually impaired person
assisting device for visually impaired personPushpa Gothwal
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX IntroductionPhuong Hoang Vu
 
How We Work: UX Design at Navy Federal Credit Union
How We Work: UX Design at Navy Federal Credit UnionHow We Work: UX Design at Navy Federal Credit Union
How We Work: UX Design at Navy Federal Credit UnionMitch Hazam GSD
 
Human-Computer Interaction: An Overview
Human-Computer Interaction: An OverviewHuman-Computer Interaction: An Overview
Human-Computer Interaction: An OverviewSabin Buraga
 
Esperimenti sulle disuguaglianze di Bell - Dalle origini al crollo del realis...
Esperimenti sulle disuguaglianze di Bell - Dalle origini al crollo del realis...Esperimenti sulle disuguaglianze di Bell - Dalle origini al crollo del realis...
Esperimenti sulle disuguaglianze di Bell - Dalle origini al crollo del realis...Fausto Intilla
 

Tendances (20)

Ux design process
Ux design processUx design process
Ux design process
 
UX STRAT Online 2021 Presentation by Vikas Vaishnav Autodesk
UX STRAT Online 2021 Presentation by Vikas Vaishnav AutodeskUX STRAT Online 2021 Presentation by Vikas Vaishnav Autodesk
UX STRAT Online 2021 Presentation by Vikas Vaishnav Autodesk
 
Lean UX
Lean UX Lean UX
Lean UX
 
Hawk Eye - The smart video surveillance system
Hawk Eye - The smart video surveillance systemHawk Eye - The smart video surveillance system
Hawk Eye - The smart video surveillance system
 
Azure Custom Vision Best Practice using WeDX
Azure Custom Vision Best Practice using WeDXAzure Custom Vision Best Practice using WeDX
Azure Custom Vision Best Practice using WeDX
 
Introduction to Design Thinking and UX Research
Introduction to Design Thinking and UX ResearchIntroduction to Design Thinking and UX Research
Introduction to Design Thinking and UX Research
 
UX & Color Blindness
UX & Color BlindnessUX & Color Blindness
UX & Color Blindness
 
Design Systems
Design SystemsDesign Systems
Design Systems
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
assisting device for visually impaired person
assisting device for visually impaired personassisting device for visually impaired person
assisting device for visually impaired person
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction
 
C’est quoi l’UX -
C’est quoi l’UX -C’est quoi l’UX -
C’est quoi l’UX -
 
How We Work: UX Design at Navy Federal Credit Union
How We Work: UX Design at Navy Federal Credit UnionHow We Work: UX Design at Navy Federal Credit Union
How We Work: UX Design at Navy Federal Credit Union
 
UX Fundamentals for Beginners
UX Fundamentals for BeginnersUX Fundamentals for Beginners
UX Fundamentals for Beginners
 
UX Bootcamp
UX BootcampUX Bootcamp
UX Bootcamp
 
Ux design process
Ux design processUx design process
Ux design process
 
Human-Computer Interaction: An Overview
Human-Computer Interaction: An OverviewHuman-Computer Interaction: An Overview
Human-Computer Interaction: An Overview
 
Esperimenti sulle disuguaglianze di Bell - Dalle origini al crollo del realis...
Esperimenti sulle disuguaglianze di Bell - Dalle origini al crollo del realis...Esperimenti sulle disuguaglianze di Bell - Dalle origini al crollo del realis...
Esperimenti sulle disuguaglianze di Bell - Dalle origini al crollo del realis...
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
 
UX Design Process
UX Design ProcessUX Design Process
UX Design Process
 

Similaire à OCTO Talks - State of the art Architecture dans les frontend web

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
 
Le Lounge OCTO x Accenture - Offrir une expérience premium sur mobile
Le Lounge OCTO x Accenture - Offrir une expérience premium sur mobileLe Lounge OCTO x Accenture - Offrir une expérience premium sur mobile
Le Lounge OCTO x Accenture - Offrir une expérience premium sur mobileOCTO 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éveloppeursOCTO Technology
 
Le Comptoir OCTO - Data Science x RdvPermis
Le Comptoir OCTO - Data Science x RdvPermisLe Comptoir OCTO - Data Science x RdvPermis
Le Comptoir OCTO - Data Science x RdvPermisOCTO Technology
 
Accelerate : la vitesse conditionne l'excellence
Accelerate : la vitesse conditionne l'excellence Accelerate : la vitesse conditionne l'excellence
Accelerate : la vitesse conditionne l'excellence OCTO Technology
 
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
 
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...AudéLor
 
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
 
Améliorer le ROI de vos applications grâce à la démarche Design UX
Améliorer le ROI de vos applications grâce à la démarche Design UXAméliorer le ROI de vos applications grâce à la démarche Design UX
Améliorer le ROI de vos applications grâce à la démarche Design UXMicrosoft Ideas
 
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 ProduitOCTO Technology
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform MobileGabriel DUPONT
 
[Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 [Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 Niji
 
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 2013Charbel Abdo
 
La Duck Conf : "Observabilité"
La Duck Conf : "Observabilité"La Duck Conf : "Observabilité"
La Duck Conf : "Observabilité"OCTO Technology
 
Le Comptoir OCTO x Mobile App avec Share IT
Le Comptoir OCTO x Mobile App avec Share ITLe Comptoir OCTO x Mobile App avec Share IT
Le Comptoir OCTO x Mobile App avec Share ITOCTO Technology
 
Presentation inochi réalisations / développement - Accompagnateur Web
Presentation inochi réalisations / développement - Accompagnateur WebPresentation inochi réalisations / développement - Accompagnateur Web
Presentation inochi réalisations / développement - Accompagnateur WebINOCHI
 
[TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte![TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte!Alexandre Touret
 
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-Payment
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-PaymentOCTO Technologies - Mobile Monday Maroc: M-Banking & M-Payment
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-Paymentmmmaroc
 

Similaire à OCTO Talks - State of the art Architecture dans les frontend web (20)

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 ?"
 
Le Lounge OCTO x Accenture - Offrir une expérience premium sur mobile
Le Lounge OCTO x Accenture - Offrir une expérience premium sur mobileLe Lounge OCTO x Accenture - Offrir une expérience premium sur mobile
Le Lounge OCTO x Accenture - Offrir une expérience premium sur mobile
 
bb-d_ERGO-UX
bb-d_ERGO-UXbb-d_ERGO-UX
bb-d_ERGO-UX
 
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
 
Le Comptoir OCTO - Data Science x RdvPermis
Le Comptoir OCTO - Data Science x RdvPermisLe Comptoir OCTO - Data Science x RdvPermis
Le Comptoir OCTO - Data Science x RdvPermis
 
Accelerate : la vitesse conditionne l'excellence
Accelerate : la vitesse conditionne l'excellence Accelerate : la vitesse conditionne l'excellence
Accelerate : la vitesse conditionne l'excellence
 
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"
 
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
Le Design « centré-utilisateur » ou comment améliorer l’adéquation entre vos ...
 
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...
 
Améliorer le ROI de vos applications grâce à la démarche Design UX
Améliorer le ROI de vos applications grâce à la démarche Design UXAméliorer le ROI de vos applications grâce à la démarche Design UX
Améliorer le ROI de vos applications grâce à la démarche Design UX
 
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
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform Mobile
 
[Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 [Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210
 
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
 
La Duck Conf : "Observabilité"
La Duck Conf : "Observabilité"La Duck Conf : "Observabilité"
La Duck Conf : "Observabilité"
 
Le Comptoir OCTO x Mobile App avec Share IT
Le Comptoir OCTO x Mobile App avec Share ITLe Comptoir OCTO x Mobile App avec Share IT
Le Comptoir OCTO x Mobile App avec Share IT
 
Presentation inochi réalisations / développement - Accompagnateur Web
Presentation inochi réalisations / développement - Accompagnateur WebPresentation inochi réalisations / développement - Accompagnateur Web
Presentation inochi réalisations / développement - Accompagnateur Web
 
[TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte![TNT19] Hands on: Objectif Top Architecte!
[TNT19] Hands on: Objectif Top Architecte!
 
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-Payment
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-PaymentOCTO Technologies - Mobile Monday Maroc: M-Banking & M-Payment
OCTO Technologies - Mobile Monday Maroc: M-Banking & M-Payment
 

Plus de 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 TestOCTO 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
 
Comptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/LeaseplanComptoir OCTO ALD Automotive/Leaseplan
Comptoir OCTO ALD Automotive/LeaseplanOCTO 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-conceptionOCTO 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
 
RefCard Tests sur tous les fronts
RefCard Tests sur tous les frontsRefCard Tests sur tous les fronts
RefCard Tests sur tous les frontsOCTO Technology
 
RefCard RESTful API Design
RefCard RESTful API DesignRefCard RESTful API Design
RefCard RESTful API DesignOCTO Technology
 
RefCard API Architecture Strategy
RefCard API Architecture StrategyRefCard API Architecture Strategy
RefCard API Architecture StrategyOCTO Technology
 
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du green
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du greenLA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du green
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du greenOCTO Technology
 
LA DUCK CONF 2023 - Sous le capot du cloud souverain
LA DUCK CONF 2023 - Sous le capot du cloud souverainLA DUCK CONF 2023 - Sous le capot du cloud souverain
LA DUCK CONF 2023 - Sous le capot du cloud souverainOCTO Technology
 
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutiveLA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutiveOCTO Technology
 
LA DUCK CONF 2023 - Parce que nos plateformes le valent bien
LA DUCK CONF 2023 - Parce que nos plateformes le valent bienLA DUCK CONF 2023 - Parce que nos plateformes le valent bien
LA DUCK CONF 2023 - Parce que nos plateformes le valent bienOCTO Technology
 
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...OCTO Technology
 
LA DUCK CONF 2023 - Guide de survie du Change Data Capture
LA DUCK CONF 2023 - Guide de survie du Change Data CaptureLA DUCK CONF 2023 - Guide de survie du Change Data Capture
LA DUCK CONF 2023 - Guide de survie du Change Data CaptureOCTO Technology
 

Plus de OCTO Technology (20)

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...
 
RefCard Tests sur tous les fronts
RefCard Tests sur tous les frontsRefCard Tests sur tous les fronts
RefCard Tests sur tous les fronts
 
RefCard RESTful API Design
RefCard RESTful API DesignRefCard RESTful API Design
RefCard RESTful API Design
 
RefCard API Architecture Strategy
RefCard API Architecture StrategyRefCard API Architecture Strategy
RefCard API Architecture Strategy
 
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du green
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du greenLA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du green
LA DUCK CONF 2023 - Journal de bord d’un archi dans l’océan du green
 
LA DUCK CONF 2023 - Sous le capot du cloud souverain
LA DUCK CONF 2023 - Sous le capot du cloud souverainLA DUCK CONF 2023 - Sous le capot du cloud souverain
LA DUCK CONF 2023 - Sous le capot du cloud souverain
 
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutiveLA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
LA DUCK CONF 2023 - Ré-urbanisation d'un SI à travers une archi évolutive
 
LA DUCK CONF 2023 - Parce que nos plateformes le valent bien
LA DUCK CONF 2023 - Parce que nos plateformes le valent bienLA DUCK CONF 2023 - Parce que nos plateformes le valent bien
LA DUCK CONF 2023 - Parce que nos plateformes le valent bien
 
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...
LA DUCK CONF 2023 - Guider, faire, faire faire ? Une solitude partagée entre ...
 
LA DUCK CONF 2023 - Guide de survie du Change Data Capture
LA DUCK CONF 2023 - Guide de survie du Change Data CaptureLA DUCK CONF 2023 - Guide de survie du Change Data Capture
LA DUCK CONF 2023 - Guide de survie du Change Data Capture
 

OCTO Talks - State of the art Architecture dans les frontend web

  • 2. 2 OCTO Part of Accenture © 2022 - All rights reserved Pierrette Bertrand pierrette.bertrand@octo.com 15 ans d’experience 8 ans chez OCTO Technology Leader des équipes orientées développement web Experte en architecture front Luxe, retail, divertissement David Ostermann david.ostermann@octo.com 22 ans d’experience 5 ans chez OCTO Technology Expert en architecture front Divertissement, agriculture, retail Florian Leroy florian.leroy@octo.com 10 ans d’experience 6 ans chez OCTO Technology Expert en développement web front Énergie & utilities, telecom & media, divertissement Qui sommes nous ?
  • 3. 3 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Cabinet de conseil et réalisation IT MÉTHODES L’engagement forfaitaire LE PRAGMATISME NOS VALEURS DE BEAUX SUCCÈS TRANSFORMATION L’EXCELLENCE & LE PLAISIR Partage de nos savoirs DEPUIS 1998 DE DÉVELOPPEMENT AGILE
  • 4. 4 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Software Engineering 220 artisans du logiciel (développeurs, leaders techniques et architectes) basés en France, principalement en IDF. NOUS SOMMES UNE COMMUNAUTÉ D’ EXPERTS PASSIONNÉS PAR LA TECHNOLOGIE La garantie de délivrer rapidement vos produits stratégiques, et des produits qui fonctionnent ! Un développement sur mesure « haute-couture » de produits d’une qualité PREMIUM avec des architectures et technologies à l’état de l’art En réalisant avec vous, nous élevons votre culture tech et vos façons de faire 4 ateliers d’experts pour soutenir votre transformation digitale Product & Design 200 passionnés pour designer vos produits numériques et les rendre utiles, utilisables, utilisés et économiquement viables Cloud & Platform 130 experts cloud et infra Data & IA 130 experts pour un usage responsable de la DATA et de l’IA Notre organisation
  • 5. 5 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Delivery de logiciels stratégiques Notre engagement : Qualité PREMIUM / Logiciel qui fonctionne / T2M / Cost efficient Nos offres Modern Software Engineering & Architecture Conseil en dev & architecture Audit Coaching BAF d’architecture Due Diligence (tech) Ex nihilo (greenfield) ou évolution de l’existant(brownfield) Web Apps à forte visibilité Back-end Monolith / API-First / Event driven Mobiles Apps natives / hybrides / PWA Audit de code Coaching Technos & trends Coaching Mobile-Web-API Audit de perf Les leviers de croissance du delivery en 2024 Headless « Break the Vendor Monolith » Legacy Modernization « Brownfield reprenez le controle » Accessibilité Delivery distribué Sécurité OAuth2/OIDC Des devs armés de Gen AI
  • 7. 7 There is a better way OCTO Part of Accenture © 2023 - All rights reserved OCTO Talks Vous avez dit architecture front :nail_care: ? Du CSS au CDN, personne ne sera épargné ! Qu’est-ce qu’une architecture front ? Selon que vous demandiez à un intégrateur, un développeur frontend, un développeur d’API ou tout simplement, à un architecte, la réponse sera bien différente. Car selon notre expérience, ce dernier, n’a en réalité qu’une partie de la réponse. Dans ce talk, nous regarderons ensemble les avantages et inconvénients de la multitude des choix possibles, à chaque étage, afin de donner une carte utile pour s’y retrouver. ๏ A-t-on vraiment besoin d'un design system ? ๏ Comment faire un front parfaitement responsive quand les compétences front manquent dans son équipe ? ๏ Comment définit-t-on et mesure-t-on la performance web ? ๏ Et bien entendu, la question qui fâche... quel est le meilleur framework ? :smiling_imp: N’en déplaise aux développeurs front, le concept d’architecture front dépasse de loin le choix de leur framework préféré !
  • 8. 8 There is a better way OCTO Part of Accenture © 2023 - All rights reserved L’architecture web, autant de définitions que d’intervenants Architecte Dev back Dev front UI engineer
  • 9. 9 There is a better way OCTO Part of Accenture © 2023 - All rights reserved LA première question à se poser Quel est le produit ? Usage grand public ? Usage interne / privé ? Dans mon canapé, au bureau, en situation de mobilité ? Internationalisation ?
  • 10. 10 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Front-end dev is an UI engineer
  • 11. 11 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Les questions essentielles en terme d’UI L’application doit-elle être responsive ? Quels sont les enjeux en terme d’accessibilité ? Puis-je utiliser une lib d’UI pour accélerer ? L’UI de l’application est-elle destinée à être ré-utilisée ? 1 2 3 4
  • 12. 12 There is a better way OCTO Part of Accenture © 2023 - All rights reserved 2023, responsive VRAIMENT ??? Quels sont les contextes d’utilisation auxquels l’application doit répondre : ● Device ● Mobilité ● Préférences utilisateurs
  • 13. 13 There is a better way OCTO Part of Accenture © 2023 - All rights reserved L’accessibilité n’est pas une option On ne corrige pas l’accessibilité, on fabrique accessible Les outils : ● tests automatisés de validation du HTML ● 10 easy checks - tests manuels responsabilités de tous Quand on parle d’accessibilité, on parle des situations de handicap permanentes ET temporaires Où se joue l’accessibilité ? ● En développement pour 61% ● Dans le contenu pour 26% ● En UX-UI pour 13% Tous les nouveaux produits et services devront être accessibles au 28 juin 2025 directive européenne
  • 14. 14 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Utiliser une lib d’UI disponible ou pas ? Maintenabilité “Mais pourquoi chers dev front, vous refaites systématiquement tous les composants d’UI ???” N’importe quel directeur de mission, ou architecte Autonomie Maitrise des web perf Conformité d’accessibilité Lorsque l’UI s’écarte du standard, le dev front n’est pas assez armé pour challenger des composants spécifiques, il faut tordre la lib Dépendance au cycle de release de la lib (ie: vuetify avec vue 3) même pour une faille de sécurité Souvent, on tire toute la lib, ça pèse ! On fait un audit de la lib ? on leur ouvre des PR ?
  • 15. 15 There is a better way OCTO Part of Accenture © 2023 - All rights reserved L’UI de l’application est-elle destinée à être ré-utilisée ? UI KIT CODE DOC. DESIGN GUIDELINES COMPONENTS TECHNICAL SPECIFICATIONS DESIGN SYSTEM Design referential Shared & common documentation Development toolbox Un design system est un référentiel commun à tous ses acteurs (concepteurs, mainteneurs et ses consommateurs) : ● de standards ● de pratiques ● de composants graphiques et/ou techniques Introduire un DS présente beaucoup de bénéfices : ● Faciliter la collaboration ● Optimiser l’experience ● Renforcer l’efficience ● Améliorer la qualité
  • 16. 16 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Contributeurs ● Des processus clairs : snowflake / candidat au DS ? dreprecier ? ● Flexibilité pour apporter des évolutions ● Simplificité de la contribution ● Communication ● Amélioration continue Consommateurs ● L'expérience développeur : ressources accessibles de l’extérieur, documentation versionnée, pour le partage et l’adoption Commun ● Quelle solution technique ? localisation, couplage ● Le rangement, la structuration: principes communs, explicites et partagés (ie: design tokens, …) ● L’atomic design est-ce la solution adaptée ? Quelques points d’attention Un DS est vivant, c’est un produit qui évolue en fonction des besoins
  • 17. 17 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Ce qu’il faut retenir - un composant, ce n’est pas qu’un bout d’UI Il est mobile first, responsive, accessible et conforme à la maquette Il est compatible cross browsers, performant (voir sustainable), conforme aux standards de l’ équipe & composable Il est flexible : il s’adapte au contenu (longueur de texte, RTL), il porte du fonctionnel (gestion des états) il peut porter du SEO et/ou de l’analytics
  • 18. 18 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Front-end dev is a web app engineer
  • 19. 19 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Les questions essentielles en terme de dev front Quelle stratégie de rendering dois-je appliquer ? Quel est le meilleur framework front ? Comment vais-je gérer l’état de mon application ? 1 2 3
  • 20. 20 There is a better way OCTO Part of Accenture © 2023 - All rights reserved La première question à se poser, quels sont les besoins en… SEO Interactivité Tous les front n’ont pas d’enjeux SEO. Certaines applications web doivent être référencées par les moteurs de recherche, la page doit alors présenter : ● des données non visibles : title, description, hreflang, meta, … ● des web performances à l’état de l’art ⇒ Les enjeux SEO vont être structurants dans les choix techniques Pour soigner l’expérience ● des règles métiers peuvent être implémentées: ex. formulaires, vérifications de composition de panier, … ● des règles techniques s’ajoutent dans le front : ex. limiter le nombre d’éléments à télécharger lors de la navigation ⇒ C’est un standard du marché, un front de 2023 se doit de présenter une belle expérience
  • 21. 21 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Stratégies de rendering - version 2023 Où générer le HTML des pages de mon application ? L’application a-t-elle des enjeux SEO ? La page doit être générée côté serveur La page peut être générée côté client ⇒ Client Side Rendering (aka SPA) Les pages ou éléments de page sont générés au runtime dans le navigateur de l’utilisateur avec du javascript oui non ๏ Quelle est la volatilité des données ? ๏ Les backends fournisseurs sont-ils performants pour absorber un trafic de type web ? ๏ La page doit-elle être hautement disponible ? ⇒Static Server Generation Les pages ou éléments de page sont générées au build time. Ils peuvent être régénérées à la demande ou au runtime (ex. ISR) ⇒ Dynamic Server Rendering Les pages ou éléments de page sont générées au run time, à chaque nouvelle demande (ex. SSR) Les 3 types de rendu sur une même page avec un code unique, c’est possible ? OUI
  • 22. 22 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Le meilleur framework front, c’est… Celui qui n’est pas né hier Celui avec lequel vos équipes sont à l’aise aujourd’hui Celui qui sera encore là après demain
  • 23. 23 There is a better way OCTO Part of Accenture © 2023 - All rights reserved La vrai question est : dois-je partir avec une lib ou framework ? ● Conventions parfois trop rigide ● Liberté ● Effet rebond : rien n’est packagé Lib Framework VS Pour nous le choix est fait ! Ca sera les 2 svp :) Seulement et uniquement lorsque c’est adapté au produit, nous faisons le choix de partir avec React ❤, wrappé par un meta framework NextJS Notre R&D est autour de Remix en ce moment.
  • 24. 24 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Avant le state management, revenons aux fondamentaux du web L’URL : la pachamama du web ! L’état du front doit être piloté par l’URL afin de permettre d’accéder aux pages en deep link Pensez y dès le départ, c’est très compliqué à faire à postériori
  • 25. 25 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Store or not store ? Un store permet de stocker les données nécessaires à l’affichage pour les mettre à disposition de plusieurs composants d’UI Avantages : ● On gagne en structuration, le store est modélisé ● Le code est plus clair, et plus maintenable Points d’attention : ● L’état de l’UI ne doit être dans le store - le store est transient ● Les composants de haut niveau sont responsables de récupérer leurs données Avec un meta framework, ces questions ne se posent plus dans la plupart des cas Dispatcher Store View Action Action
  • 26. 26 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Store or not store ? Un store permet une gestion centralisé de l’état de l’application et de maîtriser le flux de données associées. Dans les stacks techniques classiques qu’on voit passer depuis des années, il y a souvent Redux, VueX, NgRx, etc… Dispatcher Store View Action Action En 2023, il est de bon ton de remettre en question ce choix par défaut, Pourquoi ? ● Des applications trop complexes ● Des dérives dans les usages ● Un couplage fort à une dépendance Avec un meta framework, ces questions ne se posent plus dans la plupart des cas Avantages : ● On gagne en structuration, le store est modélisé ● Le code est plus clair, et plus maintenable Points d’attention : ● L’état de l’UI ne doit être dans le store - le store est transient ● Les composants de haut niveau sont responsables de récupérer leurs données
  • 27. 27 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Ce qu’il faut retenir - les choix techniques servent le besoin Framework ou lib “de base” ie: React, Angular, Vue, Svelte… Meta framework + lib “de base” ie: Next, Nuxt, Remix, … “Client-side app” Interactions complexes, usages recurrents Application grand public où l’on ne maîtrise pas les conditions d’usage (devices, network) Dans tous les cas : ● L’URL porte l’état de l’application, chaque page est atteignable en deep link ● L’état de l’UI n’est pas piloté par le store
  • 28. 28 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Front-end dev is a back-end dev
  • 29. 29 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Les questions essentielles en terme de dev back Qui est responsable de la récupération et de l’orchestration des données que le front doit afficher ? Comment vais-je pouvoir offrir des web performances à l’ état de l’art ? 1 2
  • 30. 30 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Comment vais-je pouvoir récupérer les données à afficher ? API métier Backend For Frontend - BFF ● Equipe interne ● Dépendances gérables ● Résilience face au trafic web ● Très générique / granularité non adaptée ● Besoins en agrégation / transformation ● Douleurs au niveau de l’API (built-in, équipe surchargée, …) Représente une nouvelle surface d’attaque Génère des coûts de build et de run ! Différents pattern API sont activables ici, mais c’est un autre talk :) REST ou GraphQL, c’est aussi un autre talk :) Backend API métier BFF
  • 31. 31 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Comment mesure-t-on le web ? Historiquement, la webperf a été conçue par des ingénieurs : ● Time To First Byte ● Total Blocking Time ● First Contentful Paint ● Largest Contentful Paint ● Speed index ● … La webperf est devenu un critère pour objectiver les équipes Mais la web perf dans cette définition était : ● Peu accessible pour les novices ● Peu représentative de l’expérience utilisateur Largest Contentful Paint Mesure le temps de chargement de tout ce qui est au dessus de la ligne de flottaison Un bon LCP est < 2,5s First Input Delay Mesure le temps entre une interaction utilisateur et une réaction de l’UI Un bon FID est < 100 ms Cumulative Layout Shift Mesure la fréquence et la magnitude des “sauts” d’une page Un bon CLS est < 0.1 Chargement Interactivité Stabilité visuelle
  • 32. 32 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Ce qu’il faut retenir, pour soigner la webperf et le Time To Market Designer l’architecture sous jacente (API métier vs BFF) en pesant les avantages / inconvénients de tous les uses cases d’affichage La webperf est un must have, elle est vivante, il faut toujours surveiller le run time ! Avant de prendre n’importe quelle décision d’architecture (ie: caching), il faut MESURER l'expérience avec les core web vitals
  • 33. 33 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Front-end dev is a devOps & a support team member
  • 34. 34 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Les questions essentielles en terme de devOps Tout ce qu’il se passe dans le navigateur, reste dans le navigateur - vous êtes aveugles - que se passe-t-il en prod ? Quelques bonus 1 2
  • 35. 35 There is a better way OCTO Part of Accenture © 2023 - All rights reserved L'architecture offre les moyens de savoir ce qu’il se passe ! Backend API BFF Site web Traditionnellement très bien observé, avec les métriques, les logs, les traces, … avec toute la stack nécessaire Serveur Rarement mise en place dès le départ, c’est quand le call center explose ou que les ventes dégringolent qu’on décide d’agir Navigateur L’observabilité, c’est un unique lieu (APM) pour déverser toutes les métriques, logs et traces d’une architecture dont le FRONT :) Nous recommandons de commencer avec des choses simples, et de monitorer les usages métiers
  • 36. 36 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Ce que nous apprend l’expérience Faire des choix d’architecture technique : ie introduire un CDN en Chine Le RUM Améliorer l’UX ou UI à partir de métriques d’usage C’est là que commence l’AGILE ! L’expérience avec l’analytics et l’AB Testing Voir les erreurs des navigateurs, le nombre d’appels API : les boucles, les appels en double, les fuites mémoires, … Corréler les situations front et API pour résoudre des bugs Anticiper les situations délicates Le comportement avec les logs
  • 37. 37 There is a better way OCTO Part of Accenture © 2023 - All rights reserved On aimerait aussi partager autour De traçabilité Automatiser la génération de change log et release note avec le semantic versioning et le conventional commit Avec des questions liées au versionning d'un DS De feature flipping Sécuriser le déploiement de code en désactivant à chaud une fonctionnalité De stratégie de caching Quel TTL pour quelle typologie de page ? Cacher les assets ? Cacher les resources ? Quelle stratégie d’invalidation de cache associée ? D’expérience développeur Disposer d’une vue 360 des éléments avec lesquels un développeur peut interagir pour être efficient
  • 38. 38 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Ce qu’il faut retenir, nos convictions pour une architecture front qui rocks en production Faire intervenir les équipes de build sur le run & mettre en production aussi vite que possible Anticiper l’observabilité du front sur toutes ces facettes Our driver : No brainer ! Offrir la traçabilité day 1 Soigner l'expérience développeur
  • 39. 39 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Front-end dev is a part of the whole organization
  • 40. 40 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Component teams, features team, impact teams ?? Components Teams Back Back Back Back Features Teams Impact Teams Front Front Front Back Back Back Back FT FT FT Front Front Front Front Front Front Back Back Back Back CT CT CT CT CT I T CT La solution adaptée au produit et aux équipes en place est souvent un mélange de ces typologies
  • 41. 41 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Et si on appliquait le pattern component à l’orga ? 1/2 Qu’est-ce qu’un micro front ? Un artefact front indépendant : en terme de cycle de vie, qui couvre domaine métier ciblé ● Un temps significatif est utilisé pour trancher des sujets d'architecture ou se synchroniser pour déployer ● La montée en compétence est conséquente sur le front ● Le code souffre d’un manque ownership Lister les douleurs liées à l’application web monolithique 1 2 outils clés du DDD : ● Event storming : visualiser les évènements liés aux processus métiers ● Bounded Context : isoler les problématiques métiers Isoler les domaines métiers 2 Les questions (Lucas Mezzalira) : ● Découpage horizontal ? Vertical ? ● Où aura lieu d’assemblage ? ● Comment va être gérée la navigation ? ● Comment faire communiquer 2 micro front ? Concevoir le micro front 3
  • 42. 42 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Et si on appliquait le pattern component à l’orga ? 2/2 Attention Le micro-front n’est pas un objectif, le but est de résoudre les douleurs de l’équipe web : gagner en agilité, en résilience et en souplesse de construction et de réalisation Nous déconseillons d’introduire un micro front lors du démarrage d’un projet C’est une piste à explorer dans le cadre d’une refonte d’interface incrémentale et itérative en double run 2 points clés : ● l’Isolation et le découpage par domaines fonctionnels ● la consistance de l’UI
  • 43. 43 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Côté DS ? Plusieurs organisations possibles Quelque soit l’organisation que vous mettez en place, il faut veiller à l’adoption du DS, viser la simplicité de la gestion des dépendances (roadmap et techniques), fluidifier la communication autour du DS, asseoir la gouvernance du DS de manière très explicite Modèle fédéré Modèle centralisé Regroupement en provenance de plusieurs équipes Équipe dédiée en component team
  • 44. 44 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Ce qu’il faut retenir, co-construire les équipes avec ceux qui les composent ! Vos outils pour être à l’écoute : ● Atelier fiertés - douleurs ● Event Storming ● Bounded Context La gouvernance & des processus CRYSTAL CLEAR
  • 45. 45 There is a better way OCTO Part of Accenture © 2023 - All rights reserved conclusion
  • 46. 46 46 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Le front est la face visible de l’iceberg, il catalyse toutes les questions Le front est un écosystème complexe et mouvant Un dernier conseil : ● Partez du besoin pour dessiner une solution plus ou moins complexe ou coûteuse ● Challengez le besoin : est-ce qu’une simple page HTML ne serait pas suffisante ? #eco-conception Un dev front a une vue 360 ● Cherchez l’équilibre, et visez l’amélioration constante ● Faites un front adaptatif, sur un socle solide, pour embrasser les changements de l’écosystème ● Ne foncez pas tête baissée dans la nouveauté Le mot de la fin
  • 47. 47 There is a better way OCTO Part of Accenture © 2023 - All rights reserved
  • 48. 48 There is a better way OCTO Part of Accenture © 2023 - All rights reserved
  • 49. 49 There is a better way OCTO Part of Accenture © 2023 - All rights reserved annexe
  • 50. 50 There is a better way OCTO Part of Accenture © 2023 - All rights reserved OCTO Talks Version précédente Vous avez dit architecture front 💄 ? Du CSS au CDN, personne ne sera épargné ! Qu’est-ce qu’une architecture front ? Selon que vous demandiez à un intégrateur, un développeur frontend, un développeur d’API ou tout simplement, à un architecte, la réponse sera bien différente. Car selon notre expérience, ce dernier, n’a en réalité qu’une partie de la réponse. Dans ce talk, nous regarderons ensemble les avantages et inconvénients de la multitude des choix possibles, à chaque étage, afin de donner une carte utile pour s’y retrouver. N’en déplaise aux développeurs front, le concept d’architecture front dépasse de loin le choix de leur framework préféré !
  • 51. 51 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Notre réponse utility first (et non utility only) Bootstrap et Material proposent des classes dans ce sens déjà (mais c'est lourd si c'est pour juste utiliser ça), Tailwind fonctionne mieux. A combiner avec du code custom.
  • 52. 52 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Les solutions de DS DS co localisé Design system délocalisé couplé Design system délocalisé découplé Le DS est implémenté au plus proche du code de(s) l’application(s), dans le langage du code applicatif Un changement d’UI est synchrone avec l’application, le feedback est direct en cas de regression Le DS est implémenté dans un repository dédié, dans le même langage que l’application, pour être mis à disposition aux consommateurs C’est une formalisation en framework (ie: Bootstrap) ou web components Le DS est implémenté dans un repository dédié, en HTML-CSS, pour être mis à disposition aux consommateurs C’est une formalisation en librairie de composants, le style peut directement être appliqué via les classes css publiées Solution adaptée à un produit unique Solution lorsqu’on a plusieurs produits qui utilisent la même UI Stack technique Uniformité de la stack technique liée à l’UI Hétérogénéité de la stack, peut nécessiter un portage dans la stack du front consommateur Complexité Build versionné et publié, les updates doivent être managé par la CI ou manuellement ce qui induite de la complexité (gestion des dépendances, des bump de versions, des files d’attentes dans la CI, …) Ré-utilisation Impossible pour un autre dépôt de code Possible sur toutes les applications ayant la même stack technique Possible sur toutes les applications
  • 53. 53 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Rendering strategies Server side Client Side Static generation Dynamic generation Strategy Static Site Generation - SSG Incremental Site Regeneration - ISR Server Side Rendering - SSR Client Side Rendering - CSR Definition ● Generation at build time ● Same page for all users ● Generation at run time according to a timer / event ● Once generated, same page is served to every users ● Generation at run time on user’s demand ● Once generated, same page is served to every users according to CDN config ● Generation at run time in user’s browser ● Each user has to generate its own page SEO 🟢 🟢 🟢 🔴 Web perf 🟢 🟢 🟠 🟠 TTL config 🟢 🟢 🟠 🟢 Page regen 🔴 🟢 🟢 🟢 Eco impact 🟢 🟢 🟠 🔴 Data type “Dead data” “Dynamic data” “Dynamic data” “Dynamic data” Usage Core pages which always has to be ready to be displayed with heavy traffic and no content updates Core pages which always has to be ready to be displayed with frequent content updates Non core pages, pages with less traffic and less challenges on SEO Pages where user interactions takes places as wishlist pages, checkout pages, order pages, authenticated pages ...
  • 54. 54 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Zoom on back and forward cache strategy Navigation management Server side Client Side Back and forward cache Client side navigation Definition When user goes from page A to page B, full back and forth with the server (CDN first) to reload the full page When user goes from page A to page B, only necessary data are fetch from the server, to reload only necessary UI elements in page + ● Improve core web vitals (performances) ● Allow to avoid local hydrate for web pages ● Supported by major browsers ● Most used technology by front end developers - ● blabla ● Not adapted for SEO ● Intelligent code to manage deep linking ● Bundle optimizations to tackle performances issues Tips : Open chrome dev tools, on “Application tab”, in left column, there is a Back/forward cache entry as ette ux y
  • 55. 55 There is a better way OCTO Part of Accenture © 2022 - All rights reserved Headless developer is a software engineer following acceptance criteria, wireframe including accessibility, web performances She writes the code software engineer anytime a software engineer suggest a improvement it comes with an alternative proposal in terms for US splitting, eco impact, interface contract design, team flow, team organization,... She is a force of proposal including unit and integration automated tests, she improve the readme, the contributing files and the confluence pages if necessary She writes the documentation focus to empty the kanban board before to move to the next subject means that she is doing peer reviews, pair programming, mob programming, … She is applying the best practices using the tool set deployed, she will alert about the impact on the eco-budget and make alternative proposal to reduce the impact She challenges the US 3 amigos with the DA, community practices, animates demo, facilitates retrospectives, gardening rituals, technical scoping… She can run meetings
  • 56. 56 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Comment fonctionnent les stratégies de rendering ? Rendering Engine 1 - Get HP C D N 2 - HP HTML Quand la page est prête, invalidation du cache Rendering Engine C D N Rendering Engine 1 - Get HP C D N 2 - Blank HTML, js 3 - Le navigateur parse et exécute le javascript pour générer l’UI (ce qui peut nécessiter des appels HTTP additionnels pour récupérer des informations business) Server side Client side ISR & SSG SSR 1 - Get HP 4 - HP HTML 2 - Get HP 3 - HP HTML Quand la page n’est pas en cache
  • 57. 57 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Améliorer la web perf Equilibre entre améliorer LCP et FTI vs CLS A améliorer
  • 58. 58 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Component teams, features team, impact teams ?? Components Teams Back Back Back Back Features Teams Impact Teams Front Front Front Back Back Back Back FT FT FT Front Front Front Front Front Front Back Back Back Back CT CT CT CT CT I T CT Technical autonomy, technical and functional ownership, easy upscale,... Mastery of the technical breakdown, local vs. global prioritization, firm contexts, transverse sharing developed (UX, code practice, tech, functional consistency), down-scale difficult, … Clear scope (1 component = 1 team), strong global consistency, technical ownership,... Fine global planning, scoping depth, rigidity, less team involvement, increased TTM, team staffing TTM reduction, adaptability, autonomy, technical practice sharing, functional ownership,... Change management, CI implementation, definition of contexts, global coherence, organized and frequent mercato, transverse staffing, strong rules around collaboration A voir si on garde
  • 59. 59 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Qu’est-ce qu’un meta framework ? Léo, je pense qu’on leur doit une page :)
  • 60. 60 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Plusieurs typologies de dev front : UI centric - Ui Engenieur et celui porté sur l’archi & les fwk CSS tricks : https://css-tricks.com/the-great-divide/
  • 61. 61 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Pourquoi le web est lent by design ? Calculs Vitesse = distance / temps Bcp de rq courtes Opposé de TCP Résoudre via des optims HTTP2,3… Le problème c’est le transport Anatomie d’une RQ HTTP Tous les éléments sont loins Charger en //, cascade de spinner A améliorer
  • 62. 62 There is a better way OCTO Part of Accenture © 2023 - All rights reserved Vaut-il mieux exposer du REST ou du GraphQL ?
  • 63. 63 There is a better way OCTO Part of Accenture © 2023 - All rights reserved C’est bon, on peut livrer ?? Les tests sont verts ✅ La code review est done ✅ Les gates de qualité ont été vérifiées (sonar, lighthouse,...) ✅ Le PO a donné son go ✅ Le code est rebased et merged ✅ Attend ! Au fait ??? On livre quoi là ????
  • 64. 64 There is a better way OCTO Part of Accenture © 2023 - All rights reserved La traçabilité c’est la vie ! 1 . 3 . 2 Majeure Changement non rétro-compatible Mineure Nouvelle fonctionnalité Patch Correction de défauts fix: … feat: … feat!: … SemVer pour Semantic Versioning ⇒ Donner un sens aux numéros des versions, en classant les changements apportés en trois catégories Conventional Commit ⇒ Ecrire des messages de commit propres, pour créer un historique explicite et automatisable (change log et releases notes) Les questions spécifiques au DS Comment versionner un DS ? toute la lib ? seulement les éléments basiques, chaque composant ?