SlideShare une entreprise Scribd logo
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
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
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
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
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
Front-end dev is an
UI engineer
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
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
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
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
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
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
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
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
Front-end dev is a
web app engineer
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
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
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
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
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
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
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
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
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
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
Front-end dev is a
back-end dev
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
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
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
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
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
Front-end dev is a devOps
& a support team member
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
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
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
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
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
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
Front-end dev is a part of
the whole organization
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
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
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
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
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
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
conclusion
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
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
48
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
49
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
annexe
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
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
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
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
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
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
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
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
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
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
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
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
There
is
a
better
way
OCTO Part of Accenture © 2023 - All rights reserved
Vaut-il mieux exposer du REST ou du GraphQL ?
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
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 ?

Contenu connexe

Tendances

Digital Euro: Implications for the Financial System
Digital Euro: Implications for the Financial SystemDigital Euro: Implications for the Financial System
Digital Euro: Implications for the Financial Systemaccenture
 
IELTS TOEFL ESSAY WRITING.pdf
IELTS TOEFL ESSAY WRITING.pdfIELTS TOEFL ESSAY WRITING.pdf
IELTS TOEFL ESSAY WRITING.pdfahileshhrvatsalya
 
The Industrialist: Trends & Innovations - June 2023
The Industrialist: Trends & Innovations - June 2023The Industrialist: Trends & Innovations - June 2023
The Industrialist: Trends & Innovations - June 2023accenture
 
Accenture Technology Vision 2012
Accenture Technology Vision 2012Accenture Technology Vision 2012
Accenture Technology Vision 2012Lars Kamp
 
Cloud Native Apps with GitOps
Cloud Native Apps with GitOps Cloud Native Apps with GitOps
Cloud Native Apps with GitOps Weaveworks
 
Cluster-as-code. The Many Ways towards Kubernetes
Cluster-as-code. The Many Ways towards KubernetesCluster-as-code. The Many Ways towards Kubernetes
Cluster-as-code. The Many Ways towards KubernetesQAware GmbH
 
CI/CD Best Practices for Your DevOps Journey
CI/CD Best  Practices for Your DevOps JourneyCI/CD Best  Practices for Your DevOps Journey
CI/CD Best Practices for Your DevOps JourneyDevOps.com
 
Distributed Tracing for Kafka with OpenTelemetry with Daniel Kim | Kafka Summ...
Distributed Tracing for Kafka with OpenTelemetry with Daniel Kim | Kafka Summ...Distributed Tracing for Kafka with OpenTelemetry with Daniel Kim | Kafka Summ...
Distributed Tracing for Kafka with OpenTelemetry with Daniel Kim | Kafka Summ...HostedbyConfluent
 
WTF is GitOps and Why You Should Care?
WTF is GitOps and Why You Should Care?WTF is GitOps and Why You Should Care?
WTF is GitOps and Why You Should Care?Weaveworks
 
Tracing 2000+ polyglot microservices at Uber with Jaeger and OpenTracing
Tracing 2000+ polyglot microservices at Uber with Jaeger and OpenTracingTracing 2000+ polyglot microservices at Uber with Jaeger and OpenTracing
Tracing 2000+ polyglot microservices at Uber with Jaeger and OpenTracingYuri Shkuro
 
Digitaizing Business Services
Digitaizing Business ServicesDigitaizing Business Services
Digitaizing Business Servicesaccenture
 
Six Signs You Need Platform Engineering
Six Signs You Need Platform EngineeringSix Signs You Need Platform Engineering
Six Signs You Need Platform EngineeringWeaveworks
 
OpenTelemetry Introduction
OpenTelemetry Introduction OpenTelemetry Introduction
OpenTelemetry Introduction DimitrisFinas1
 
Observability - Stockholm Splunk UG Jan 19 2023.pptx
Observability - Stockholm Splunk UG Jan 19 2023.pptxObservability - Stockholm Splunk UG Jan 19 2023.pptx
Observability - Stockholm Splunk UG Jan 19 2023.pptxMagnus Johansson
 

