Mastodon

Структура приложения


Исходный код приложения я разделяю на features/, ui/ и pages/.
Логика может лежать только в pages/ и в features/.

Пример:

▸ — значок свёрнутой директории в дереве

src/
  api/▸
  features/▸
  lib/▸
  pages/▸
  ui/▸

1. Структура feature:

src/
  features/
    account/▸
    editor/▸
    settings/▸
    users/
      atoms/
        index.js
        avatar.js
      lib/
        lib-name/
          index.js
          test.js
          readme.md
      models/▸
      molecules/▸
      organisms/▸
      templates/▸
      index.js

Фича — полезная функциональность для пользователя, или набор сущностей объединенных одной идеей. Например: пользователи, текстовый-редактор, аккаунт, статьи.

Фича не может быть группировкой по типу, слишком абстрактной сущностью. Примеры как не надо: роли, формы, валидации.

  1. Каждая фича имеет одинаковую структуру.
  2. users, account, ... — произвольное название фичи в param-case
  3. Содержимое фичи можно получать только через index.js
  4. Каждый раздел создается, только если в нем есть содержимое.

1.1 Atomic in Feature

atoms, molecules, organisms, templatesatomic design, компоненты фичи.

Если предполагается много файлов на каждый компонент (.test, .story, .md, ...):

feature/
  users/
    atoms/▸
    molecules/
      personal-apply/▸
      user-card/
        index.js
        story.js
        test.js
        readme.md
    organisms/▸
    templates/▸

Если файлов мало, можно не создавать директорию. Главное, чтобы в пределах фичи выглядело одинаково.

feature/
  settings/
    atoms/▸
    molecules/▸
    organisms/
      monitoring-editor.js
      monitoring-editor.test.js
      marketplace.js
      marketplace.test.js

2. Структура pages:

src/
  pages/
    post/
      model.js
      page.js
    posts/
      create/▸
      edit/▸
    auth/
      login/▸
      register/
        model.js
        page.js
  1. Вложенность страниц должна отображать роутинг реального урла
  2. Исходник компонента лежит в page.js
  3. Уникальная логика страницы лежит в model.js
  4. Любая обобщенная логика выносится в библиотечный код src/lib/lib-name/

Примеры:

src/
  pages/
    post/
      page.js
      model.js
    repo/
      view/
        pulls/▸
        issues/
          view/
            page.js
            model.js
        page.js
        model.js
    index.js

3. Структура UI:

src/
  ui/
    atoms/
      index.js
      component-name/
        index.js
        readme.js
        story.js
        test.js
    molecules/▸
    organisms/▸
    templates/▸
    index.js
  1. Atomic Design
  2. Весь UI это базовые блоки из которых можно собрать любую фичу.
  3. UI должен быть оторван от фич и любых глобальных сторов
  4. Компоненты должны быть максимально переиспользуемыми, независимыми от контекста (не React Context API)