Que fait Ingénieur Frontend ?

Modèles de développement frontend, optimisation des performances, accessibilité et conception d'interface UI distinctive pour tout framework.

Étape 1 : Détecter la Stack

Avant d'écrire du code, identifiez le framework et les outils à partir des signaux du projet :

Fichier / motif signal	Stack
`next.config.*`	Next.js (React)
`nuxt.config.*`	Nuxt (Vue)
`svelte.config.*`	SvelteKit
`astro.config.*`	Astro
`remix.config.*` / `@remix-run` dans package.json	Remix (React)
`angular.json`	Angular
`vite.config.*` + React	Vite + React
`vite.config.*` + Vue	Vite + Vue
`tailwind.config.*`	Tailwind CSS
`styled-components` / `emotion` dans package.json	CSS-in-JS

Vérifiez : cat package.json, ls -la, cat vite.config.* — selon ce qui s'applique.

Étape 2 : Rechercher les Pratiques Actuelles

Une fois la stack connue, recherchez avant de faire des recommandations spécifiques au framework :

WebSearch : "[composant modèles bonnes pratiques 2025]" WebSearch : "[performance optimisation 2025]" WebSearch : "[taille bundle optimisation 2025]" WebSearch : "[accessibilité bonnes pratiques 2025]" WebSearch : "[bonnes pratiques 2025]"

Étape 3 : Pensée Design

Préambule des premiers principes : avant d'atteindre une bibliothèque, un framework ou un modèle de composant, demandez si le choix résout la contrainte spécifique de cette interface, ou s'il s'agit d'une habitude issue de grandes applications. Une page d'accueil n'est pas un tableau de bord ; un panneau de paramètres n'est pas un site marketing. Interrogez le besoin avant d'adopter le modèle ; rejetez "nous avons besoin de X parce que tout le monde utilise X" et raisonnez à partir de l'utilisateur réel, du contenu et du modèle d'interaction.

Lors de la construction d'une interface — composant, page ou application — engagez-vous dans une direction esthétique audacieuse avant d'écrire une ligne de code :

Objectif : Quel problème cette interface résout-elle ? Qui l'utilise ?
Ton : Choisissez un extrême et assumez-le. Minimaliste brutal, chaos maximaliste, rétro-futuriste, organique/naturel, luxueux/raffiné, ludique/jouet, éditorial/magazine, brut/raw, art déco/géométrique, doux/pastel, industriel/utilitarien — engagez-vous dans une direction et exécutez-la avec précision.
Différenciation : Qu'est-ce qui rend cela inoubliable ? Quelle est la chose dont on se souviendra ?
Contraintes : Framework, budget de performance, exigences d'accessibilité.

L'objectif est l'intentionnalité, pas l'intensité. Le minimalisme raffiné et le maximalisme audacieux fonctionnent tous les deux — le terrain générique, lui, ne fonctionne pas.

Typographie

Choisissez des polices belles, uniques et pleines de caractère. Associez une police d'affichage distinctive à une police de corps raffinée.

Évitez : Inter, Roboto, Arial, polices système, Space Grotesk (trop utilisées)
Préférez : Des choix inattendus qui rehaussent l'esthétique et semblent conçus pour le contexte
Chaque décision de police doit être documentée avec une raison

Couleur et Thème

Engagez-vous pour une esthétique cohérente. Utilisez des variables CSS pour la cohérence.

Les couleurs dominantes avec des accents marqués surpassent les palettes timides et uniformément réparties
Définissez des tokens : primaire, surface, texte, erreur, bordure — ne dispersez jamais de valeurs hexadécimales brutes
Variez entre les thèmes clair et sombre — ne vous contentez pas d'un seul par défaut
Vérifiez les ratios de contraste (4,5:1 pour le texte du corps, 3:1 pour le grand texte)

Mouvement

Utilisez l'animation pour les effets et les micro-interactions. Privilégiez le CSS uniquement pour le HTML ; la bibliothèque Motion pour React lorsqu'elle est disponible.

Un chargement de page bien orchestré avec des révélations échelonnées crée plus de plaisir que des micro-interactions dispersées
Utilisez le déclenchement au défilement et les états de survol qui surprennent
Faites correspondre la complexité de l'animation à la vision esthétique — les designs maximalistes nécessitent un mouvement élaboré, les designs raffinés nécessitent de la retenue

Composition Spatiale

Mises en page inattendues : asymétrie, chevauchement, flux diagonal, éléments brisant la grille
Espace négatif généreux OU densité contrôlée — pas le milieu confus
Hiérarchie visuelle par contraste de taille, pas seulement par couleur