Tendances (20)

Digital Euro: Implications for the Financial System
Digital Euro: Implications for the Financial SystemDigital Euro: Implications for the Financial System
Digital Euro: Implications for the Financial System
 
IELTS TOEFL ESSAY WRITING.pdf
IELTS TOEFL ESSAY WRITING.pdfIELTS TOEFL ESSAY WRITING.pdf
IELTS TOEFL ESSAY WRITING.pdf
 
Barco Business Case
Barco Business Case Barco Business Case
Barco Business Case
 
Welcome to Azure DevOps
Welcome to Azure DevOpsWelcome to Azure DevOps
Welcome to Azure DevOps
 
The Industrialist: Trends & Innovations - June 2023
The Industrialist: Trends & Innovations - June 2023The Industrialist: Trends & Innovations - June 2023
The Industrialist: Trends & Innovations - June 2023
 
Accenture Technology Vision 2012
Accenture Technology Vision 2012Accenture Technology Vision 2012
Accenture Technology Vision 2012
 
Cloud Native Apps with GitOps
Cloud Native Apps with GitOps Cloud Native Apps with GitOps
Cloud Native Apps with GitOps
 
Cluster-as-code. The Many Ways towards Kubernetes
Cluster-as-code. The Many Ways towards KubernetesCluster-as-code. The Many Ways towards Kubernetes
Cluster-as-code. The Many Ways towards Kubernetes
 
Observability & Datadog
Observability & DatadogObservability & Datadog
Observability & Datadog
 
CI/CD Best Practices for Your DevOps Journey
CI/CD Best  Practices for Your DevOps JourneyCI/CD Best  Practices for Your DevOps Journey
CI/CD Best Practices for Your DevOps Journey
 
Distributed Tracing for Kafka with OpenTelemetry with Daniel Kim | Kafka Summ...
Distributed Tracing for Kafka with OpenTelemetry with Daniel Kim | Kafka Summ...Distributed Tracing for Kafka with OpenTelemetry with Daniel Kim | Kafka Summ...
Distributed Tracing for Kafka with OpenTelemetry with Daniel Kim | Kafka Summ...
 
WTF is GitOps and Why You Should Care?
WTF is GitOps and Why You Should Care?WTF is GitOps and Why You Should Care?
WTF is GitOps and Why You Should Care?
 
DevOps introduction
DevOps introductionDevOps introduction
DevOps introduction
 
Online casino
Online casinoOnline casino
Online casino
 
Tracing 2000+ polyglot microservices at Uber with Jaeger and OpenTracing
Tracing 2000+ polyglot microservices at Uber with Jaeger and OpenTracingTracing 2000+ polyglot microservices at Uber with Jaeger and OpenTracing
Tracing 2000+ polyglot microservices at Uber with Jaeger and OpenTracing
 
Digitaizing Business Services
Digitaizing Business ServicesDigitaizing Business Services
Digitaizing Business Services
 
7 Steps to Reduce DSO & Improve Cash Flow?
7 Steps to Reduce DSO & Improve Cash Flow?7 Steps to Reduce DSO & Improve Cash Flow?
7 Steps to Reduce DSO & Improve Cash Flow?
 
Six Signs You Need Platform Engineering
Six Signs You Need Platform EngineeringSix Signs You Need Platform Engineering
Six Signs You Need Platform Engineering
 
OpenTelemetry Introduction
OpenTelemetry Introduction OpenTelemetry Introduction
OpenTelemetry Introduction
 
Observability - Stockholm Splunk UG Jan 19 2023.pptx
Observability - Stockholm Splunk UG Jan 19 2023.pptxObservability - Stockholm Splunk UG Jan 19 2023.pptx
Observability - Stockholm Splunk UG Jan 19 2023.pptx
 

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

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 cloudOCTO 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 - 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
 

Plus de OCTO Technology (20)

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 - 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
 

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
  • 6.
  • 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 ?