INGÉNIERIE COMPOSABLE COMMERCE
Commerce Headless
Performance, flexibilité et ownership maximaux grâce à Hydrogen, Remix, Next.js + architecture composable MACH — un système d'exploitation commerce moderne qui découple le frontend du backend.
Le headless n'est plus « séparer le frontend » ; il s'agit désormais d'une opération composable fondée sur les principes MACH (Microservices + API-first + Cloud-native + Headless), où frontend + commerce engine + CMS + search + payment + identity sont choisis best-in-class et composés à l'edge.
L'e-commerce 2026 subit trois pressions : les systèmes de thèmes monolithiques ont atteint leurs limites de vitesse et de flexibilité, l'edge runtime (Cloudflare Workers, Vercel Edge, Shopify Oxygen) est devenu la couche de distribution principale, et les React Server Components + streaming SSR ont fait passer le TTFB de plusieurs secondes à quelques centaines de millisecondes. La plupart des marques croient encore que « Hydrogen = uniquement Shopify » et n'évaluent pas des stacks composables comme commercetools / BigCommerce / Saleor + Next.js + Sanity / Contentful + Algolia. L'opération headless de Roibase repose sur six principes.
MÉTHODOLOGIE
Opération composable commerce sur 6 couches
Assess → Architect → Compose → Migrate → Launch → Observe. Chaque couche est livrée avec deliverable + ADR + SLA.
01
ASSESS
Évaluation du stack existant (monolithe/thèmes, apps, CDN), baseline de performance, risque SEO, coût opérationnel, capacité de l'équipe.
02
ARCHITECT
Architecture MACH, shortlist de vendors (engine/CMS/search/payment/identity), stratégie edge, documents ADR, RFP + POC.
03
COMPOSE
Framework (Hydrogen / Next.js), intégration du backend composable, GraphQL gateway, event bus (webhook + queue), feature flag.
04
MIGRATE
ETL de données (catalogue/client/commande/contenu), mapping 301 + hreflang + sitemap, parité staging, smoke test feature-complete.
05
LAUNCH
Canary rollout, lancement via feature flag, RUM + Sentry, stress test BFCM-ready, on-call week-end + war room.
06
OBSERVE
Suivi SLO/SLI, QBR de performance mensuelle, monitoring du rang SEO, revue des coûts, mise à jour des ADR, runbook + formation + handoff.
— COMPARAISON
Thème monolithique vs headless template-only vs composable commerce Roibase
Différences entre les trois approches en matière de performance, flexibilité, vendor lock-in, SEO et TCO.
| Dimension | Thème monolithique | Headless template-only | Composable commerce Roibase |
|---|---|---|---|
| Architecture | Monolithe unique | Template + backend unique | MACH + composable + edge |
| Flexibilité vendor | Platform lock-in | Engine lock-in | Choix best-of-breed (chaque couche) |
| Edge runtime | Absent | Partiel | CF Workers / Vercel Edge / Oxygen |
| Performance (LCP) | 2.5-4.5s | 2.0-2.8s | < 1.5s baseline + RUM |
| Contenu + CMS | CMS de la plateforme (limité) | CMS unique | Sanity/Contentful/Storyblok best-fit |
| Search | Search natif | Elasticsearch/Algolia débutant | Algolia/Typesense/Coveo + AI relevance |
| SEO | Dépendant du thème | SPA risqué | Ingénierie SSR + schema + 301 + hreflang |
| TCO au 24e mois | Faible mais dette technique | Moyen + risque vendor unique | Moyen + ownership + flexibilité + rapidité |
PROOF
Outcomes, measured
Mobile 75e percentile ; après migration headless + edge runtime.
Moyenne sur 6 mois après performance + streaming SSR + edge cache.
Au 12e mois après préservation SEO + schema + hreflang + Core Web Vitals au vert.
CDN mondial Cloudflare Workers / Vercel Edge / Shopify Oxygen.
Après stratégie ISR + partial prerendering + edge cache.
Engine + CMS + search + identity — chacune itérable séparément.
WHAT WE DO
Engagement scope
Every offering is an outcome-based work package. Roibase blends strategy and execution inside a single team — no hand-offs.
Shopify Hydrogen + Oxygen
React Server Components + Remix + streaming SSR + déploiement edge (Oxygen) ; Storefront API + Customer Account API + Shopify CDN.
Next.js + App Router + RSC
Server components + streaming + partial prerendering (Next 15) + Turbopack ; déploiement Vercel Edge + ISR + SWR.
Moteur de commerce composable
commercetools / Saleor / BigCommerce / Shopify Storefront API ; choix du moteur best-fit + GraphQL + webhook + flux event-driven.
Intégration de CMS headless
Sanity, Contentful, Storyblok, Hygraph, Strapi ; modèle de contenu, preview mode, workflow éditorial + live preview.
Search + merchandising
Algolia / Typesense / Coveo / MeiliSearch ; instant search, federated search, AI relevance tuning, règles de merchandising.
Edge caching + ISR + SWR
Cloudflare Workers + KV/R2 / Vercel Edge / Oxygen ; stale-while-revalidate, incremental static regeneration, edge middleware.
Ingénierie Core Web Vitals
Budget LCP < 1.5s / INP < 200ms / CLS < 0.05 ; font preload + optimisation d'images + critical CSS + bundle splitting + RUM.
Identity + payment + subscription
Auth0 / Clerk / Supabase Auth + Stripe / Adyen + Recharge / Bold ; passkey + SCA + 3DS2 + Apple/Google Pay.
Playbook de migration
De Magento / WooCommerce / legacy Shopify / BigCommerce vers le headless ; mapping 301, parité fonctionnelle, staging/canary, week-end de go-live.
A/B + feature flags + observabilité
GrowthBook / Statsig / LaunchDarkly + Sentry / Datadog + OpenTelemetry ; canary rollout + rollback + arbre de métriques SLO/SLI.
— BÉNÉFICES
La transformation concrète de votre infrastructure commerce
Quand edge runtime + composable + performance + préservation SEO + observabilité sont intégrés, le ROI ne dépend plus d'une seule métrique.
La vitesse augmente spectaculairement
Avec streaming SSR + edge runtime + RSC, le LCP est plus que réduit de moitié ; la conversion mobile et les Core Web Vitals passent au vert.
La conversion grandit
Avec la vitesse + la personnalisation + une UX plus flexible, le drop du funnel diminue et le taux d'abandon de panier baisse.
Le rang SEO se préserve et progresse
Grâce à l'ingénierie SSR + schema.org + 301 + hreflang + sitemap, le creux de migration dure 2-3 semaines, suivi d'une progression du rang.
La flexibilité vendor s'ouvre
Engine / CMS / search / identity sont remplaçables à chaque couche ; le vendor lock-in et la pression tarifaire annuelle diminuent.
La vélocité produit augmente
Avec feature flag + canary + ISR, les nouvelles fonctionnalités se déploient par heure plutôt que par jour ; la vitesse d'expérimentation augmente.
Les coûts opérationnels baissent
Les apps patchées sur le monolithe sont remplacées par des services composables ; l'edge cache réduit la charge origin et optimise le coût d'infra.
LIVRABLES
Ce que vous recevez à chaque engagement headless
Liste fixe de livrables dans le pack setup + 6 mois d'opération ; aucune surprise de facturation additionnelle.
Rapport de faisabilité headless + ROI
Audit du stack existant, modèle TCO, baseline de performance, risque SEO, capacité équipe ; 50-80 pages.
Architecture MACH + documents ADR
Décisions vendors engine + CMS + search + payment + identity + edge + CI/CD, chacune justifiée par un ADR.
Choix de framework + POC
Matrice de décision Hydrogen / Next.js / Remix / Nuxt + POC de 2-3 semaines + rapport de benchmark performance.
Mise en place du backend composable
Intégration commercetools / Saleor / BC / Shopify Storefront API + GraphQL gateway + webhook + event bus.
Schéma du CMS headless
Modèle de contenu Sanity / Contentful / Storyblok, preview mode, workflow éditorial + live preview.
Search + merchandising
Mise en place Algolia / Typesense / Coveo + schéma d'index + AI relevance tuning + règles de merchandising.
Edge runtime + stratégie de cache
Déploiement Cloudflare Workers / Vercel Edge / Oxygen + KV/R2 + ISR + SWR + edge middleware.
Identity + payment + subscription
Intégration Auth0 / Clerk / Supabase Auth + Stripe / Adyen + passkey + SCA + flow conforme 3DS2.
Pack de préservation SEO
Mapping 301, canonical, schema.org, hreflang, sitemap, robots, ITA (International Targeting) ; dashboard de monitoring du rang.
Infrastructure feature flag + A/B
GrowthBook / Statsig / LaunchDarkly + canary + kill switch + arbre de métriques d'expérimentation.
Observabilité + SLO/SLI
Sentry / Datadog + OpenTelemetry + Lighthouse CI + RUM (SpeedCurve) + PagerDuty ; runbook d'incident.
Runbook + formation + 3 mois de support
Runbook architecture + deploy + rollback + monitoring, sessions de formation équipe, 90 jours de support + on-call.
— PÉRIMÈTRE
Ce que nous faisons et ce que nous ne faisons pas
Le périmètre composable commerce est écrit ; il prévient les surprises et les factures supplémentaires ultérieures.
Nous faisons
- Architecture MACH + composable commerce + ADR
- Shopify Hydrogen + Oxygen (RSC + Remix)
- Next.js + App Router + RSC + Vercel Edge
- commercetools / Saleor / BC / Shopify Storefront API
- CMS headless Sanity / Contentful / Storyblok
- Search + merchandising Algolia / Typesense / Coveo
- Edge runtime (Cloudflare Workers / Vercel Edge / Oxygen)
- Préservation SEO (301 / schema / hreflang / sitemap)
- Feature flag + canary + rollback + observabilité
- Intégration identity + payment + subscription
- Ingénierie Core Web Vitals + RUM
- Runbook + formation + 90 jours de support + on-call
Nous ne faisons pas
- Développement de thèmes monolithiques Magento / WooCommerce (uniquement migration)
- Développement cœur ERP / OMS / WMS (nous intégrons)
- Gestion de budget média (l'équipe Acquisition est un engagement distinct)
- Logistique physique / entrepôt / opérations douanières
- Traitement de cartes de crédit / ownership du périmètre PCI (reste chez le vendor de paiement)
- Processus de régulation banking / KYC / AML (via sociétés partenaires)
- Service client outsourcé (nous installons l'outil, l'opération reste chez le client)
- Faux avis / trafic bot / manipulation artificielle de la vitesse
HOW WE WORK
Setup + migration sur 12-16 semaines, puis opération mensuelle
Semaines 1-2 : assess + faisabilité
Audit du stack existant, baseline de performance, risque SEO, modèle TCO, capacité équipe + brouillon d'ADR.
Semaines 3-4 : architect + RFP/POC vendor
Architecture MACH, shortlist engine/CMS/search/payment/identity + RFP + POC de 2-3 semaines.
Semaines 5-6 : compose + setup framework
Setup Hydrogen / Next.js, intégration Storefront API / commerce engine, GraphQL gateway, déploiement edge runtime.
Semaine 7 : CMS + search + merchandising
Modèle de contenu Sanity / Contentful, index Algolia / Typesense + relevance tuning, règles de merchandising.
Semaine 8 : identity + payment + subscription
Auth0 / Clerk + Stripe / Adyen + Recharge + 3DS2 + passkey + accelerated checkout.
Semaines 9-10 : ETL data + mapping 301
ETL catalogue / client / commande / contenu, URL mapping, plan 301, hreflang + sitemap + schema.
Semaines 11-12 : staging + canary + stress BFCM
Parité staging, smoke test, canary rollout, lancement via feature flag, stress test BFCM + plan war room.
Semaine 13+ : go-live + observe + QBR + support
Playbook de go-live week-end, RUM + Sentry + SLO/SLI, QBR mensuelle, runbook + formation + 3 mois de support.
— BOÎTE À OUTILS
Les outils que nous utilisons — vendor-agnostiques mais choix affirmés
Nous choisissons ce qui convient à chaque client ; nous préservons notre indépendance en ne prenant aucune commission.
FRAMEWORK & FRONTEND
COMMERCE & CMS
SEARCH & PERSONNALISATION
EDGE & OBSERVABILITÉ
QUESTIONS
Frequently asked
— GLOSSAIRE
Concepts fondamentaux du composable commerce
Le langage commun de vos équipes engineering, produit, opérations et marketing.
- MACH
- Acronyme des principes Microservices + API-first + Cloud-native + Headless ; le cadre de l'architecture composable commerce, défini par la MACH Alliance.
- Composable Commerce
- Architecture commerce où, au lieu d'une plateforme monolithique unique, le meilleur vendor est sélectionné pour chaque fonction ; engine + CMS + search + payment + identity sont des services séparés.
- Headless
- Découplage via API entre le frontend (présentation) et le backend (commerce engine / CMS) ; permet au frontend de tourner sur n'importe quel framework + runtime.
- React Server Components (RSC)
- Modèle de composant introduit avec React 18+, rendu côté serveur et n'envoyant aucun JS au client ; utilisé nativement par Next.js App Router + Shopify Hydrogen, il réduit le coût de bundle + hydration.
- Streaming SSR
- Mode de rendu où le HTML de la page est envoyé progressivement du serveur au client à partir des fragments prêts, au lieu d'être envoyé en une seule fois ; le TTFB et le LCP diminuent.
- Edge Runtime
- Runtime où le code s'exécute sur le node CDN géographiquement le plus proche de l'utilisateur ; Cloudflare Workers, Vercel Edge, Shopify Oxygen en sont les principaux exemples. Latence minimale, cohérence mondiale.
- ISR (Incremental Static Regeneration)
- Pages buildées statiquement qui sont régénérées en arrière-plan à intervalles réguliers ou sur trigger ; combine la vitesse du statique et la fraîcheur des données.
- Stale-While-Revalidate (SWR)
- Stratégie de cache HTTP ; le contenu stale est affiché immédiatement à l'utilisateur pendant qu'une version fraîche est récupérée en arrière-plan. Équilibre vitesse + freshness.
- Storefront API
- API GraphQL publique de Shopify ; elle permet aux frontends headless / custom / mobiles d'accéder aux données de produit + collection + panier + checkout.
- commercetools
- Moteur composable commerce ; API-first + conforme MACH, c'est l'un des moteurs les plus utilisés pour les scénarios enterprise B2B + B2C. Écosystème commercetools Frontend + Studio disponible.
- ADR (Architecture Decision Record)
- Format de documentation qui consigne par écrit le contexte, les options, le résultat et les tradeoffs d'une décision d'architecture logicielle ; standard pour les décisions vendors dans un stack composable.
- Feature Flag
- Interrupteur de fonctionnalité activable/désactivable au runtime, indépendamment du déploiement ; utilisé dans les scénarios de canary release, A/B test, kill switch ; GrowthBook/Statsig/LaunchDarkly sont les principaux outils.
- SSR (Server-Side Rendering)
- Rendre le HTML côté serveur et l'envoyer prêt-à-peindre au navigateur. Bat le CSR en SEO et LCP ; mode par défaut de frameworks comme Nuxt 3, Next.js, Remix. À l'échelle, il exige edge caching et une stratégie d'hydration réfléchie.
- CSR (Client-Side Rendering)
- Servir une coquille HTML quasi vide + un bundle JS et rendre côté navigateur. Mode typique des SPA ; first paint lent, SEO nécessite un prerendering route par route. Le LCP s'effondre sur réseau faible ou appareil bas de gamme.
- Edge Functions
- Couche compute légère exécutée dans le CDN lui-même (Cloudflare Workers, Vercel Edge, AWS Lambda@Edge). Fait geo-routing, bucketing A/B, manipulation de headers et auth en millisecondes sans repasser par l'origine ; cold start quasi nul.
- CDN (Content Delivery Network)
- Réseau qui cache du contenu statique (et de plus en plus dynamique) sur des nœuds edge répartis géographiquement. Baisse TTFB et LCP, protège l'origine des DDoS et des pics. Cloudflare, Fastly, Akamai, AWS CloudFront — incontournables d'une stack moderne.
- Frontend
- La couche que l'utilisateur voit et avec laquelle il interagit dans le navigateur — HTML, CSS, JS, assets visuels et comportement runtime. Vit à part du backend ; frameworks courants : Vue/Nuxt, React/Next, Svelte/SvelteKit ; première ligne pour performance, accessibilité et SEO.
- Backend
- Couche serveur pour la business logic, l'accès aux bases de données, l'authentification, les paiements et les intégrations. Expose les API que le frontend consomme ; stacks habituels : Node.js, Python, Go, .NET ; vrai propriétaire de l'échelle, de la sécurité et de la cohérence des données.
- Component-based Architecture
- Architecture frontend qui découpe l'UI en briques isolées, réutilisables et testables individuellement. Paradigme central de Vue/React/Svelte ; incarnation physique du design system, réduit le coût de refactor et l'incohérence visuelle.
- State Management
- Discipline du « où vit le state partagé et l'état d'UI » dans un frontend, comment il se met à jour et se propage aux components. Pinia (Vue), Redux/Zustand (React), Svelte stores ; dans les produits complexes, base de performance et traçabilité des erreurs.
- Code Splitting
- Produire des chunks JS par route ou par feature au lieu d'un unique gros bundle pour que chaque page ne charge que ce qu'il faut. Optimisation centrale de Vite/Webpack/Rollup ; impact direct sur LCP et TTI, va de pair avec lazy imports + dynamic routes.
- Lazy Loading
- Technique qui charge le contenu (image, component, route, librairie) seulement quand il est nécessaire. Natif via <img loading="lazy">, en framework via dynamic imports ; réduit fortement le first paint et la consommation de données.
- SPA (Single Page Application)
- Type d'app qui charge toute la shell au premier hit et gère toutes les navigations suivantes via un router client-side. Donne un effet instantané ; first paint lourd, SEO nécessite un prerendering supplémentaire, encore populaire pour les surfaces app-like.
- PWA (Progressive Web App)
- Application web installable depuis le navigateur, capable de tourner offline et de recevoir des push. Basée sur Service Workers + Web App Manifest ; se comporte comme une app native sans ASO ni distribution store.
- SSG (Static Site Generation)
- Générer chaque page en HTML au build et la servir depuis un CDN. Performance maximale, infrastructure minimale ; idéal pour des contenus peu changeants (blog, marketing, docs, glossaire) — Nuxt generate, Next.js export, Astro.
- Web Component
- Standard de components natif du navigateur, agnostique au framework : Custom Elements + Shadow DOM + HTML Templates. Écrit avec Stencil/Lit et consommable dans n'importe quel framework ; transforme un design system en briques portables franchissant React/Vue/Svelte.
- REST API
- Style architectural qui communique via verbes HTTP (GET/POST/PUT/PATCH/DELETE) et URL basées sur les ressources. Stateless, transporte généralement du JSON, documenté en OpenAPI ; reste la surface d'intégration par défaut d'environ 80 % des apps web et mobile.
- GraphQL
- Langage de requête + runtime qui permet au client de demander, en une seule query, uniquement les champs nécessaires. Alternative au over/under-fetching de REST ; le système de types et le schema-first améliorent nettement la DX frontend.
- Webhook
- Pattern où un système fait un HTTP POST sur une URL pré-enregistrée quand un évènement survient (paiement validé, commande créée). L'inverse du polling — temps réel, économe en ressources ; vérification de signature et handling idempotent obligatoires.
- JWT (JSON Web Token)
- Standard de token compact et auto-validable au format Header.Payload.Signature. Utilisé pour l'authentification stateless entre SPA et API ; claims d'expiration, rotation des refresh tokens et gestion des secrets sont les leviers critiques.
- OAuth 2.0
- Protocole de délégation qui permet à un utilisateur d'accorder un accès limité à une app tierce sans partager son mot de passe. Le flow Authorization Code + PKCE est le standard web moderne ; alimente "Sign in with Google" et "Connect Slack app".
- Rate Limiting
- Couche qui plafonne les requêtes acceptées par une API par seconde ou par minute, pour contrer abus, brute-force et explosions de coût. Implémenté en token-bucket ou sliding-window ; les headers X-RateLimit-* en réponse sont le standard de facto.
- API Gateway
- Couche reverse-proxy qui canalise tout le trafic API externe par un point unique. Authentification, rate limiting, routing, transformation request/response et collecte de métriques au même endroit ; AWS API Gateway, Kong, Apigee, Cloudflare API Gateway sont courants.
- Design Pattern
- Recette éprouvée pour un problème récurrent en architecture logicielle (Gang of Four). Singleton, Factory, Observer, Strategy, Decorator et les autres 23 classiques ; vocabulaire partagé qui accélère refactor et code review.
- Monorepo
- Conserver plusieurs projets/librairies dans un même repo Git. Nx, Turborepo, pnpm workspaces ; permet refactor cross-package + commits atomiques + tooling partagé, mais en grandissant exige une vraie discipline de build system.
- TDD (Test-Driven Development)
- Boucle : écrire un test qui échoue → code minimal pour le faire passer → refactorer (Red-Green-Refactor). Le test pressurise le design, attrape les régressions, documente l'intention — pas adapté à chaque équipe/projet, exige de la discipline.
- Refactoring
- Améliorer la structure interne du code sans changer le comportement externe — pour lisibilité, simplicité, testabilité. La test coverage est un prérequis (filet de sécurité), petits pas + commits est le rythme, les tools refactor de l'IDE (extract method, rename) sont standard.
- Semantic Versioning (SemVer)
- Schéma de numérotation MAJOR.MINOR.PATCH : MAJOR = breaking change, MINOR = feature rétro-compatible, PATCH = bug fix. Langage commun des écosystèmes npm/PyPI/Cargo ; base des opérateurs de range comme "^1.2.3".
- Race Condition
- Bug né de deux threads/process accédant à une ressource partagée dans un ordre imprévisible. Résolu via mutex, sémaphores, opérations atomiques, immutable state ou single-writer pattern ; l'une des classes de bugs les plus dures à débugger.
- Idempotency
- Propriété selon laquelle appeler la même requête N fois laisse le système dans le même état que l'appeler une fois. PUT, DELETE sont naturellement idempotents ; pour POST on utilise un header Idempotency-Key (Stripe, webhooks de paiement). Prérequis non négociable pour le retry distribué.
- Memory Leak
- Programme qui ne libère pas la mémoire qu'il n'utilise plus — l'usage RAM grossit et finit en crash OOM. En JS : refs DOM détachées + captures de closure ; en Node : event listeners fuités ; en conteneurs DI : refs retenues — les coupables habituels.
- Garbage Collection (GC)
- Mécanisme runtime qui détecte et libère automatiquement la mémoire que le programme ne peut plus atteindre. JS V8 = générationnel + incrémental, Java/JVM = ZGC/G1, Go = mark-sweep concurrent ; alternative à la gestion mémoire manuelle (C/C++).
- Concurrency vs Parallelism
- Concurrency = gérer plusieurs tâches à la fois (structure), Parallelism = exécuter plusieurs tâches à la fois (hardware). I/O async single-core est concurrent ; thread pool multi-core est parallel — souvent confondus, mais concepts distincts.
- Immutability
- Principe selon lequel une structure de données ne peut pas être modifiée après sa création — chaque « changement » produit une nouvelle copie. Base de la programmation fonctionnelle et défense naturelle contre les race conditions dans le state React, Redux, Vue Pinia et le code concurrent ; le structural sharing préserve la performance.
- Dependency Injection (DI)
- Pattern où un component reçoit ses dépendances de l'extérieur au lieu de les instancier lui-même. Améliore énormément la testabilité (mock injection), le loose coupling et la flexibilité de config ; Spring, Angular, NestJS, Vue provide/inject l'utilisent.
- Polyfill
- Code qui émule une API JS moderne (fetch, Array.flat, Promise) absente des navigateurs anciens. Normalement injecté au build via @babel/preset-env ou core-js selon les target browsers ; NE doit PAS être livré aux navigateurs modernes (bundle bloat).
- Regex (Regular Expression)
- Mini-langage pour définir des patterns de texte et faire recherche, match, parse, replace. Syntaxe de classes de caractères + quantificateurs + ancres comme /^\d{3}-\d{4}$/ ; supporté par tous les langages (JS, Python, Go) — mais à éviter pour parser du HTML.
- SDK (Software Development Kit)
- Pack librairie + docs publié pour faciliter l'intégration avec une plateforme/service (Stripe, AWS, Twilio). Remplace les appels HTTP API bruts par des méthodes type-safe, retries intégrés, helpers d'auth et tooling de test.
- Callback Hell
- La pyramide profonde de code née de callbacks très imbriqués (.then().then().then()...). Résolu par Promises + async/await ; survit aujourd'hui surtout dans le legacy jQuery et de vieilles librairies Node.js.
- Code Review
- Pratique consistant à faire lire et critiquer le code d'un collègue par d'autres développeurs avant le merge. Attrape les bugs, diffuse la connaissance, force la cohérence ; le workflow PR GitHub/GitLab est la norme, ton « discussion » (pas gatekeeping bloquant) = sain.
- Pair Programming
- Deux développeurs sur une seule machine — le driver écrit le code, le navigator gère stratégie + détection d'erreurs. Améliore transfert de connaissance, qualité du code et vitesse d'onboarding ; en remote via VS Code Live Share ou JetBrains Code With Me.
- Technical Debt
- La « complexité à rembourser » qui s'accumule via les quick fixes et les décisions de design en raccourci. Le coût du refactor croît comme un intérêt ; la gérer demande un debt log, de la visibilité (tech-debt board) et 15-20 % de la capacité de sprint pour rembourser.
- Long Task
- Tout travail JS qui bloque le main thread du navigateur plus de 50 ms. Ennemi principal de l'INP et du TBT ; il faut le découper via debounce, requestIdleCallback, web workers ou time-slicing (yielding). Apparaît en barres rouges dans le panel Performance de Chrome DevTools.
- Speculation Rules API
- Nouveau API dans Chrome 109+ qui pré-rend les pages en arrière-plan selon « l'utilisateur va probablement visiter ce lien ». Une liste JSON définit les cibles prerender/prefetch et la page suivante s'ouvre instantanément. La version native de browser des tricks perf de SPA.
- View Transitions API
- API navigateur native (Chrome 111+) qui produit des transitions fluides style SPA entre pages ou changements d'état. Encapsuler une mutation DOM dans document.startViewTransition() génère automatiquement des fade/slide ; combinable avec les frameworks SPA.
- Container Queries
- Fonctionnalité CSS qui applique le style d'un composant selon la taille de son propre conteneur, et non du viewport. Une card peut s'afficher compacte à 300 px et large à 600 px. Supportée sur tous les navigateurs modernes depuis 2023 ; chaînon manquant du design par composants.
- CSS Cascade Layers (@layer)
- Fonctionnalité CSS de 2022 qui résout les guerres de specificity. Avec @layer reset, base, components, utilities, l'ordre entre couches est explicite — un !important dans une couche basse perd même face à un style normal d'une couche haute. Intégré dans Tailwind v4 et Bootstrap 5+.
- CSS Houdini
- Famille d'APIs W3C qui permet à JavaScript d'étendre le pipeline de rendu CSS du navigateur. Paint API (fonds custom), Layout API (flex/grid custom), Properties & Values API. Permet de livrer en GPU-accéléré des effets absents du CSS natif, au lieu de polyfills JS.
- WebGPU
- Successeur de WebGL — API moderne graphismes et compute. Accès brut au GPU via Vulkan/Metal/DirectX 12, permettant des jeux qualité native, l'inférence AI et le compute scientifique dans le navigateur. Disponibilité générale depuis Chrome 113 ; alimente les démos web Stable Diffusion et inférence LLM.
- WebAssembly (WASM)
- Bytecode bas niveau qui s'exécute dans le navigateur à vitesse quasi native, compilé depuis C/C++/Rust/Go. Anime Figma, Photoshop Web, AutoCAD Web, le moteur d'échecs Stockfish ; idéal pour les scénarios qui exigent 5-20× les perfs de JavaScript.
- Service Worker
- Proxy JS situé entre le navigateur et le réseau, capable de continuer à s'exécuter même quand la page est fermée. Fondation des stratégies cache offline-first des PWA, des push notifications et du background sync. La librairie Workbox est l'outil le plus utilisé.
- Workbox
- Bibliothèque JavaScript de Google qui simplifie l'écriture de service workers. Stratégies de cache prêtes à l'emploi (cache-first, network-first, stale-while-revalidate), precaching, runtime caching et APIs background sync. Standard dans les pipelines build PWA (Workbox-CLI, vite-plugin-pwa).
- Critical CSS
- Technique qui inline dans le <head> HTML le minimum de CSS nécessaire au rendu above-the-fold. Pendant que les CSS externes render-blocking se chargent en parallèle, FCP/LCP gagnent 200-500 ms. Des outils comme critters, beasties, penthouse automatisent le workflow.
- Resource Hints (preload / prefetch / preconnect / dns-prefetch)
- Balises <link> qui disent au navigateur « cette ressource sera bientôt nécessaire ». preload : asset critique de la page courante (font, hero) ; prefetch : prochaine navigation ; preconnect : ouvre le handshake TLS en avance ; dns-prefetch : DNS uniquement. Bien utilisées : LCP ‑500 ms.
- fetchpriority
- Attribut HTML / option fetch() qui assigne une priorité « high »/« low »/« auto » aux <img>, <link> ou fetch() (Chrome 101+). Surcharge la décision par défaut du navigateur ; mettre fetchpriority="high" sur l'image LCP donne un gain spectaculaire.
- HTTP/3 (QUIC)
- Troisième génération de HTTP, fondée sur le protocole QUIC de Google sur UDP plutôt que TCP. Connexion 0-RTT (handshake TLS dès le premier paquet), pas de head-of-line blocking, pas de coupure lors des changements de réseau mobile. Standard sur Cloudflare, Akamai, Fastly.
- Brotli (compression)
- Algorithme d'encodage HTTP introduit par Google en 2015 ; compresse 15-25 % de plus que gzip. Plus de 95 % des navigateurs modernes le supportent ; les assets statiques sont pré-compressés en build avec brotli-11, le HTML dynamique en runtime avec brotli-4/5.
- Edge Compute
- Paradigme consistant à exécuter du code sur des nœuds edge proches de l'utilisateur plutôt qu'à l'origine. Cloudflare Workers, Vercel Edge Functions, Netlify Edge, Fastly Compute@Edge ramènent la latence à 20-50 ms ; A/B tests, redirects géo, injection headers auth se font au edge.
- Streaming Hydration
- Technique où le serveur stream le HTML chunk par chunk et où React/Vue démarre l'hydratation à mesure que les chunks arrivent. React 18 Suspense + Server Components, Nuxt 3 et la resumability de Qwik poussent dans ce sens. Réduit TTFB et TTI en les chevauchant.
- Islands Architecture
- Architecture « statique par défaut + îlots interactifs » popularisée par Astro. La majorité de la page est pré-rendue sans JS ; seuls les composants interactifs (« îlots ») hydratent. Les bundles JS chutent de 70-90 %, les scores perf grimpent. Idéal pour les sites éditoriaux.
- Partial Hydration
- Technique qui hydrate uniquement les composants visibles ou interactifs au lieu de toute la page. Exemples : hydrateOnVisible / hydrateOnIdle / hydrateOnInteraction de Vue 3.5, React Lazy + Suspense. Mécanisme fondamental derrière l'islands architecture.
- Tree Shaking
- Optimisation des bundlers (Webpack, Rollup, esbuild, Vite) qui retire le code inutilisé (dead code) du bundle de production en parcourant le graphe import/export ES modules. Sur des paquets side-effect-free, les bundles fondent de 30-70 % ; balise-les avec "sideEffects: false" dans package.json.
- Web Worker
- API navigateur qui exécute du JavaScript dans un thread séparé du main thread. Les calculs lourds (traitement d'image, chiffrement, parsing) et les tris d'array volumineux ont lieu dans le worker sans bloquer le main thread. La librairie Comlink transforme l'API messages en RPC.
- Shared Worker
- Un Web Worker unique partagé par plusieurs onglets / iframes de la même origine. Utilisé pour la sync d'état entre onglets (login, événements temps réel), une seule connexion WebSocket partagée et un cache partagé. Différent du Service Worker : pensé pour le compute brut.
- Cache Storage API
- API asynchrone moderne dans le Service Worker qui stocke des objets Request/Response en clé-valeur. caches.open() ouvre un cache ; .put / .match le manipulent. Fondation du precaching PWA et du runtime caching ; conserve la sémantique HTTP, contrairement à LocalStorage.
- ETag
- Empreinte de version (hash) d'une réponse HTTP. Lors de la requête suivante le navigateur la renvoie via If-None-Match ; si rien n'a changé le serveur répond 304 Not Modified et n'envoie pas le contenu. Mécanisme central de cache des assets statiques et de validation des réponses API.
- Sustainable Web Manifesto
- Déclaration en six principes (clean, efficient, open, honest, regenerative, resilient) pour réduire l'impact environnemental d'un site web. Publiée par Wholegrain Digital et Mightybytes en 2019 ; référence fondatrice, le web représentant 2-3,7 % des émissions mondiales.
- Website Carbon Footprint Calculator
- Service ouvert qui calcule les émissions carbone d'un site web par page vue. Le plus utilisé est websitecarbon.com de Wholegrain Digital ; formule : data transfer × carbon intensity de la région CDN × facteur device utilisateur. Cible : 1 g CO₂/page load ; sites moyens 2-5 g, sites lourds en animation/vidéo 8-15 g.
— ARBRE DE DÉCISION
Une opération composable commerce vous convient-elle ?
Répondez par Oui/Non à 4 questions ; que le résultat soit clair.
01 / 04
Votre GMV annuel dépasse-t-il 2M$ ou avez-vous une opération B2B active ?
Seuil minimal de ROI pour un investissement MACH + composable ; pour les boutiques plus petites, OS 2.0 offre un ROI plus rapide.
— LET'S BEGIN
Qu'est-ce qui limite la vitesse frontend de votre e-commerce presque chaque semaine ?
Nous scannons votre site actuel et produisons Web Vitals, stratégie de cache, carte des risques SEO et modèle ROI headless.