Feuille de route compétences frontend engineer pour 2026

Le frontend en 2026, c'est React ou un rival, TypeScript par défaut, un bundler qui livre de petits bundles et une obsession des Core Web Vitals. Cette feuille de route montre la stack exacte, les soft skills que les équipes produit paient et le plan sur 12 mois pour passer de débutant à un frontend engineer qui livre.

Le marché de l'emploi frontend s'est scindé en deux voies. Voie un : les product engineers qui s'approprient les fonctionnalités côté utilisateur de bout en bout, de Figma au déploiement. Voie deux : les platform engineers qui construisent le design system, le pipeline de build et la stratégie de rendu que les autres product engineers utilisent. La plupart des recrues de 2026 sont en voie un. Cette feuille de route vise ce parcours, avec des notes sur comment basculer vers la plateforme plus tard.

Qui est un frontend engineer en 2026

Un frontend engineer construit l'interface que les utilisateurs touchent réellement. En 2026, cela signifie :

• Traduire des designs Figma en composants React/Vue/Svelte accessibles et performants.
• S'approprier l'état côté client, la récupération de données et les états loading/error/empty de chaque écran.
• Atteindre les cibles Core Web Vitals (LCP < 2,5s, INP < 200ms, CLS < 0,1) sur de vrais appareils utilisateurs, pas seulement sur localhost.
• Écrire des tests unitaires avec Vitest/Jest, des tests de composants avec Testing Library et au moins du E2E basique avec Playwright ou Cypress.
• Travailler avec les backend engineers pour façonner des contrats d'API qui ne forcent pas le client à dix aller-retours.

Junior frontend, c'est “sait construire le composant que quelqu'un a conçu”. Niveau intermédiaire, c'est “sait construire la fonctionnalité quand le design a des trous”. Senior, c'est “sait décider ce que la fonctionnalité devrait être quand le produit est incertain”.

Stack de base — ce qu'il faut réellement apprendre

Soft skills et pensée système

• Empathie design. Bien lire Figma, poser les bonnes questions aux designers, contester les patterns qui ne fonctionneront pas sur mobile ou avec les lecteurs d'écran.
• Négociation d'API. Les backend engineers vous donneront des API qui forcent trois aller-retours. Un bon frontend engineer demande le bon endpoint au lieu d'accepter le chemin lent.
• Discipline loading/error/empty. Chaque écran a quatre états, pas un. Les frontend engineers de niveau intermédiaire livrent les quatre par défaut.
• Budgets de performance. Traitez la taille du bundle et les Core Web Vitals comme des contraintes, pas des arrière-pensées. Les frontends seniors fixent le budget pour l'équipe.
• La réalité cross-browser. Safari reste bizarre. Testez sur de vrais appareils, pas seulement avec le throttling des Chrome DevTools.

Plan suggéré sur 3 / 6 / 12 mois

Mois 1 à 3 : fondations

• Maîtrisez HTML/CSS/JS sans framework d'abord. Construisez trois petits projets en vanilla JS (todo, météo, search-as-you-type).
• Adoptez TypeScript tôt. Mettez strict: true dès le premier jour.
• Apprenez React ou Vue. Construisez une app tutoriel, puis reconstruisez-la sans le tutoriel.
• Apprenez Git et déployez quelque chose sur Vercel ou Netlify.

Mois 4 à 6 : une vraie app de portfolio

• Construisez une SPA ou une app Next.js de qualité production : authentification, récupération de données, formulaires, routing, déployée.
• Ajoutez des tests — au moins 10 tests de composants et 2 flux E2E.
• Atteignez les cibles Core Web Vitals sur la version déployée. Documentez-le avec des captures Lighthouse.
• Rendez-la accessible : la navigation au clavier fonctionne, axe DevTools affiche zéro violation.

Mois 7 à 12 : profondeur et entretiens

• Lisez la documentation React de bout en bout. Lisez un livre ou un cours axé performance (Frontend Masters en a de bons).
• Contribuez une PR à un projet frontend OSS — bibliothèque de composants ou framework.
• Entraînez-vous au system design frontend : concevez Twitter, concevez un widget de chat, concevez une galerie d'images. La structure diffère du system design backend.
• Postulez avec un site de portfolio qui charge en <1,5s sur mobile. Les hiring managers le testent.

Projets perso à construire

• Un formulaire complexe. Multi-étapes, validation, autosave, upload de fichier. Les entretiens frontend adorent les formulaires.
• Un dashboard temps réel. WebSockets ou SSE, graphiques, UI optimiste. Montre les compétences données + UI ensemble.
• Un petit design system. 8 à 12 composants dans Storybook, documentés, testés. Signale que vous pouvez travailler sur la plateforme.
• Une UI de chat IA en streaming. Tokens en streaming, historique des messages, reprise sur erreur. Le recrutement 2026 adore ça.

Budgets de performance et Core Web Vitals en pratique

La performance est l'endroit le plus facile pour un candidat frontend de se démarquer en 2026, parce que la plupart des candidats ne mesurent pas. Les hiring managers repèrent la différence dans les trente premières secondes d'ouverture d'un site de portfolio.

• Fixez un budget avant d'écrire du code. 150 Ko de JS, 75 Ko de CSS, LCP sous 2,0s sur une connexion 4G. Des chiffres, pas des impressions.
• Mesurez sur de vrais appareils. Le throttling des Chrome DevTools ment. Utilisez un vrai Android milieu de gamme (ou BrowserStack) pour les chiffres réels.
• Suivez les régressions en CI. Lighthouse CI sur chaque PR, faites échouer le build quand le LCP régresse de 200ms ou que le bundle grossit de 20 Ko.
• Les quatre plus gros gains. Tree-shaker les exports inutilisés, lazy-loader les composants below-the-fold, optimiser les images avec next/image ou unpic, livrer une seule graisse de police avec font-display: swap.
• Les Server Components quand ils aident. Le Next.js App Router réduit drastiquement le JS client pour les pages riches en contenu. Ne les utilisez pas juste parce qu'ils existent ; utilisez-les quand ils livrent moins de code.

Une réponse d'entretien comme “J'ai réduit le LCP de 3,4s à 1,6s sur la page marketing en lazy-loadant le carrousel et en inlinant le CSS critique” est le genre de preuve concrète qui ferme une boucle.

Comment décrocher le poste frontend

• Un site de portfolio qui prouve votre savoir-faire. Un site perso qui atteint 100 sur Lighthouse et 95+ en accessibilité. Le portfolio lui-même est le CV.
• Un GitHub avec un ou deux repos soignés. Plus gros qu'un “clone de tutoriel”, plus petit qu'un “truc ambitieux abandonné”.
• Mots-clés CV. React, TypeScript, Next.js, Tailwind, Vitest, Playwright, Lighthouse, accessibilité, Core Web Vitals.
• Tours d'entretien : coding (composant ou vanilla JS), system design frontend, comportemental, parfois un take-home. Entraînez-vous aux quatre.
• Le take-home. Si vous en avez un, livrez-le comme s'il était en production : README, tests, vérification d'accessibilité, lien déployé. 80% des candidats sautent cela ; 80% des offres vont aux candidats qui ne le sautent pas.

FAQ