Principes de base du métier de FullStack Developer

8 cartes, avec bonnes pratiques, anti-patterns, checklists, KPIs et snippets (Front/Back/CI/CD).

Front: React/Vue/Angular, a11y, perf Back: Node/Django/Spring, REST/GraphQL CI/CD: GitLab/GitHub Actions, Qualité Sécurité: OWASP, Auth, RGPD

À retenir

Polyvalence : UI/UX & perf web (Core Web Vitals) + APIs & data.
Rôle transversal : interface avec Produit, Design, DevOps, Data.
Pont technique : cohérence contrat API ↔ contrat d’interface.
Scalabilité : du MVP au run (observabilité, coûts, SLO).

Livrables clés

Appli end-to-end (SPA/SSR + API + DB + auth + RGPD).
Docs d’architecture (schémas flux, RFC/ADR, OpenAPI/GraphQL SDL).
Tests auto (unit/int/e2e, contrats API, a11y), pipeline CI/CD.
Standards front (design system) & back (conventions/linters).

Anti-patterns

“Couteau suisse = expert partout” → dispersion, dette.
Mélange responsabilités (UI, domaine, accès données dans la même couche).
Livraisons manuelles, absence de revues & de tests.
Ignorer sécurité (OWASP Top 10) & privacy by design.

Exemple de “contrat FullStack” (extrait)

{
  "project":"MVP SaaS",
  "frontend":{"framework":"React","ssr":true,"bundle_p95":"<200KB","lighthouse":">=90"},
  "backend":{"stack":"Node.js + PostgreSQL","api_p95_latency":"<150ms","rate_limit":"100r/min"},
  "cicd":{"tool":"GitLab CI","coverage":">=80%","preview_env":"enabled"},
  "security":{"auth":"JWT/OAuth2","owasp":"A01..A10 scan","secrets":"KMS"},
  "rgpd":{"consent":true,"dpo_contact":"dpo@ex.com","retention_days":365}
}

Daily

Builds & tests CI/CD OK (lint, typecheck).
Erreurs Sentry/Logs traitées.
Contrats API (Postman/Prism) à jour.

Weekly

Audit Core Web Vitals + perf API p95.
Revue code & dette technique.
Test restore DB + export RGPD.

Monthly

MAJ dépendances critiques (npm/pip).
Audit sécurité (OWASP) & privacy.
Revue coûts cloud (FinOps) & logs.

Patrons

Monolithes modulaires vs micro-services (strangler fig).
API REST/GraphQL, websockets, CQRS en cas d’événements.
State mgmt (Redux/RTK, Vuex/Pinia, React Query).

Contrats & schémas

OpenAPI/JSON Schema versionnés & testés.
Migrations DB (Liquibase/Flyway) – expand/contract.
Feature flags / dark deploy / canary.

KPIs

Indicateur	Définition	Cible
FCP/LCP	Core Web Vitals	< 2.5s LCP
API p95	Latence endpoints clés	< 150ms
Change Failure Rate	% déploiements en échec	< 15%
MTTR	Temps moyen de réparation	< 30 min

Snippet infra (extrait)

# GitLab CI – build + tests + preview
stages: [build, test, preview, deploy]
cache: { key: "$CI_COMMIT_REF_SLUG", paths: [node_modules/] }

Domaine	FullStack	Front-end	Back-end	DevOps/SRE
Focus	End-to-end & intégration	UI/UX, accessibilité, perf	APIs, logique métier, données	CI/CD, infra, SLO
Livrables	App complète + pipeline	Design system, SPA/SSR	OpenAPI, DB schemas	Observabilité, IaC
Interfaces	Coordination globale	Contrat d’interface	Contrat de données	Contrat de service

Anti-patterns : “FullStack fait DevOps complet” / “personne ne possède les contrats” / pas de RACI clair.

Qualité

Tests unit/int/e2e, coverage >=80%.
Contrats API/Schema validation.
Linting, typing (TS/mypy), formatage.

Sécurité

AuthN/AuthZ (JWT/OAuth2), secrets via KMS.
OWASP Top 10, CSP, rate limiting.
Audit RGPD: consent, export/suppression.

Observabilité

