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
1) Définition & rôle (PRPS – Polyvalence, Rôle, Pont, Scalabilité)
À 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.
2) Architecture & découpage (Front/Back/DB/CI/CD)
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/] }
3) FullStack vs Front/Back vs DevOps vs Data
| 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.
4) Responsabilités majeures (Qualité, Sécurité, Observabilité, Perf)
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"} ] } }5) Stack & écosystème (Front, Back, Data, Cloud)
| 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 NULLAccessibilité
- Contrast, focus, ARIA.
- Clavier & lecteurs d’écran.
- Tests axe-core/Pa11y.
6) Qualité & sécurité (OWASP, RGPD, Policy-as-Code, DevSecOps)
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=high7) Métriques & performances (Front, API, FinOps, Observabilité)
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()8) Pourquoi devenir FullStack ? (Marché, Carrière, Certifs, Plan 90j)
Carrière & marché
- Très recherché en startup & scale-up.
- Polyvalence = valeur ajoutée pour prototyper vite.
- Passerelles: Architecte logiciel, Tech Lead, CTO.
- Salaire EU 2025: ~40–85k€/an (junior→senior).
Certifications & labs
- Cloud: AWS Developer, Azure Dev, GCP Associate.
- Sécurité: OWASP, Certified Ethical Hacker (optionnel).
- Labs: construire un SaaS complet (React + Django + CI/CD).
- Hackathons: prouver la capacité end-to-end.
Plan 90 jours (extrait)
- 0–30j : cadrer stack & contrats API/UI, mettre en place pipeline CI/CD + tests auto.
- 30–60j : livrer premiers modules en prod, mesurer KPIs (LCP, p95 API, MTTR), auditer sécurité.
- 60–90j : consolider observabilité, RGPD, scaling, FinOps.
Checklist de démarrage rapide
- CI/CD opérationnel (build, test, deploy auto).
- Base de code typée & lintée (TS/ESLint, mypy/flake8).
- Secrets sécurisés (vault/KMS).
- Monitoring & alerting mis en place.
- Tests e2e clés (login, paiement, CRUD).
- Tableau de bord KPIs partagé avec l’équipe.
