Entretiens de conception de systèmes frontend

Lors des entretiens frontend de niveau senior, on vous demande de concevoir de bout en bout une fonctionnalité d'interface non triviale : fil d'actualité, saisie semi-automatique, galerie d'images ou tableau de bord à défilement infini. Les évaluateurs jugent l'architecture, la compréhension des compromis, les réflexes en matière de performances et la communication — pas les connaissances superficielles des frameworks.

La plupart des entretiens de 45 à 60 minutes suivent ce déroulement : 1) Clarification des exigences (5 min). 2) Esquisse de l'architecture générale (10 min). 3) Découpage des composants (10 min). 4) Récupération des données et gestion de l'état (10 min). 5) Performances et accessibilité (10 min). 6) Approfondissement d'un domaine (au choix de l'intervieweur).

Ne commencez pas à coder. Demandez : appareils ciblés ? connexion ou utilisation anonyme ? prise en charge hors ligne ? mises à jour en temps réel ? échelle attendue (10 utilisateurs contre 10 M) ? exigences d'accessibilité ? navigateurs pris en charge ? Ces décisions ont des répercussions sur toute la conception.

Dessinez les blocs : client (SPA ou SSR ?), passerelle API, services, cache, CDN. Indiquez les actions de l'utilisateur et le flux de données. Mentionnez rapidement les cas limites — cela montre que vous avez construit des systèmes réels.

Esquissez une hiérarchie de composants. NewsFeed → Header, Story[], Composer. Story → Avatar, Content, Actions, Comments. Identifiez les composants réutilisables et ceux qui sont propres à une fonctionnalité.

Où chaque élément d'état doit-il être stocké ? Local (useState), dans l'URL (routeur), dans l'état serveur (React Query) ou dans l'état client (Zustand) ? Discutez de la stratégie de récupération : rendu SSR initial, défilement infini, mises à jour WebSocket en temps réel et interface optimiste.

Division du code aux frontières des routes. Listes virtualisées pour les longs fils d'actualité. Optimisation des images (chargement différé + AVIF/WebP). Évitez de bloquer le fil d'exécution principal. Budgets de regroupement. SW donnant la priorité au cache pour les visites répétées.

HTML sémantique. Navigation au clavier. Rôles ARIA et régions dynamiques. Contraste des couleurs. Tests avec un lecteur d'écran. En prime, mentionnez la gestion du focus lors d'un changement de route.

Discutez des points suivants : défilement infini avec IntersectionObserver, virtualisation pour économiser la mémoire, mentions J'aime optimistes, indicateur de nouvelle publication en temps réel, chargement différé des images avec espace réservé flouté, SSR pour le référencement, mise en cache ISR/edge pour les chronologies populaires.

Discutez des points suivants : saisie avec anti-rebond, AbortController pour annuler les requêtes obsolètes, déduplication des requêtes, mise en cache des réponses (LRU), navigation au clavier (haut/bas/entrée/échappement), rôles ARIA de zone de recherche combinée et gestion du clavier virtuel mobile.

Discutez des points suivants : disposition en maçonnerie ou en grille, srcset adaptatif pour les écrans Retina, chargement différé basé sur les intersections, préchargement de l'image suivante, visionneuse ou modale avec piège de focus, gestes de balayage sur mobile, navigation au clavier avec les flèches et liens directs.

Pour chaque choix, mentionnez l'alternative et expliquez pourquoi vous avez retenu celui-ci. « J'utiliserais IntersectionObserver pour le chargement différé, car il est natif et efficace. Autre possibilité : un écouteur de défilement avec limitation — plus simple, mais moins fluide sur les processeurs lents. » C'est ce que les intervieweurs expérimentés valorisent.

1) Se lancer dans le code avant d'avoir clarifié les exigences. 2) Négliger l'accessibilité. 3) Oublier les états d'erreur (échec réseau, résultats vides). 4) Ne pas réfléchir aux états de chargement. 5) Donner des réponses vagues (« J'utiliserais React » — mais quelle architecture ?).

Définissez d'abord le périmètre. Architecture générale (client, API, cache, CDN). Arbre des composants. Emplacement de l'état (local, URL, cache serveur, global). Stratégie de récupération des données. Performances (division du code, virtualisation, optimisation des images). Accessibilité (clavier, ARIA, contraste). Présentez les compromis. Évitez de passer directement au code. Entraînez-vous sur les modèles classiques : fil d'actualité, saisie semi-automatique, galerie et tableau de bord.