Un architecte front-end fixe la structure des applications web : un monorepo ou plusieurs dépôts, des micro-frontends ou une seule application modulaire, le mode de rendu de chaque page, les règles de dépendance entre bibliothèques. Les offres en France le cherchent surtout en Angular et en React, souvent avec Nx, Module Federation et un design system à faire vivre. Les questions d'entretien d'un architecte front-end portent donc sur des décisions et sur leurs effets mesurables, comme la taille du bundle, la durée de la CI ou l'INP d'une page.
Le titre recouvre des profils très différents. Certains sont d'excellents développeurs React ou Angular qui n'ont jamais tenu un monorepo partagé par plusieurs équipes. D'autres ont posé des micro-frontends là où une application modulaire suffisait, et l'équipe vit depuis avec des versions de React en double et des builds interminables. Les bons profils savent dire quand ils n'auraient pas découpé et parlent de dépendances partagées et de retour arrière.
Demandez une décision d'architecture front que la personne a prise et défendue, puis ce qu'elle changerait aujourd'hui. Sur un poste Angular, vérifiez la connaissance des signals et du rendu sans zone.js, qui changent l'organisation de l'état. Le PDF contient 30 questions sur six axes et un cas de 20 minutes sur un espace client à découper.
Les choix techniques qu'un architecte front-end arbitre
Module Federation
Le mécanisme qui charge à l'exécution du code publié par une autre application, avec des dépendances partagées comme React ou Angular. Né dans webpack 5, il existe en version 2.0, compatible webpack et Rspack, avec un manifeste, un runtime et des plugins. C'est le socle de la plupart des micro-frontends en production, et la source de leurs bugs les plus difficiles quand deux versions d'une même bibliothèque se chargent.
Nx et les monorepos
Nx connaît le graphe de dépendances entre applications et bibliothèques d'un même dépôt. La commande affected ne relance que les tâches touchées par un changement, et le cache évite de refaire un build déjà fait. Les tags et la règle enforce-module-boundaries empêchent une bibliothèque d'importer le code interne d'une autre équipe. Turborepo et les workspaces pnpm couvrent une partie du même besoin.
Stratégies de rendu (CSR, SSR, SSG, ISR)
Une page peut être rendue dans le navigateur, sur le serveur à chaque requête, au build, ou au build avec régénération périodique. Next.js, Nuxt, Angular SSR et Astro proposent ces modes, et React y ajoute les composants serveur. Le choix se fait page par page selon le référencement, la fraîcheur des données et le coût serveur. L'hydratation, qui rend interactif un HTML déjà affiché, est souvent ce qui ralentit.
Core Web Vitals
Les trois mesures de Google sur l'expérience réelle : LCP pour l'affichage du contenu principal (2,5 s au plus), INP pour la réactivité aux interactions (200 ms au plus) et CLS pour la stabilité visuelle (0,1 au plus), mesurées au 75e centile des visites. L'INP a remplacé le FID en 2024. Un architecte distingue les données de terrain (CrUX, RUM) des mesures de laboratoire comme Lighthouse.
Design system
La bibliothèque de composants et de tokens que partagent les applications. L'architecte décide de son format (paquet npm versionné, bibliothèque du monorepo, Web Components) et de sa place dans les micro-frontends, où chaque application risque d'embarquer sa propre copie et sa propre version.
TypeScript et contrats d'API
En mode strict, TypeScript sert de contrat entre équipes. Les types générés à partir d'un schéma OpenAPI ou GraphQL évitent qu'un front casse quand le back modifie un champ. Un BFF (backend for frontend) adapte les API aux besoins d'un écran quand plusieurs services fournissent les données.
Outils de build (Vite, Rspack, esbuild)
Vite domine les nouveaux projets, Rspack reprend la configuration webpack avec un moteur écrit en Rust, et le builder application d'Angular s'appuie sur esbuild et Vite. L'architecte suit la taille des bundles, le découpage en chunks et la durée du build en CI, qui conditionne la fréquence des livraisons.
Sécurité côté navigateur
Content Security Policy, stockage des jetons (cookie HttpOnly via un BFF plutôt que localStorage), dépendances npm figées par un lockfile et auditées. Un script tiers ou un micro-frontend compromis s'exécute avec les mêmes droits que le reste de la page, d'où l'importance de ces règles communes.
Le poste apparaît quand plusieurs équipes travaillent sur le même front : une application de gestion découpée par domaines, un espace client, un portail qui assemble plusieurs produits. L'architecte front-end est souvent rattaché à l'architecture ou à une guilde front, sans autorité hiérarchique sur les développeurs. Les intitulés varient : architecte front-end, frontend architect, architecte logiciel front web, parfois tech lead front transverse. Précisez dans l'offre le framework, l'existant (monorepo, micro-frontends, migration d'un client lourd ou d'une ancienne version d'Angular) et la part de code attendue, qui change beaucoup le profil.
Six compétences à contrôler chez un architecte front-end
- Découpage en micro-frontends et Module Federation
- Monorepo, frontières de modules et CI
- Stratégies de rendu et hydratation
- Performance web et Core Web Vitals
- Design system et dépendances partagées
- Sécurité navigateur et contrats d'API
Questions pour un architecte front-end, avec les réponses attendues
Chaque question vient avec ce qu'une bonne réponse contient et le signal qui doit vous alerter. Pas besoin d'être technique pour les poser : écoutez si le candidat raconte du vécu.
Question 1 · senior
Trois équipes veulent passer leur application Angular en micro-frontends. Quelles questions posez-vous avant de dire oui ?
Une bonne réponseIl cherche d'abord le besoin réel : des équipes qui doivent livrer à des rythmes différents, des domaines métier séparables, un existant devenu trop lourd pour un seul build. Il chiffre ensuite le coût : versions d'Angular et de RxJS à aligner entre applications, routage et authentification communs, tests de bout en bout sur l'assemblage, poids du premier chargement. Il propose souvent un monolithe modulaire dans un monorepo, avec des frontières contrôlées, et réserve les micro-frontends aux parties qui ont besoin d'un déploiement indépendant.
Signal d'alerte« C'est la bonne pratique actuelle », sans parler d'équipes ni de déploiement. Ou un découpage par type de composant (en-tête, menu, tableau) au lieu d'un découpage par domaine métier.
Question 2 · confirmé
Avec Module Federation, deux micro-frontends chargent chacun leur propre version de React. Comment le repérez-vous, et comment l'évitez-vous ?
Une bonne réponseLes symptômes : un bundle plus lourd, l'erreur « Invalid hook call », un contexte React que l'autre application ne voit pas. La correction passe par React et react-dom déclarés en dépendances partagées en singleton, avec une plage de versions compatible (requiredVersion), et une règle commune de montée de version entre équipes. Il sait vérifier dans l'onglet réseau ou avec les outils de Module Federation quelle version est réellement chargée.
Signal d'alerteNe jamais avoir configuré shared ni singleton. Ou « on met tout en partagé » sans savoir qu'une version incompatible peut faire échouer le chargement ou en charger une seconde copie.
Question 3 · confirmé
Dans un monorepo Nx de quarante projets, la CI prend une heure à chaque merge request. Que faites-vous ?
Une bonne réponseD'abord nx affected, pour ne lancer que les tâches touchées par le changement, avec comme base le dernier commit vert de la branche principale. Ensuite le cache des tâches, partagé entre les machines de CI, puis la répartition sur plusieurs agents. Il regarde aussi le graphe de dépendances : une bibliothèque utilitaire importée partout rend presque tout affecté à chaque modification, et il la découpe.
Signal d'alertePrendre des machines plus grosses, ou désactiver des tests pour gagner du temps.
Question 4 · confirmé
Une fiche produit doit être bien référencée, afficher un prix à jour et rester rapide. Quel mode de rendu choisissez-vous ?
Une bonne réponseUn rendu serveur ou statique de la page pour le référencement et le LCP, régénéré périodiquement ou à la demande quand le catalogue change. Le prix et le stock, s'ils bougent à la minute, arrivent par un appel séparé ou un fragment non mis en cache. Il parle des en-têtes de cache du CDN, de ce qui doit être hydraté et de ce qui peut rester statique (composants serveur, îlots), et du coût serveur d'un SSR à chaque requête.
Signal d'alerteUne SPA rendue entièrement côté client « parce que Google exécute le JavaScript », ou du SSR à chaque requête sans aucun cache.
Question 5 · confirmé à senior
L'INP de votre application dépasse 200 ms sur mobile. Comment trouvez-vous la cause ?
Une bonne réponseIl part des données de terrain (CrUX, ou un outil de RUM qui remonte l'INP par interaction) pour repérer les interactions lentes, puis les reproduit dans l'onglet Performance de Chrome avec un processeur bridé. Causes habituelles : longues tâches JavaScript, re-rendus trop larges, scripts tiers, hydratation encore en cours au moment du clic. Corrections : découper le travail (scheduler.yield, setTimeout), différer l'hydratation, alléger les gestionnaires d'événements, limiter la portée des re-rendus.
Signal d'alerteUn score Lighthouse en local comme seule preuve, alors qu'un audit de chargement ne mesure pas l'INP. Ou « on change de framework » sans diagnostic.
Recevez la fiche d'entretien complète en PDF
La fiche pour mener l'entretien de bout en bout, prête à imprimer ou à partager avec le manager.
- 30 questions sur 6 axes, avec la bonne réponse, le signal d'alerte et la relance
- Le niveau visé pour chaque question
- Une mise en situation de 20 minutes et ce qu'on attend du candidat
- La grille d'évaluation de 1 à 4, axe par axe
Recruter un architecte front-end : les doutes fréquents
Quelle différence entre un architecte front-end et un tech lead front ?
Le tech lead front tient une équipe et son code : revue, découpage des tâches, livraison. L'architecte front-end travaille sur plusieurs équipes ou plusieurs applications à la fois. Il fixe la structure commune (dépôts, découpage, rendu, dépendances partagées), écrit les décisions et vérifie qu'elles sont appliquées. Il code encore, surtout sur les socles et les preuves de concept. Un tech lead qui a déjà tenu un monorepo partagé par plusieurs équipes peut évoluer vers ce poste.
Faut-il exiger une expérience des micro-frontends ?
Seulement si votre existant en contient ou si le projet en prévoit vraiment. Beaucoup d'architectures front saines reposent sur une application modulaire dans un monorepo. Vérifiez surtout que la personne sait dire quand le découpage se justifie et ce qu'il coûte en versions partagées, en tests d'assemblage et en performance du premier chargement. Un profil qui en a posé partout sans pouvoir citer une limite vous coûtera plus cher qu'un profil prudent.
Quel test technique proposer à un architecte front-end ?
Un exercice de conception discuté à l'oral fonctionne mieux qu'un exercice de code à rendre. Donnez un existant réaliste, avec une application qui grossit, des équipes qui se bloquent et des mesures de performance, puis demandez une cible et une trajectoire. Ajoutez la lecture d'une configuration réelle, un fichier Module Federation ou un graphe Nx, pour vérifier que la personne connaît les outils de près. Le cas du PDF suit ce format.
Angular ou React : l'architecte doit-il connaître les deux ?
Il doit maîtriser en profondeur le framework de vos applications : rendu, gestion de l'état, montées de version. Connaître l'autre aide quand plusieurs frameworks cohabitent ou qu'une migration se prépare. En Angular, vérifiez les signals, le rendu sans zone.js et les blocs @defer. En React, les composants serveur et le rendu concurrent. Un architecte resté sur une ancienne version du framework risque de poser des choix déjà dépassés.
Pour structurer vos autres entretiens, consultez aussi nos pages sur les questions d'entretien de recrutement, la méthode de l'entretien structuré et la grille d'évaluation d'entretien.
