Guide développement Web

Styles d’archi

• Monolithique modulaire vs microservices
• SSR/SSG/ISR (Next/Nuxt) vs SPA (Vite)
• Événementiel (queue/pub‑sub) & CQRS

Front/back contract

• OpenAPI/Swagger pour REST
• GraphQL schema & directives
• Versioning, idempotence, ETags

Non‑fonctionnels

• SLOs (latence, erreurs, dispo)
• Observabilité by design
• Coût & simplicité (KISS)

Stack UI

• Framework : React/Vue/Svelte
• Meta‑framework : Next.js/Nuxt
• CSS : Tailwind + composants

UX & état

• State mgmt : context/zustand/pinia
• Formulaires : validation schema
• i18n, formats & accessibilité

Build & livraison

• Vite/ESBuild, code‑splitting
• Images responsives (srcset)
• PWA : manifest + Service Worker

Serveurs & frameworks

• Node.js (Express/NestJS/Fastify)
• Python (FastAPI/Django)
• .NET (ASP.NET Core)

API

• REST vs GraphQL (BFF possible)
• Idempotence, pagination, filtrage
• Rate‑limit & quotas, cache HTTP

Intégration

• Webhooks signés, retries
• Queues (SQS/RabbitMQ)
• Transactions et outbox

Persistance

• SQL (PostgreSQL/MySQL) & NoSQL
• Migrations (Liquibase/Flyway)
• Indexation & partitions

Cache

• Redis (clé/valeur, TTL)
• CDN pour assets/HTML
• Cache applicatif & ETags

GDPR & privacy

• Minimisation & consentement
• Chiffrement au repos & transit
• Journal des accès aux données

Tests

• Unitaires, intégration, e2e
• Contract tests (Pact)
• Couverture & seuils minimums

CI/CD

• Lint, build, tests, scans SAST
• Review apps & feature flags
• Blue/Green, Canary, rollback

Qualimétrie

• SonarQube (bugs, code smells)
• Deps audit (OWASP/OSV)
• Politique de branches (PR)

OWASP

• Top 10 (XSS, SQLi, SSRF, etc.)
• CSRF tokens, CSP, SameSite
• Validation côté serveur

AuthN/AuthZ

• OIDC/OAuth2, PKCE, MFA
• Sessions httpOnly + rotation
• RBAC/ABAC, scopes & claims

Secrets & journaux

• Vault/KMS, rotation des clés
• Logs JSON sans PII sensibles
• Traçabilité admin & alertes

Budgets perf

• Bundle JS \< 200KB initial
• First byte < 200ms (edge/CDN)
• Images optimisées & lazy‑load

Core Web Vitals

Techniques

• Preload critical, defer non‑critique
• HTTP/2, compression Brotli
• Cache‑Control & ETags

Indexation

• Balises title/meta canoniques
• robots.txt & sitemap.xml
• Schema.org (JSON‑LD)

International

• hreflang, encodage UTF‑8
• Formats date/monnaie
• Serveurs régionaux (latence)

Contenu

• Structure H1‑H2‑H3 logique
• Liens internes contextuels
• Images avec alt pertinents

Instrumentation

• OpenTelemetry (traces/metrics)
• Logs JSON corrélés
• RUM (Real User Monitoring)

Alerting

• SLO‑based, burn rate
• On‑call & escalades
• Post‑mortems blameless

Dashboards

• Golden signals (latence/erreurs)
• KPIs métier vs technique
• Cartographie des services

Pratiques

• Contrastes, taille & interlignes
• Navigation clavier, focus visible
• ARIA sémantique & labels

Médias

• Alt textes, transcriptions
• Captions & audio descriptions
• Pause/stop des animations

Évaluation

• Audit RGAA périodique
• Tests utilisateurs
• Bug‑bashes d’accessibilité

Conventions

• Guide de style & naming
• Commit message (Conventional)
• Changelog & versioning SemVer

Docs

• README par service
• ADR (records de décisions)
• Runbooks & playbooks

Qualité doc

• Docs as code (Markdown)
• Validation automatique (lint)
• Portails développeurs

Pré‑prod

• Qualité & sécurité OK
• Perf budget respecté
• Backups/config exportée

Téléchargements : preprod.pdf

CI/CD

• Pipeline YAML (build/test)
• Scan deps & conteneurs
• Déploiement canary

Exemples : pipeline-ci.yml

API

• OpenAPI/GraphQL schema
• Contrats & tests de contrat
• Politique de versioning

Docs : openapi.yaml