Модульная архитектура web-приложения

Подход заключается в разделении приложения на отдельные, небольшие и самостоятельные модули, где каждый модуль работает независимо от других и строго подчиняется вертикально направленной иерархией (сверху-вниз).

Структура:

Страницы (pages)

• Компонент определяющий структуру страницы
• Содержит в себе модули и компоненты

Модули (modules)

• Самостоятельные компоненты с четкой зоной ответственности (UserList, RegistraitionForm)
• Содержит все для самостоятельной изолированной работы:
• API-коннекторы
• Утилиты (helpers)
• Хранилища данных (store)
• Публичный интерфейс (index.ts)
• Содержат в себе компоненты

Компоненты (components)

• Содержат простую бизнес-логику (UserCard, UserComment, RatingPlate, Phone)
• Содержат в себе UI-компоненты

UI

• Переиспользуемые компоненты интерфейса не обладающие бизнес-логикой (Button, Input)

Итог

Плюсы

• Изоляция содержимого модулей
• Решения проблем циклических зависимостей
• Переиспользование

Минусы

• Не понятно когда выносить компонент в модули или компоненты
• Как переиспользовать модули в других модулях
• Где хранить бизнес-сущности (пользователь, товар, статья)
• Создание глобальных сущностей из-за неявных связей

Подходит:

• Средней команде от 3-ех человек
• Для проекта с простой бизнес-логикой