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

Question

Je travaille sur différents projets Web et je me demandais s'il existait une règle générale concernant la structure projet/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 ces derniers temps, je vois quelques projets, où chaque module ont son propre dossier avec son code (fichier .js), vue (.html), le style (fichiers .css/.Moins) 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 

y at-il des meilleures pratiques en ce qui concerne la structure du projet?

Answer 1

Vos exemples montrent deux structures de projet populaires, organiser les fichiers par type ou par module. Je préfère ce dernier (code séparé en modules) et je le vois beaucoup utilisé pour les frameworks frontend javascript. C'est quelque chose que le Angular style guide (une bonne référence pour les meilleures pratiques angulaires) se réfère à folders by feature.

Je fais référence au guide de style angulaire parce que vos exemples ont montré des projets angulaires, mais le concept peut être traduit en d'autres cadres. Le code est organisé par fonction, il est donc facile de trouver le fichier que vous avez besoin d'éditer. Comme quelqu'un l'a souligné dans un commentaire, cette structure de projet évolue bien au fur et à mesure que l'application et l'équipe grandissent en taille.