Структура папок / каталогов веб-проекта - Лучшие практики

Question

Я работаю над различными веб-проектами, и мне было интересно, есть ли какое-нибудь практическое правило относительно структуры проекта / папок?

Многие из моих приложений построены в структуре, где каждый тип файла имеет свой собственный каталог. Например:

└─┬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

Однако в последнее время я вижу несколько проектов, где у каждого модуля есть своя собственная папка со своим кодом (файл.js), представлением (файл.html), стилем (файлы.css/.less) и данными (файл.json, изображения, шрифты). и т.д.) Например:

└─┬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

Есть ли лучшая практика в отношении структуры проекта?

Answer 1

В ваших примерах показаны две популярные структуры проекта, организованные файлы по типу или по модулю. Я предпочитаю последнее (код, разделенный на модули), и я вижу, что его часто используют для каркасов внешнего интерфейса javascript. Это то, что в руководстве по стилю Angular (хороший справочник по лучшим практикам Angular) называется папками по функциям.

Я ссылаюсь на руководство по стилю Angular, потому что ваши примеры демонстрируют проекты Angular, но концепцию можно перевести на другие фреймворки. Код организован по функциям, поэтому легко найти файл, который нужно отредактировать. Как кто-то указал в комментарии, эта структура проекта масштабируется вместе с ростом приложения и команды.

Answer 2

Я выделил три типа дизайна:

• Атомарный дизайн вводит методологию представления наших пользовательских интерфейсов (компонентов) как продуманных иерархий.
• Структура папок по функциям : структурируйте свое приложение таким образом, чтобы вы могли быстро найти свой код, определить код с первого взгляда, сохранить максимально плоскую структуру и попытаться остаться СУХИМ.
• « Пример структуры Rock-Hammer» : структурируйте свое приложение, используя папки по типу ( не рекомендуется руководством по стилю Angular).

Кстати, при использовании фреймворка рекомендации по стилю могут предоставить отличные исходные данные для выбора того, что наиболее удобно для вас. Например, рекомендации по стилю Vue.js содержат правила именования компонентов (которые также определяют имена файлов).