Обзор структуры проекта

План

Общий обзор структуры проекта

Бандл/модуль и его структура

Единицей структурирования основной массы исходников приложения является бандл (можно называть и модуль, но специальное название более чётко отделяет это понятие от обычного js-файла, который тоже называют модулем) — определённым образом структурированная директория исходников, “решающая” определённую общую задачу.

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

Структура бандла

Следующие имена поддиректорий бандла являются “зарезервированными”:

• actions/ — содержит экшн-креаторы (action-creators) для redux. Модули и классы в этой папке должны содержать суффикс Actions (например, actions/photoActions.ts).
• actionTypes/ (deprecated) — директория для объявления глобальных констант и типов для redux-actions. Ввиду очень узкого назначения, решено отказаться от таких папок в пользу types.
• api/ — сервисы по низкоуровневому взаимодействию с бекендом. Слой, реализующий непосредственно REST-API запросы к нужным энд-поинтам с нужными параметрами.
• components/ — в этой папке должны располагаться все компоненты, которые занимаются представлением (view-слой). Эти компоненты не должны заниматься бизнес-логикой, а лишь отображением текущего состояния, полученного из redux и relay плюс пробросом пользовательских событий.
• containers/ — higher-order-компоненты, которые не занимаются отображением, а являются прослойкой для подготовки данных и колбеков, реализующих бизнес-логику, для view-компонентов. Зачастую, располагаются в корневом бандле common и являются общими для web- и мобильного приложения.
• models/ — описания типов и различных валидаций моделей данных, получаемых от бекенда.
• mutations/ — классы relay-мутаций.
• reducers/ — описание типов для глобального redux-состояния и redux-редьюсеров.
• services/ — классы сервисов общего назначения.
• types/ — содержит файлы с описанием общих констант и типов для каких-либо задач в рамках бандла (далёкий аналог .h-файлов в C++), включая описание actionTypes для redux. Названия файлов в этой директории должны содержать суффикс Types (например, types/photoTypes.ts).
• utils/ — вспомогательные функции (утилиты) локального значения для бандла. Утилиты должны быть stateless.

В корневой папке бандла также могут располагаются различные файлы конфигурации/документации, например:

• routes.tsx — конфигурация роутов для react-router.
• configSchema.ts — схема для конфиграционного файла convict.
• *Module.ts — модули с описанием сервисов для нашей DI-библиотеки ts-guice.
• README.md — общее описание предназначения бандла.

Примечание

В простых случаях подпапки с зарезервированными названиями models, reducers, types и utils могут быть представленны в виде одиночного файла в корне бандла с таким же названием, например types.ts.

Подпапки бандла с другими названиями должны восприниматься как вложенные бандлы и иметь аналогичную структуру.

Структура директории components

Компонент-модуль