42px Frontend Arch.Основные идеи
В любом клиентском приложении в самом первом приближении можно выделить следующие слои:
- Представление (компоненты и стили).
- Состояние (пользовательский ввод, данные для вывода, состояние элементов).
- Слой взаимодействия с внешними источниками данных (RESTful API, GraphQL, клиентская СУБД, etc).
В зависимости от степени проработки архитектуры, фантазии разработчиков, отведенного на проект времени, размера проекта и прочих факторов, данные слои могут быть склеены и перемешаны друг с другом практически любым образом.
Ключевая идея описываемой архитектуры заключается в том, что все три указанных слоя отделены друг от друга и взаимодействуют только посредством определенного API.
Структура проекта
bash
├── dal
├── declarations
└── features
└── some-feature
├── init.ts
├── model
│ ├── public.ts
│ ├── private.ts
│ ├── reducers.ts
│ ├── init.ts
│ └── index.ts
└── view
├── parts
├── containers
├── entries
└── index.ts
├── pages
└── some-page
├── init.ts
├── model
│ ├── public.ts
│ ├── private.ts
│ ├── reducers.ts
│ ├── init.ts
│ └── index.ts
└── view
├── parts
├── containers
├── entries
└── index.ts
├── ui
├── PrimaryButton.tsx
├── Dropdown
└── index.ts
└── lib