FSD - Future Sliced Design
Общее
Проект на FSD состоит из слоев (layers), каждый слой состоит из слайсов (slices) и каждый слайс состоит из сегментов (segments).
Слои стандартизированы во всех проектах и расположены вертикально. Модули на одном слое могут взаимодействовать лишь с модулями, находящимися на слоях строго ниже. На данный момент слоев семь (снизу вверх):
shared— переиспользуемый код, не имеющий отношения к специфике приложения/бизнеса.(например, UIKit, libs, API)entities(сущности) — бизнес-сущности.(например, User, Product, Order)features(фичи) — взаимодействия с пользователем, действия, которые несут бизнес-ценность для пользователя.(например, SendComment, AddToCart, UsersSearch)widgets(виджеты) — композиционный слой для соединения сущностей и фич в самостоятельные блоки(например, IssuesList, UserProfile).pages(страницы) — композиционный слой для сборки полноценных страниц из сущностей, фич и виджетов.processes(процессы, устаревший слой) — сложные сценарии, покрывающие несколько страниц.(например, авторизация)app— настройки, стили и провайдеры для всего приложения.
Слои
Мы имеем 7 слоёв, каждый из которых может быть поделён на определённые сегменты:
- ui - вся визуальная часть компонентов
- model - определённые данные и куски, которые отвечают за модель взаимодействия и логику внутри компонента (его слайсы, типы)
- lib - хуки или другие утилитарные компоненты
- config - настройка
- api - связь с внешним миром через отправку запросов
- constants - константы слоя
FSD позволяет следовать всем канонам ООП за счёт своей структуры. Public API предоставляет доступ только к нужным файлам из нашей целевой папки
Shared вмещает в себя весь переиспользуемый контент по приложению. В него стоит поместить конфиги, инстансы API, ассеты, утилиты, хуки, константы и разного вида кнопки, инпуты, свитчеры в ui
Так выглядит структура папок уже у конкретной сущности Она хранит свои компоненты, константы, хелперы, которые нужны только ей и отдаёт наружу только компоненты, которые могут пригодиться в слоях выше Мапперы подготавливают данные для отправки на сервер или для вывод на фронтенде
Фича - это отдельная функциональность, которая приводит к определённому результату (кнопка, которая получает состояние подписки и позволяет отписаться или подписаться, лайк/убрать лайк, дизлайк/убрать дизлайк, тугглер темы или свитчер языка)
Он так же может хранить те же самые сегменты, что и остальные модули
Дальше уже идут виджеты Они представляют собой отдельные части страницы - хедер, футер, сайдбар, отдельный пост
Дальше уже идут страницы В идеале, она должна состоять просто из виджетов, которые уже в своих рамках реализуют нужную функциональность для пользователя
Слой приложения хранит в себе чисто все нужные компоненты, которые отвечают за entry-point или входную точку приложения
Как можно определить, к какому слою должен относиться компонент?
А тут уже располагаются примеры тех компонентов, которые могут находиться в определённых слоях:
- shared - переиспользуемые отдельные блоки, которые мы можем вынести в другое приложение
- entity - общий компонент пост, который подходит под посты пользователей, групп и который имеет место под текст, фавиконку и не имеет фичей (тех же лайков и пересылки сообщений), потому что они могут отличаться по реализации в зависимости от разных постов
- features - бизнес-действия пользователя - лайк, репост, удалить, изменить комментарий, добавить его
- widgets - блок с соединённой сущностью и фичёй
- pages - цельная страница, которая должна состоять из виджетов