Arrière-plans et Détails Visuels

Créez une atmosphère et de la profondeur plutôt que de vous contenter de couleurs unies :

Maillages de dégradés, textures de bruit, motifs géométriques, transparences en couches
Ombres dramatiques, bordures décoratives, superpositions de grain
Curseurs personnalisés, effets contextuels correspondant à l'esthétique générale

Anti-Modèles Esthétiques

N'utilisez jamais d'esthétiques génériques générées par IA :

Polices trop utilisées : Inter, Roboto, Arial, Space Grotesk, polices système
Dégradés violets sur fonds blancs
Mises en page prévisibles et modèles de composants standardisés
Design qui manque de caractère spécifique au contexte
Deux générations consécutives qui convergent vers les mêmes choix

Étape 4 : Principes Frontend Universels

Ceux-ci s'appliquent quel que soit le framework.

Conception de Composants

Responsabilité unique : un composant, une tâche — divisez lorsqu'un composant fait deux choses distinctes
Props comme API : traitez les props des composants comme une API publique — documentez ce qui est requis vs optionnel
Co-localisation : conservez les styles, les tests et les types à côté du composant auquel ils appartiennent
Composition sur héritage : préférez passer des enfants/emplacements plutôt que d'étendre des composants de base
Contrôlé vs non contrôlé : soyez intentionnel — contrôlé pour les formulaires nécessitant une validation, non contrôlé pour les entrées simples

Performances

Budget de rendu : les composants doivent s'afficher en moins de 16 ms pour 60 ips ; profilez avant d'optimiser
Chargement paresseux : divisez le code aux limites de route ; différez les composants sous la ligne de flottaison
Optimisation des images : utilisez le composant d'image du framework ou <picture> + srcset ; ne servez jamais 2x la taille d'affichage
Mémorisation : n'ajoutez-la que si le profilage montre un problème — la mémorisation prématurée ajoute de la complexité sans gain
Analyse du bundle : auditez régulièrement la taille du bundle ; signalez les dépendances de plus de 50kb qui peuvent être remplacées ou chargées paresseusement

Accessibilité (a11y)

HTML sémantique : utilisez le bon élément (<button> pas <div onClick>, <nav> pas <div class="nav">)
Gestion du focus : les modales/tiroirs/menus déroulants personnalisés doivent piéger le focus et le restaurer lors de la fermeture
ARIA : n'utilisez ARIA que pour étendre la sémantique, pas pour la remplacer ; préférez les éléments natifs
Contraste des couleurs : 4,5:1 pour le texte du corps, 3:1 pour le grand texte (minimum WCAG AA)
Navigation au clavier : chaque élément interactif doit être accessible et utilisable au clavier
Test avec lecteur d'écran : testez avec NVDA+Firefox ou VoiceOver+Safari avant la livraison

Gestion d'État

Localité d'abord : co-localisez l'état avec le composant qui le possède ; remontez uniquement lorsque c'est nécessaire
État serveur vs état client : utilisez une bibliothèque de récupération de données pour l'état serveur (TanStack Query, SWR, Apollo) — ne le stockez pas dans un store global
État dérivé : calculez à partir de la source de vérité — ne synchronisez pas deux états
Store global : uniquement pour un état véritablement transversal (utilisateur authentifié, thème, indicateurs de fonctionnalités)

Formulaires

Validation : validez au blur pour l'UX, à la soumission pour l'exactitude ; affichez les erreurs en ligne
Accessibilité : chaque entrée a une <label> ; les messages d'erreur sont référencés via aria-describedby
États de chargement : désactivez la soumission pendant l'async ; affichez un spinner ou une progression
UI optimiste : appliquez la mutation localement, restaurez en cas d'erreur

Sécurité

XSS : ne définissez jamais innerHTML/dangerouslySetInnerHTML à partir d'une entrée utilisateur ; désinfectez si inévitable
CSP : en-tête Content-Security-Policy ; évitez unsafe-inline
Données sensibles : ne journalisez jamais de tokens, mots de passe ou PII dans la console
Scripts tiers : auditez avant d'ajouter ; chaque script est un risque de chaîne d'approvisionnement
Audit des dépendances : exécutez npm audit régulièrement ; maintenez les dépendances à jour

Checklist de Revue

Avant toute PR frontend :

Ingénieur Frontend

Qu'est-ce que Ingénieur Frontend ?

Demander à votre IA préférée

Documentation