📦 Фичи ​

Для организации структуры проекта мы используем подход, известный как Feature Slices. Этот подход родом из мира .NET и был адаптирован сообществом для современных SPA.

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

Что такое фича? ​

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

@/features/login
@/features/register
@/features/todo
@/features/catalog
@/features/product
...

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

В нашем демо-примере фичи расположены в каталоге features.

Структура ​

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

.
├── init.ts
├── model
│   ├── index.ts
│   ├── init.ts
│   ├── private.ts
│   └── public.ts
└── view
    ├── containers
    │   ├── ConfirmDelete.tsx
    │   ├── PictureModal.tsx
    │   ├── Upload.tsx
    │   └── index.ts
    ├── entries
    │   ├── Gallery.tsx
    │   └── index.tsx
    ├── index.ts
    └── parts
        ├── GalleryItem.tsx
        └── index.ts

Каждая фича обладает следующей структурой:

@/features/my-feature/model

model — директория, которая содержит состояние и бизнес-логику

@/features/my-feature/view

view — директория, которая содержит представления (компоненты)

Внутри каждой из двух папок находится index-файл. Этот файл формирует публичное API модели и представление данной фичи.

Важные моменты ​

Фичи могут импортировать друг друга ТОЛЬКО через публичное апи. Несмотря на то, что технически ничто не мешает импортировать напрямую "из кишков" фичи, так делать не стоит, так как это нарушает инкапсуляцию.

Хорошо

import { addToCart } from '@/features/cart/model'
import { Cart } from '@/features/cart/view'

Плохо

import { event } from 'features/cart/view/entries/Cart'

• Любая фича теоретически (и практически) может быть вынесена в отдельный репозиторий/NPM-пакет, если этого потребует масштаб проекта.

• Корректное разбиение функциональности проекта на фичи есть своеобразное искусство, и понимание того как это делать правильно приходит с опытом.

• Общая рекомендация в следующем: не стоит бояться делать маленькие фичи. Фича "auth" — это скорее всего неудачно выделенная огромная фича. И лучше выделить из нее отдельные фичи "sign-in", "sign-up", "password-recovery".

• В некоторых приложениях удобно выделять фичу "app" или "app-init", которая содержит глобальное состояние и логику инициализации приложения.

В демо-проекте фичи находятся в каталоге src/features. На данном этапе рекомендуется поверхностно изучить его содержимое.

Подробнее о feature slices можно почитать здесь (проскроллить до самого верха и читать сверху вниз). Стоит иметь в виду: там приводится пример на стеке React + Redux, однако все основные идеи применимы и к нашему стеку.