1. C'est quoi le Frontend ? La Big Picture pour démarrer
Définition simple
Le frontend (ou « côté client »), c'est tout ce que l'utilisateur voit et touche dans son navigateur : les boutons, le texte, les images, les animations, les formulaires. C'est l'interface entre l'humain et la machine.
Le backend (ou « côté serveur »), c'est tout ce qui se passe en coulisses : la base de données, la logique métier, l'authentification, les calculs. L'utilisateur ne le voit jamais directement.
Les 3 piliers du frontend
Le squelette de la page.
Titres, paragraphes, images, liens.
Le style visuel.
Couleurs, polices, mise en page, animations.
L'interactivité.
Clics, formulaires, données dynamiques.
Tout le reste (React, Angular, Tailwind, npm…) n'est que des couches d'abstraction construites au-dessus de ces 3 langages.
2. Frontend ↔ Backend ↔ API Comment ça communique
Le schéma global
(Frontend) HTML + CSS + JS
Ce que l'utilisateur voit
(Interface) REST / GraphQL
Requêtes HTTP
(Backend) PHP, Node, Python…
Logique + BDD
Qu'est-ce qu'une API ? Fondamental
API = Application Programming Interface. C'est un contrat entre deux programmes :
- « Tu m'envoies telle requête, je te réponds tel format »
- Le frontend envoie une requête HTTP (GET, POST, PUT, DELETE) à une URL précise (un endpoint)
- Le backend répond avec des données au format JSON (JavaScript Object Notation)
// Exemple : le frontend demande la liste des services GET https://api.netandpro.com/services // Le backend répond en JSON : { "services": [ { "id": 1, "name": "Hébergement Web", "slug": "hebergement" }, { "id": 2, "name": "Développement Web", "slug": "developpement-web" } ] }
REST API Standard
- GET → Lire des données
- POST → Créer une ressource
- PUT/PATCH → Modifier
- DELETE → Supprimer
Chaque URL = une ressource. Simple, universel, le plus répandu.
GraphQL Alternatif
- Un seul endpoint (
/graphql) - Le client demande exactement les champs qu'il veut
- Pas de sur-chargement (over-fetching) ni de sous-chargement
- Créé par Facebook (2015)
Plus complexe à mettre en place mais très puissant pour les apps riches.
Les modèles de rendu Architecture
| Modèle | Comment ça marche | Exemple | SEO | Vitesse |
|---|---|---|---|---|
| SSR Server-Side Rendering |
Le serveur génère le HTML complet à chaque requête | PHP (WordPress), Next.js SSR, Nuxt | ★★★ | TTFB plus lent, FCP rapide |
| CSR Client-Side Rendering |
Le serveur envoie une page vide, le JS génère tout côté client | React SPA, Angular SPA, Vue SPA | ★ | Page blanche initiale, puis rapide |
| SSG Static Site Generation |
Le HTML est généré au build (pas à chaque requête) | Astro, Hugo, Next.js SSG, Gatsby | ★★★ | Ultra rapide (CDN) |
| ISR Incremental Static Regen. |
SSG + regnération en arrière-plan à intervalles | Next.js ISR, Nuxt | ★★★ | Le meilleur des deux mondes |
| Hydrid / Islands | HTML statique + îlots interactifs hydratés individuellement | Astro, Fresh (Deno) | ★★★ | Minimal JS envoyé |
3. Les 3 langages fondamentaux HTML, CSS, JavaScript — tout part de là
HTML — La structure Niveau 1
HTML (HyperText Markup Language) définit le contenu et la structure de chaque page.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Ma page</title> </head> <body> <header>...</header> <!-- En-tête --> <main> <!-- Contenu principal --> <h1>Titre</h1> <!-- Titre principal (1 seul par page) --> <p>Paragraphe</p> <a href="/contact">Lien</a> </main> <footer>...</footer> <!-- Pied de page --> </body> </html>
À retenir : Le HTML sémantique (<nav>, <article>, <section>, <aside>) est crucial pour l'accessibilité et le SEO.
CSS — L'apparence Niveau 1
CSS (Cascading Style Sheets) contrôle tout le visuel : couleurs, typographies, espacement, animations, responsive.
/* Sélecteur → propriétés */ .hero { background: linear-gradient(135deg, #0a1628, #1a1040); padding: 60px 30px; color: #ffffff; } /* Responsive : s'adapte au mobile */ @media (max-width: 768px) { .hero h1 { font-size: 1.5rem; } }
Concepts clés : Flexbox (alignement 1D), CSS Grid (mise en page 2D), Variables CSS (var(--color)), Media Queries (responsive).
JavaScript — Le comportement Niveau 1
JavaScript (JS) est le seul langage de programmation natif du navigateur. Il gère toute l'interactivité.
// Variables const name = 'NET&PRO'; let count = 0; // Fonction fléchée (syntaxe moderne) const greet = (user) => `Bonjour ${user}`; // Manipulation du DOM document.querySelector('.btn') .addEventListener('click', () => { count++; console.log(`Clic n°${count}`); }); // Appel API (fetch, asynchrone) const data = await fetch('/api/services') .then(res => res.json());
Concepts clés : const/let, fonctions fléchées, déstructuration, async/await, modules (import/export), DOM API.
TypeScript — JavaScript avec des super-pouvoirs Recommandé
TypeScript (TS) ajoute le typage statique à JavaScript. En 2026, c'est devenu le standard de fait sur la majorité des projets pros.
// TypeScript : erreurs détectées AVANT l'exécution interface Service { id: number; name: string; slug: string; price?: number; // optionnel } function getServiceUrl(service: Service): string { return `/nos-services/${service.slug}`; }
- Avantage : bugs détectés à la compilation, auto-complétion IDE puissante, code auto-documenté
- Inconvénient : courbe d'apprentissage, un peu plus verbeux
- Verdict : à adopter dès que vous êtes à l'aise avec JS vanilla
4. L'écosystème Node.js & npm Le moteur du développement moderne
Node.js — JavaScript hors du navigateur Fondamental
Node.js permet d'exécuter du JavaScript côté serveur (ou sur votre machine locale). Créé en 2009, c'est devenu la pièce centrale de l'outillage frontend.
- Utilisé pour les outils de build (Vite, Webpack, ESBuild)
- Utilisé pour les serveurs backend (Express, Fastify, Hono)
- Utilisé pour le scripting et l'automatisation
npm, yarn, pnpm — Les gestionnaires de paquets
npm (Node Package Manager) est le plus grand registre de paquets au monde (+2,5 millions de paquets). C'est le « pip » ou « composer » de JavaScript.
# Initialiser un projet npm init -y # Crée package.json # Installer un paquet npm install react # Dépendance de production npm install -D tailwindcss # Dépendance de développement # Lancer un script défini dans package.json npm run dev # Lance le serveur de développement npm run build # Génère les fichiers de production
| Gestionnaire | Vitesse | Espace disque | Usage |
|---|---|---|---|
| npm | Standard | Standard | Défaut avec Node.js, le plus utilisé |
| yarn | Plus rapide | Standard | Créé par Facebook, bonne alternative |
| pnpm | Le plus rapide | Le plus léger | Liens symboliques, économise l'espace disque |
| bun | Ultra rapide | Léger | Runtime + gestionnaire tout-en-un (montant en puissance) |
Les fichiers clés d'un projet frontend
| Fichier | Rôle |
|---|---|
package.json | Manifeste du projet : nom, version, dépendances, scripts |
package-lock.json | Verrouille les versions exactes (ne pas modifier manuellement) |
node_modules/ | Dossier des dépendances installées (ne JAMAIS commiter dans Git) |
vite.config.js | Configuration du bundler (Vite est le standard 2026) |
tsconfig.json | Configuration TypeScript |
.env | Variables d'environnement (secrets, clés API — ne pas commiter) |
.gitignore | Fichiers ignorés par Git (node_modules, .env, dist) |
5. Les frameworks & librairies Le grand comparatif 2026
Framework vs Librairie — Quelle différence ?
- Librairie = un outil que VOUS appelez (ex: React, jQuery). Vous gardez le contrôle.
- Framework = un cadre qui VOUS appelle (ex: Angular, Next.js). Il impose une structure.
En pratique, tout le monde dit « framework » pour les deux. L'important c'est de comprendre le degré d'opinion du tool.
React Incontournable
Créé par Facebook/Meta (2013). La librairie la plus utilisée au monde.
✓ Avantages
- Écosystème gigantesque
- Marché de l'emploi le plus large
- Flexibilité (choisissez vos outils)
- React Native pour le mobile
- Server Components (2024+)
- Communauté massive
✗ Inconvénients
- « Just a library » — beaucoup de choix à faire
- JSX déroutant au début
- Trop de façons de faire la même chose
- Besoin d'un méta-framework (Next.js) pour le SSR
- Re-renders complexes à optimiser
Méta-frameworks : Next.js (le plus populaire), Remix, Gatsby
Vue.js Populaire
Créé par Evan You (2014). Le framework « progressif ». Très populaire en France et en Asie.
✓ Avantages
- Courbe d'apprentissage douce
- Excellente documentation (la meilleure)
- API Composition + Options (flexible)
- Progressif : s'intègre dans un projet existant
- Single File Components (.vue) très lisibles
✗ Inconvénients
- Écosystème plus petit que React
- Moins d'offres d'emploi (hors France/Asie)
- Moins de contenu/tutos en anglais
- Grosses apps : moins de retours d'expérience
Méta-framework : Nuxt (l'équivalent de Next.js pour Vue)
Angular Enterprise
Créé par Google (2016, Angular 2+). Le framework « batteries-included » pour les grandes organisations.
✓ Avantages
- Framework complet (routing, forms, HTTP, DI, tests)
- TypeScript natif et obligatoire
- Architecture structurée (idéal grosses équipes)
- Supporté par Google
- Signals (v17+) modernisent la réactivité
✗ Inconvénients
- Courbe d'apprentissage raide
- Verbeux (beaucoup de boilerplate)
- Lourd pour les petits projets
- Perception « old school » (injustifiée depuis v17)
- Communauté qui se réduit
Svelte / SvelteKit Rising Star
Créé par Rich Harris (2019). Approche radicale : le framework disparaît au build.
✓ Avantages
- Pas de Virtual DOM → performances natives
- Syntaxe la plus simple et concise
- Bundle minuscule (less JS shipped)
- Compilation → code optimal automatique
- Svelte 5 (Runes) : réactivité universelle
✗ Inconvénients
- Écosystème encore jeune
- Marché de l'emploi limité
- Moins de librairies tierces
- Breaking changes Svelte 4 → 5
Méta-framework : SvelteKit (SSR, SSG, routing)
Le comparatif en un coup d'œil
| Critère | React | Vue | Angular | Svelte |
|---|---|---|---|---|
| Courbe d'apprentissage | Moyenne | Douce | Raide | Douce |
| Performance runtime | Bonne | Bonne | Bonne | Excellente |
| Taille du bundle | Moyen | Moyen | Gros | Très petit |
| Marché de l'emploi | ★★★ | ★★ | ★★ | ★ |
| Écosystème | Immense | Grand | Complet (intégré) | Croissant |
| TypeScript | Supporté | Supporté | Natif | Supporté |
| Mobile natif | React Native | Capacitor | Ionic | Capacitor |
| Idéal pour | Apps complexes, SaaS | PME, startups, dashboards | Grands groupes, ERP | Sites rapides, blogs, apps légères |
Astro — La révélation 2024-2026 Tendance forte
Astro n'est pas un framework UI mais un méta-framework orienté contenu qui peut utiliser React, Vue, Svelte ou aucun framework.
- zéro JS par défaut : n'envoie du JS que là où il y a de l'interactivité (Islands Architecture)
- Parfait pour : sites vitrines, blogs, docs, landing pages
- Performances imbattables en Lighthouse
- Content Collections pour le contenu Markdown/MDX
6. Évolution historique Du HTML statique à l'ère IA — 30 ans en accéléré
1991-1999 L'ère statique
HTML pur, pages statiques, tableaux pour la mise en page, GIFs animés, compteurs de visites. CSS apparaît (1996) mais peu utilisé. JavaScript naît en 10 jours chez Netscape (1995).
2000-2005 L'ère dynamique & Flash
PHP/MySQL dominent. Flash pour les animations. CSS Zen Garden montre la puissance du CSS. Les designs « pixel perfect » avec Photoshop. Ajax apparaît (XMLHttpRequest).
2006-2012 L'ère jQuery & Mobile
jQuery révolutionne le JS (2006). iPhone lance l'ère mobile (2007). Bootstrap (2011) démocratise le responsive. Premières SPA avec Backbone.js et AngularJS (v1).
2013-2017 L'ère des frameworks
React (2013), Vue (2014), Angular 2 (2016). Le Virtual DOM, les composants, le state management (Redux). Webpack pour le bundling. ES6 modernise JavaScript. Node.js explose.
2018-2022 L'ère full-stack JS
Next.js et Nuxt.js (SSR). Hooks React (2019). Tailwind CSS détrone Bootstrap. TypeScript devient mainstream. Svelte et la compilation. JAMstack. Vercel/Netlify.
2023-2026 L'ère IA & Server-first
React Server Components. Astro & Islands Architecture. Bun comme runtime alternatif. Vite remplace Webpack. AI-assisted coding (Copilot, Claude). Les frameworks « ship less JS ». Signals comme modèle de réactivité.
7. CSS moderne & Design Systems Styler comme un pro en 2026
Les approches CSS en 2026
| Approche | Principe | Exemples | Verdict 2026 |
|---|---|---|---|
| CSS pur / vanilla | Fichiers .css classiques avec sélecteurs |
custom.css, BEM naming | Toujours valide pour petits projets. CSS natif a rattrapé beaucoup de retard (nesting, container queries, :has()) |
| Préprocesseurs | Langages compilés en CSS (variables, mixins, nesting) | Sass/SCSS, Less | En déclin — CSS natif fait désormais variables + nesting |
| Utility-first | Petites classes utilitaires combinées dans le HTML | Tailwind CSS, UnoCSS | Dominant en 2026 — très productif, purge le CSS inutilisé |
| CSS-in-JS | Styles écrits directement dans le JavaScript | styled-components, Emotion | En déclin (runtime overhead). Remplacé par CSS Modules ou Tailwind |
| CSS Modules | Fichiers CSS scopés par composant (pas de conflit de noms) | .module.css | Bonne alternative légère à CSS-in-JS |
| Frameworks UI | Composants pré-stylés prêts à l'emploi | shadcn/ui, Radix, DaisyUI, PrimeVue | shadcn/ui domine (composants copiables, pas de dépendance) |
Fonctionnalités CSS natives 2026 🆕
Le CSS natif a énormément progressé. Ces fonctionnalités sont supportées par tous les navigateurs modernes :
- CSS Nesting — imbriquer les sélecteurs comme en Sass (
.card { .title { ... } }) - Container Queries — responsive basé sur le conteneur, pas la fenêtre (
@container) - :has() — le « sélecteur parent » tant attendu (
.card:has(img) { ... }) - Subgrid — aligner les enfants de grille avec la grille parente
- View Transitions API — animations de transition entre pages (SPA-like sans JS)
- Scroll-driven animations — animations liées au défilement sans JS
- @layer — contrôler la cascade CSS (adéu
!important) - color-mix(), oklch() — nouveaux espaces colormétriques pour des couleurs plus naturelles
Qu'est-ce qu'un Design System ? Architecture
Un Design System est un ensemble de règles, composants et patterns réutilisables qui garantissent la cohérence visuelle et fonctionnelle d'un produit.
- Tokens — Couleurs, typographies, espacements, ombres (variables CSS / JSON)
- Composants — Boutons, cartes, modals, formulaires, navigation
- Patterns — Combinaisons de composants (hero, pricing table, feature grid)
- Documentation — Guidelines d'utilisation, do/don't
Exemples célèbres : Material Design (Google), Carbon (IBM), Fluent (Microsoft), Primer (GitHub), Lightning (Salesforce).
8. UI/UX — Les principes qui comptent Concevoir pour l'humain
UI vs UX — Clarification
UI — User Interface
L'aspect visuel : couleurs, typographies, boutons, icônes, espacement, animations. Le « look and feel ».
« Est-ce que c'est beau ? »
UX — User Experience
L'expérience globale : fluidité, intuitivité, parcours utilisateur, accessibilité, satisfaction. Le « comment ça se vit ».
« Est-ce que c'est facile et agréable ? »
Les 10 lois UX fondamentales Incontournable
- Loi de Hick — Plus il y a de choix, plus la décision est lente. Simplifiez les options.
- Loi de Fitts — Plus un élément est gros et proche, plus il est facile à cliquer. CTA bien dimensionnés.
- Loi de Jakob — Les utilisateurs préfèrent les interfaces qui fonctionnent comme celles qu'ils connaissent déjà.
- Loi de Miller — La mémoire de travail retient 7±2 éléments. Groupez l'information.
- Effet Von Restorff — L'élément visuellement différent est mémorisé. Mettez en valeur le CTA principal.
- Loi de proximité — Les éléments proches sont perçus comme liés. Espacez les groupes logiques.
- Principe de Pareto — 80% des utilisateurs n'utilisent que 20% des fonctionnalités. Priorisez.
- Effet de position sérielle — On retient le premier et le dernier élément d'une liste. Placez le CTA en début ou fin.
- Règle du Peak-End — L'expérience est jugée sur son point fort et sa fin. Soignez l'onboarding et la confirmation.
- Charge cognitive — Réduisez l'effort mental : labels clairs, états visuels, feedback immédiat.
Checklist UI/UX rapide
Typographie
- 2 polices maximum (titre + corps)
- Taille de base : 16px minimum
- Interligne : 1.5 à 1.7 pour le corps
- Contraste WCAG AA minimum (4.5:1)
- Largeur de ligne : 50-75 caractères
Couleurs
- Palette : 1 primaire, 1 secondaire, 1 accent, neutres
- Maximum 3-4 couleurs de marque
- Tester l'accessibilité (daltonisme)
- Dark mode : pas juste inverser les couleurs
- Utiliser la couleur pour guider, pas décorer
Espacement
- Échelle cohérente : 4px, 8px, 16px, 24px, 32px, 48px
- Le vide est un élément de design (white space)
- Padding interne ≥ margin entre éléments
- Cohérence avant tout
Interaction
- Feedback immédiat sur chaque action
- Cible tactile : 44px × 44px minimum (mobile)
- États visuels : hover, focus, active, disabled
- Animations : 200-300ms, ease-out
Accessibilité (a11y) — Pas optionnel en 2026 Obligation légale
- WCAG 2.2 niveau AA — le standard minimum (obligation légale en Europe depuis EAA 2025)
- HTML sémantique —
<nav>,<main>,<button>(pas des<div>déguisés) - Attributs ARIA —
aria-label,aria-expanded,rolequand nécessaire - Navigation clavier — tout doit être accessible sans souris (Tab, Enter, Escape)
- Alt text — toute image a un attribut
altpertinent - Contraste — texte/fond ratio ≥ 4.5:1 (normal) ou ≥ 3:1 (large)
9. Boîte à outils L'arsenal du développeur frontend 2026
Environnement de développement
| Outil | Catégorie | Pourquoi | Prix |
|---|---|---|---|
| VS Code | Éditeur | Léger, extensible, le plus utilisé (>70% des devs). Extensions : Prettier, ESLint, GitLens, Tailwind IntelliSense | Gratuit |
| Cursor / Windsurf | Éditeur IA | VS Code forkés avec intégration IA native (autocomplete, chat, refactoring). Tendance forte 2026. | Freemium |
| Chrome DevTools | Debug | Inspect, Console, Network, Performance, Lighthouse intégré. Indispensable. | Gratuit |
| Git + GitHub | Versioning | Gestion de code source. Obligatoire pour tout projet, même solo. | Gratuit |
| Vite | Build tool | Démarrage instantané (ESM natif), HMR ultra rapide. Remplacement de Webpack. | Gratuit |
Design & Prototypage
| Outil | Usage | Pour qui | Prix |
|---|---|---|---|
| Figma | Design UI, prototypage, design systems, collaboration temps réel | Designers, développeurs, chefs de projet | Gratuit (limité) |
| Penpot | Alternative open source à Figma | Ceux qui veulent éviter la dépendance Adobe/Figma | Gratuit |
| Storybook | Développement isolé de composants UI + documentation vivante | Développeurs frontend, équipes | Gratuit |
| Excalidraw | Wireframes et schémas rapides (style whiteboard) | Tout le monde | Gratuit |
Tests & Qualité
| Outil | Type de test | Framework | Prix |
|---|---|---|---|
| Vitest | Tests unitaires & intégration | Compatible Vite, API Jest-compatible | Gratuit |
| Playwright | Tests end-to-end (E2E) navigateur | Multi-navigateur, auto-wait, par Microsoft | Gratuit |
| Cypress | Tests E2E (alternatif) | DX excellente, dashboard visuel | Freemium |
| Lighthouse | Audit perf / accessibilité / SEO | Intégré dans Chrome DevTools | Gratuit |
| axe DevTools | Audit accessibilité avancé | Extension Chrome, détection WCAG | Freemium |
Déploiement & Hosting
| Plateforme | Forces | Idéal pour | Prix |
|---|---|---|---|
| Vercel | Déploiement instant, Edge Functions, créateur de Next.js | Next.js, React, tout framework | Freemium |
| Netlify | CDN global, forms, serverless functions | Sites statiques, JAMstack, Astro | Freemium |
| Cloudflare Pages | CDN le plus rapide, Workers, gratuit généreux | Sites statiques, SSR léger | Gratuit (généreux) |
| Railway / Render | Hébergement backend + frontend, BDD incluse | Apps full-stack Node, Python | Freemium |
10. Tendances 2026 Ce qui change le jeu
HOT IA dans le workflow frontend
L'IA ne remplace pas le développeur, elle accélère tout :
- AI coding assistants — Cursor, GitHub Copilot, Claude Code : autocomplete intelligent, refactoring, débug
- Design-to-code — Figma → code via plugins IA (Locofy, Builder.io)
- AI-first testing — génération automatique de tests, détection de régressions visuelles
- V0 by Vercel — génération d'UI à partir de prompts texte
HOT Tendances techniques fortes
Server Components (React 19+)
Les composants s'exécutent côté serveur, zéro JS envoyé au client pour les parties non interactives. Changement de paradigme majeur.
Signals (Angular, Solid, Svelte, Preact, Vue)
Nouveau modèle de réactivité fine-grained qui remplace le Virtual DOM. Plus rapide, plus prévisible. TC39 proposal en cours.
Edge Computing
Exécuter le code au plus près de l'utilisateur (Cloudflare Workers, Vercel Edge, Deno Deploy). Latence < 50ms partout dans le monde.
Web Components natifs
Standards du navigateur (<template>, Shadow DOM, Custom Elements) qui gagnent enfin en maturité avec Lit et Shoelace.
WASM (WebAssembly)
Exécuter C++/Rust/Go dans le navigateur à vitesse quasi-native. Utilisé pour : codecs vidéo, édition d'image (Figma), jeux, crypto.
Bun runtime
Runtime JS ultra-rapide (Zig-based), drop-in replacement de Node.js. Bundler + test runner + gestionnaire de paquets intégrés.
HOT Tendances UI/UX
- Bento Grid layouts — grilles asymétriques inspirées d'Apple, composables et dynamiques
- Micro-interactions IA — animations contextuelles générées dynamiquement selon le comportement utilisateur
- Glassmorphism évolué — effets de verre/flou avec
backdrop-filter, subtils et fonctionnels - Variable fonts — une police, des dizaines de variations (poids, largeur, style) sans chargement supplémentaire
- Dark mode natif — attendu par défaut, gérable en CSS pur (
prefers-color-scheme) - Scroll-driven storytelling — animations narratives pilotées par le scroll (CSS natif désormais)
- Spatial design — influence Apple Vision Pro, profondeur et couches visuelles (pas de 3D, mais de la profondeur)
- Inclusivité par défaut — a11y, i18n, RTL, responsive : pas en après-coup mais dès le départ
11. Roadmap d'apprentissage Par où commencer, dans quel ordre
Phase 1 — Les fondations 1-3 mois
- HTML sémantique — Structure, formulaires, accessibilité de base
- CSS — Flexbox, Grid, responsive design, animations de base
- JavaScript — Variables, fonctions, DOM, événements, fetch API
- Git — init, add, commit, push, pull, branches
- Chrome DevTools — Inspecter, débugger, profiler
Phase 2 — L'outillage moderne 2-4 mois
- npm — Installer des paquets, comprendre package.json
- Un framework CSS — Tailwind CSS (recommandé) ou Bootstrap
- Un framework JS — React (pour le marché) ou Vue (pour l'apprentissage)
- TypeScript — Les bases du typage
- Vite — Créer un projet, comprendre le build
Phase 3 — Le niveau professionnel 3-6 mois
- State management — Zustand (React), Pinia (Vue), ou le state du framework
- Routing — React Router, Vue Router, ou le routing du méta-framework
- Méta-framework — Next.js (React) ou Nuxt (Vue) pour SSR/SSG
- Tests — Vitest pour les unit tests, Playwright pour les E2E
- API — Concevoir et consommer des REST APIs
- CI/CD — GitHub Actions, déploiement automatique
Phase 4 — L'expertise 6+ mois
- Performance — Core Web Vitals, lazy loading, code splitting, profiling
- Architecture — Design patterns, monorepos (Turborepo), micro-frontends
- Accessibilité avancée — WCAG 2.2, ARIA patterns, audit complet
- Design Systems — Créer et maintenir un système de composants
- DevOps frontend — Docker, monitoring, feature flags, A/B testing
- Contribution open source — Le meilleur accélérateur de carrière