Методология Feature-Sliced Design (FSD) в разработке React-приложений
React является одним из самых популярных и мощных инструментов для создания пользовательских интерфейсов. При разработке сложных React-приложений становится важным иметь четкую структуру проекта, чтобы облегчить его поддержку и масштабирование. Одним из подходов, который можно применить для достижения этой цели, является методология Feature-Sliced Design (FSD).
Feature-Sliced-Design (FSD) представляет собой архитектурную методику, разработанную для фронтенд-проектов различной сложности и масштаба. FSD служит набором правил и соглашений для организации кода, с основной целью обеспечить понятность и структурированность проекта, особенно при неизбежности изменений бизнес-требований.
- Ясность бизнес-логики: Архитектура легко усваивается, так как состоит из доменных модулей.
- Адаптивность: Элементы архитектуры можно гибко менять или добавлять под новые условия.
- Управление техническим долгом: Каждый модуль можно изменять или переписывать независимо, без побочных эффектов.
- Явная переиспользуемость: Методика поддерживает баланс между принципом DRY и локальной кастомизацией.
- Public API: Каждый модуль должен иметь декларацию своего публичного API на верхнем уровне.
- Изоляция: Модуль не должен напрямую зависеть от других модулей того же слоя или слоев выше.
- Ориентирование на потребности: Методика ориентирована на потребности бизнеса и пользователя.
Проект, реализованный с использованием FSD, состоит из слоев (layers), каждый из которых разбит на сегменты (slices), которые в свою очередь разбиваются на сегменты (segments).
Слои стандартизированы во всех проектах и расположены вертикально. Модули на одном слое могут взаимодействовать только с модулями, расположенными на слоях ниже. Текущая архитектура включает шесть слоев (от нижнего к верхнему), и чем ниже находится модуль, тем рискованнее его изменять.
- Shared: Переиспользуемый код, который не относится к специфике приложения или бизнеса (например, UIKit, библиотеки, API).
- Entities: Бизнес-сущности (например, User, Product, Order).
- Features: Взаимодействие с пользователем, действия, которые несут бизнес-ценность для пользователя (например, SendComment, AddToCart, UsersSearch).
- Widgets: Композиционный слой для соединения сущностей и фич в самостоятельные блоки (например, IssuesList, UserProfile).
- Pages: Композиционный слой для сборки полноценных страниц из сущностей, фич и виджетов.
- App: Настройки, стили и провайдеры для всего приложения.
Слайсы служат для разделения кода по предметной области, группируя логически связанные модули для облегчения навигации по кодовой базе. Слайсы не могут использовать другие слайсы на том же слое, обеспечивая высокий уровень связности (cohesion) при низком уровне зацепления (coupling).
В свою очередь, каждый слайс состоит из сегментов - это маленькие модули, главная задача которых - разделить код внутри слайса по техническому назначению. Самые распространенные сегменты - ui, model (store, actions), api и lib (utils/hooks), однако в вашем слайсе могут быть другие сегменты по вашему усмотрению.
Более подробно с FSD можно ознакомиться на официальном сайте методологии.