Logs corrélés (traceID), métriques, alertes.
Dashboards perf front & API.
Budgets d’erreur (SLO/SLA).

Performance

Core Web Vitals, lazy-loading, code-splitting.
Cache HTTP/Redis, pagination, N+1 guard.
Profiling (flamegraphs, APM).

Snippets Front

// React – code-splitting
const Page = React.lazy(() => import('./Page'));

Snippets Back

# Django REST – throttling
REST_FRAMEWORK = { "DEFAULT_THROTTLE_RATES": {"anon":"60/min","user":"600/min"} }

Snippets CI

# GitHub Actions – test & build
on: [push]
jobs: { build: { runs-on: ubuntu-latest, steps: [ {uses: "actions/checkout@v4"}, {uses:"actions/setup-node@v4", with:{node-version:"20"}}, {run:"npm ci && npm test"} ] } }

Couche	Exemples	Usage	Notes
Front	React/Vue/Angular, Tailwind	SPA/SSR, a11y	Design system, i18n
Back	Django/Node/Spring	APIs REST/GraphQL	Auth, RBAC, jobs
DB/Cache	PostgreSQL, Redis, Mongo	Données & sessions	Migrations & perf
CI/CD	GitLab/GitHub/Jenkins	Build/Test/Deploy	Preview env

Migrations

# Django – migration zero-downtime (extrait)
# 1) add nullable column, 2) backfill, 3) set NOT NULL

Accessibilité

Contrast, focus, ARIA.
Clavier & lecteurs d’écran.
Tests axe-core/Pa11y.

Sécurité applicative

Respect de l’OWASP Top 10 (injections, XSS, CSRF, SSRF…).
Rate limiting & throttling API.
Tests DAST/SAST intégrés à la CI/CD.
Headers HTTP: CSP, HSTS, X-Frame-Options.

RGPD & Privacy by Design

Consentement explicite, stockage traçable.
Droit d’accès/export/suppression automatisé.
Minimisation des données → pas d’over-logging.
Anonymisation & pseudonymisation en pré-prod.

Policy-as-Code & DevSecOps

OPA/Conftest pour valider routes, rôles, secrets.
CI/CD : scans de dépendances (npm audit, pip-audit, Trivy).
Infrastructure: Terraform + Checkov, GitHub Dependabot.
Surveillance runtime (Falco, Sysdig) pour intrusions.

Snippets utiles

# Express.js Helmet middleware
const helmet = require('helmet')
app.use(helmet())

# Django settings – CSP
CSP_DEFAULT_SRC = ("'self'",)
CSP_STYLE_SRC = ("'self'", "cdn.jsdelivr.net")

# GitLab CI – SAST stage
sast:
  stage: test
  script: - npm audit --audit-level=high

Front-end

Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms.
Audit Lighthouse ≥ 90.
Lazy-loading & code-splitting.
Images optimisées (WebP/AVIF) & CDN.

Back-end & API

p95 latency < 150ms, erreurs < 1%.
MTTR < 30 min, Change Failure Rate < 15%.
Observabilité : traces distribuées (OpenTelemetry, Jaeger).
Tests de charge réguliers (k6, Locust).

Coûts & FinOps

Coût par 1k requêtes < seuil produit.
Alertes €/jour ou €/mois.
Auto-scaling & right-sizing (vCPU/RAM/IOPS).
CI/CD → arrêt auto des preview envs.

Tableau de bord recommandé

KPI	Définition	Objectif
LCP	Temps de rendu principal	< 2.5s
API p95	Latence requêtes critiques	< 150ms
MTTR	Délai résolution incidents	< 30m
Change Failure Rate	% de déploiements en échec	< 15%

Snippet Observabilité

# OpenTelemetry Node.js (extrait)
const { NodeSDK } = require('@opentelemetry/sdk-node')
const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node')
const sdk = new NodeSDK({ instrumentations: [getNodeAutoInstrumentations()] })
sdk.start()

Principes de base du métier de FullStack Developer

1. Définition & rôle

2. Architecture & découpage

3. Distinction avec autres métiers

4. Responsabilités majeures

5. Stack & écosystème

6. Qualité & sécurité

7. Métriques & performances

8. Pourquoi devenir FullStack ?