web-dev-qa-db-fra.com

Structure des dossiers / répertoires du projet Web - Meilleures pratiques

Je travaille sur différents projets Web et je me demandais s'il existe une règle générale concernant la structure du projet/des dossiers?

Beaucoup de mes applications sont construites dans la structure où chaque type de fichier a son propre répertoire. Par exemple:

└─┬root
  |
  ├─┬node_modules
  | └ // node_modules (npm libraries)
  |
  └─┬www
    |
    ├─┬Libs // Js libraries 
    | |
    | ├─┬Angular
    | | └ … (.js files)
    | |
    | └─┬Bootstrap
    |   └ … (.js files)
    |
    ├─┬JavaScript // my Js files
    | |
    | ├─┬Services
    | | └ … // my services (.js files)
    | |
    | ├─┬Controllers
    | | └ … // my controllers (.js files)
    | |
    | ├─┬Directives
    | | └ … // my directives (.js files)
    | |
    | └app.js // js entry point
    |
    ├─┬StyleSheets
    | |
    | ├─┬Less
    | | └ … // my styles (.less files)
    | |
    | └─┬Css
    |   └ … // my styles (.css files)
    |
    ├─┬Views
    | |
    | ├─┬Pages
    | | └ … // pages layout (.html files)
    | |
    | └─┬DirectivesTemplates
    |   └ // templates layout (.html files)
    |
    ├─┬Assets
    | |
    | ├─┬Fonts
    | | └ … // app fonts (.ttf/ .woff files)
    | |
    | └─┬Images
    |   └ // app images (.jpg/ .png files)
    |
    ├─┬Data
    | |
    | └ // app info (.json files)
    |
    └index.html // web site entry point

Cependant, récemment, je vois quelques projets, où chaque module a son propre dossier avec son code (fichier .js), la vue (fichier .html), le style (fichiers .css/.less) et les données (fichier .json, images, polices etc.) Par exemple:

└─┬root
  |
  ├─┬node_modules
  | └ // node_modules (npm libraries)
  |
  └─┬www
    |
    ├─┬Libs // Js libraries 
    | |
    | ├─┬Angular
    | | └ … (.js files)
    | |
    | └─┬Bootstrap
    |   └ … (.js files)
    |
    ├─┬Modules
    | |
    | ├─┬moduleA
    | | |
    | | ├moduleA.js   //modules controller
    | | |
    | | ├moduleA.html //modules view
    | | |
    | | ├moduleA.less //modules style
    | | |
    | | └moduleA.json //modules data
    | |
    | ├─┬moduleB
    | | |
    | | ├moduleB.js  
    | | |
    | | ├moduleB.html
    | | |
    | | ├moduleB.less 
    | | |
    | | ├moduleB.json 
    | | |
    | | └moduleB-icon.png
    | |
    | └─┬moduleC
    |   |
    |   ├moduleC.js  
    |   |
    |   ├moduleC.html
    |   |
    |   ├moduleC.less 
    |   |
    |   ├moduleC.json
    |   |
    |   └moduleC-font.woff
    |
    └index.html // web site entry point

Existe-t-il des meilleures pratiques concernant la structure du projet?

javascripthtmlcssproject-structure
14
Gil Epshtain

Vos exemples montrent deux structures de projet populaires, organisez les fichiers par type ou par module. Je préfère ce dernier (code séparé en modules) et je vois qu'il est beaucoup utilisé pour les frameworks frontaux javascript. C'est quelque chose que Guide de style angulaire (une bonne référence pour angular) fait référence à dossiers par fonctionnalité .

Je référence le guide de style Angular parce que vos exemples montraient des projets Angular, mais le concept peut être traduit dans d'autres frameworks. Le code est organisé par fonctionnalité, il est donc facile de trouver le fichier que vous devez modifier. Comme quelqu'un l'a souligné dans un commentaire, cette structure de projet évolue bien à mesure que l'application et l'équipe grandissent.

6
allienx