Entretien blanc Frontend Developer — pratique avec l'IA

Les entretiens frontend sondent deux choses à la fois : si vous livrez de l'UI, et si vous comprenez ce qui se passe réellement quand un navigateur affiche une page. Les questions qui décident des offres se situent en général à la jointure — « pourquoi est-ce lent ? », « pourquoi est-ce inaccessible ? », « pourquoi cet état ne se met-il pas à jour ? ». Ce guide montre comment utiliser les entretiens blancs IA pour répéter les réponses jusqu'à ce qu'elles deviennent automatiques.

La forme d'un entretien frontend moderne

Un loop frontend typique comporte quatre étapes : un appel de présélection avec le recruteur, un screening technique (45 à 60 minutes, un ingénieur vous interrogeant sur votre stack et votre expérience de livraison), un exercice de coding à emporter ou en direct, et un loop sur site ou virtuel de 3 à 5 tours (coding, system design pour l'UI, behavioral, parfois une critique de design). Les loops Senior ajoutent un tour d'architecture où vous devez défendre un système d'UI face à quelqu'un qui essaie de le casser.

Les entretiens blancs IA aident surtout pour le screening technique et le tour de system design d'UI. Les deux sont essentiellement de la conversation. Les exercices de coding, vous devriez les pratiquer dans un vrai éditeur — les entretiens blancs IA sont mauvais pour vous donner la boucle de feedback du « est-ce que ça tourne vraiment ? ». Pour les tours d'entretien où la réponse tient en paragraphes (« décrivez comment React réconcilie une liste » ou « expliquez-moi comment rendre cette page plus rapide »), les entretiens blancs IA reproduisent le format presque parfaitement.

JavaScript et TypeScript : ce que les recruteurs sondent vraiment

Les questions JS classiques apparaissent encore parce qu'elles fonctionnent toujours comme des filtres. Closures, hoisting, le binding de this, l'event loop, micro vs macro tasks, promises vs async/await, la différence entre == et === — des attentes raisonnables. Mais les questions intéressantes sont une couche plus profond. Pas « qu'est-ce qu'une closure », mais « pourquoi ce setTimeout à l'intérieur d'une boucle for affiche-t-il le mauvais nombre, et comment le corrigez-vous de trois façons différentes ? ».

Questions TypeScript auxquelles vous devriez savoir répondre

• La différence entre interface et type, et quand chacun est le bon choix.
• Ce que unknown vous apporte que any ne donne pas.
• Comment les unions discriminées affinent les types en pratique.
• Quand les génériques aident et quand ils rendent le code illisible.
• Ce que fait as const, et pourquoi vous y auriez recours.

Le piège à éviter : ne citez pas la doc mot pour mot. Les recruteurs le repèrent. Parlez de vrai code — « j'ai utilisé une union discriminée le trimestre dernier pour nos types de statut de paiement parce que le compilateur a attrapé un bug où nous avions oublié de gérer le cas remboursé ».

React et Vue : les questions au niveau du framework

React

Attendez-vous à la réconciliation, aux règles des hooks, à ce qui provoque un re-render, à pourquoi useEffect avec un mauvais tableau de dépendances casse des choses, à comment useMemo et useCallback diffèrent en pratique, à quand remonter l'état et quand le colocaliser, aux server components vs client components si vous passez un entretien pour un poste Next.js. Le mode d'échec le plus courant : les candidats expliquent les règles des hooks mais ne savent pas dire pourquoi elles existent. La raison : React utilise l'ordre des appels pour associer les appels de hooks à l'état — cassez l'ordre, vous cassez l'association.

Les questions React de niveau Senior poussent vers la perf et l'architecture. Comment rendriez-vous une liste de 10 000 éléments défilable sans perdre d'images ? Quand la virtualisation aide-t-elle et quand nuit-elle ? Comment mesurez-vous si un memo aide réellement ou ne fait qu'ajouter de la surcharge ? L'entretien blanc IA fera des relances — si vous dites « j'utiliserais la virtualisation », attendez-vous à « avec quelle bibliothèque, pourquoi celle-là, et qu'est-ce que ça vous coûte ? ».

Vue

Sujets spécifiques à Vue 3 : la composition API vs l'options API, quand la réactivité casse (affecter un index, remplacer tout le tableau), ref vs reactive, en quoi la réactivité basée sur les proxies diffère de celle de React. Les recruteurs Vue adorent poser des questions sur les pièges de la réactivité parce que le modèle est plus « magique » que celui de React, et les modèles magiques ont plus de bords.

Internals du navigateur, performance, accessibilité

Internals du navigateur

Le DOM est un arbre, le CSSOM est un arbre, le render tree est ce que vous peignez réellement. Invalidation du style, layout (reflow), paint, composite — connaissez le pipeline et ce qui déclenche chaque étape. Une question d'entretien fiable : « pourquoi est-il mauvais d'animer top et bon d'animer transform ? ». Réponse : transform saute le layout et le paint, et s'exécute sur le thread du compositeur.

Performance

Les Core Web Vitals comptent pour quiconque exploite un site public. LCP, INP (qui a remplacé FID début 2024), CLS — soyez prêt à définir chacun, à dire à quel comportement utilisateur il corrèle, et à nommer une ou deux façons d'améliorer chacun. Découpage des bundles, lazy loading des routes, choix du format d'image (AVIF/WebP), fetchpriority, les resource hints (preload, preconnect, dns-prefetch). Si vous avez déjà livré une amélioration de perf et que vous avez la métrique avant/après, commencez par ça.

Accessibilité

L'ordre de navigation au clavier, les focus traps pour les modales, les rôles ARIA vs le HTML sémantique (préférez le sémantique), les ratios de contraste des couleurs (4,5:1 pour le corps de texte, 3:1 pour le grand texte), le comportement des lecteurs d'écran avec du contenu dynamique (aria-live), les noms accessibles pour les boutons avec icône seule. Une question piège fréquente : « une div avec onclick est-elle accessible ? » — réponse non, il vous faut tabindex, des gestionnaires clavier et un rôle, ou utilisez simplement un button.

Les tours behavioral : ne les sous-estimez pas

Les candidats frontend perdent régulièrement des offres au tour behavioral parce qu'ils le traitent comme de la conversation de salon. Ce n'en est pas. Attendez-vous à : une histoire sur une décision technique difficile, une histoire sur un conflit interfonctionnel (designer vs ingénieur est le scénario frontend canonique), une histoire sur la livraison de quelque chose dans un délai serré, une histoire sur un incident de production. Ayez trois ou quatre histoires prêtes que vous pouvez adapter — format STAR (Situation, Tâche, Action, Résultat), le Résultat étant une métrique ou un résultat concret.

Un écueil frontend spécifique : quand on vous demande « parlez-moi d'une décision technique difficile », les candidats choisissent souvent une migration de framework (React vers Vue, Webpack vers Vite). C'est correct mais générique. Une histoire plus forte est un compromis UI/UX précis — « nous avons livré une fonctionnalité avec des mises à jour optimistes et accepté un scintillement de réconciliation occasionnel parce que le gain de latence valait plus que le polissage visuel ». Réel, précis, et révèle du jugement. Voyez notre guide d'entraînement à l'entretien behavioral pour le framework STAR complet.

Questions fréquentes