Frontend Academy · Leçon

Structure de dossiers par fonctionnalité

Organisez le code par domaine fonctionnel plutôt que par type, regroupez les tests, les styles et les composants au même endroit et imposez des frontières avec eslint-plugin-boundaries.

Structure de dossiers par fonctionnalité est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Deux façons d'organiser le code

Vous pouvez regrouper le code par type (components/, hooks/, services/, types/) ou par fonctionnalité (auth/, checkout/, dashboard/ — chacun contenant ses propres composants, crochets, etc.). L'organisation par fonctionnalité est préférable pour les applications moyennes à grandes.

Organisation par type — le piège par défaut

La structure classique des tutoriels React regroupe tout par type. Elle évolue mal : chaque modification de fichier touche plusieurs dossiers sans rapport, et « trouver tout le code du paiement » signifie effectuer une recherche avec grep dans toute l'arborescence.

// Type-based (avoid for large apps):
src/
  components/
    Button.tsx
    LoginForm.tsx
    CartItem.tsx
  hooks/
    useAuth.ts
    useCart.ts
  services/
    auth.ts
    cart.ts
  types/
    User.ts
    CartItem.ts

Structure par fonctionnalité

Regroupez dans un même dossier tout ce qui concerne une fonctionnalité. C'est facile à trouver, à supprimer et à comprendre.

src/
  features/
    auth/
      LoginForm.tsx
      SignupForm.tsx
      useAuth.ts
      auth.service.ts
      auth.types.ts
      auth.test.tsx
    cart/
      CartItem.tsx
      CartSummary.tsx
      useCart.ts
      cart.service.ts
      cart.types.ts
  shared/
    components/
      Button.tsx
    hooks/
      useDebounce.ts

Co-localisation au sein d'une fonctionnalité

Un dossier de fonctionnalité contient les composants, les crochets, les services, les types et les tests — tout le code nécessaire à ce domaine. Un nouveau développeur veut comprendre l'authentification ? Ouvrez auth/. Vous voulez supprimer l'authentification ? Supprimez le dossier.

Partagé ou spécifique à une fonctionnalité

Le code utilisé par au moins deux fonctionnalités est déplacé dans shared/ (ou lib/). Le code utilisé par une seule fonctionnalité y reste. Résistez à la tentation « cela pourrait être réutilisable plus tard » — attendez la deuxième utilisation avant de l'extraire.

Règles de séparation des fonctionnalités

Les fonctionnalités ne doivent pas s'importer directement les unes les autres. Si deux fonctionnalités doivent partager du code, l'élément partagé est déplacé dans shared/. Si elles doivent se coordonner, utilisez des événements ou un magasin partagé au niveau de l'application.

Faire respecter les séparations avec ESLint

Utilisez eslint-plugin-boundaries ou eslint-plugin-import pour imposer la règle suivante : les fonctionnalités peuvent importer depuis shared, mais pas depuis les autres fonctionnalités.

// .eslintrc.json
{
  "plugins": ["boundaries"],
  "settings": {
    "boundaries/elements": [
      { "type": "feature", "pattern": "src/features/*" },
      { "type": "shared",  "pattern": "src/shared/*" }
    ]
  },
  "rules": {
    "boundaries/element-types": ["error", {
      "default": "disallow",
      "rules": [
        { "from": "feature", "allow": ["shared"] },
        { "from": "shared",  "allow": ["shared"] }
      ]
    }]
  }
}

API publique par fonctionnalité

Chaque fonctionnalité expose une API publique via features/auth/index.ts. Le reste du code importe depuis '@/features/auth', et non depuis des chemins internes. Vous pouvez ainsi remanier l'implémentation interne sans interrompre les utilisateurs.

// features/auth/index.ts
export { LoginForm } from './LoginForm';
export { useAuth } from './useAuth';
export type { User, AuthState } from './auth.types';

// Consumers:
import { LoginForm, useAuth } from '@/features/auth';
// NOT: import { LoginForm } from '@/features/auth/LoginForm';

Imbriquer des sous-fonctionnalités

Les grandes fonctionnalités peuvent contenir des sous-dossiers : dashboard/widgets/, dashboard/charts/. Évitez de dépasser deux ou trois niveaux d'imbrication — la recherche devient pénible.

Où placer les routes

Les pages et les routes peuvent se trouver dans un dossier de premier niveau pages/ ou routes/. Elles restent légères : elles récupèrent les composants et les crochets des fonctionnalités, puis les assemblent.

src/
  pages/
    Dashboard.page.tsx   // composes Dashboard widgets from features/dashboard/
    Cart.page.tsx        // composes from features/cart/
  features/
  shared/

Migrer une application existante

Commencez uniquement par les nouvelles fonctionnalités : placez le nouveau code dans features/. Ne remaniez pas tout en une seule fois. Lorsque vous modifiez d'anciens fichiers, déplacez-les progressivement. Les règles de séparation d'ESLint empêchent les régressions dans la nouvelle structure.

Quand l'organisation par type reste adaptée

Pour les très petites applications (moins de 30 composants) ou les bibliothèques, l'organisation par type convient parfaitement. Passez à une organisation par fonctionnalité dès que vous avez des domaines métier distincts (authentification, paiement, facturation, paramètres).

Vérification rapide

Quel est le principal avantage organisationnel du regroupement du code par fonctionnalité plutôt que par type de fichier ?

Récapitulatif : structure par fonctionnalité

features/ contient le code propre à un domaine ; shared/ contient les utilitaires communs à plusieurs fonctionnalités. Chaque fonctionnalité exporte un index.ts public. Les fonctionnalités ne s'importent pas les unes les autres — elles importent uniquement depuis shared. Faites respecter cette règle avec eslint-plugin-boundaries. Les pages et les routes assemblent les fonctionnalités. Migrez progressivement. L'organisation par type convient aux petites applications.

Questions Fréquemment Posées

La leçon « Structure de dossiers par fonctionnalité » est-elle gratuite ?

Oui — le texte complet de « Structure de dossiers par fonctionnalité » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Structure de dossiers par fonctionnalité » ?

Organisez le code par domaine fonctionnel plutôt que par type, regroupez les tests, les styles et les composants au même endroit et imposez des frontières avec eslint-plugin-boundaries. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Structure de dossiers par fonctionnalité » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Design atomique : atomes, molécules et organismes
Configuration d’un monorepo avec Turborepo
Micro-frontends : fédération de modules
Structure de dossiers par fonctionnalité

← Retour à Frontend Academy