🎯 Feature-Sliced Design: организация кода по фичам

Feature-Sliced Design (FSD) — это методология для архитектуры фронтенд-приложений, ориентированная на упрощение понимания кода и его стабильность при постоянных изменениях бизнес-требований.

Структура из 7 слоёв:

1️⃣ app/ — инициализация приложения: роутинг, точки входа, глобальные стили, провайдеры

2️⃣ processes/ — устаревший слой, сейчас рекомендуется использовать features и app

3️⃣ pages/ — полные страницы приложения или крупные части страницы при вложенной маршрутизации

4️⃣ widgets/ — крупные самодостаточные блоки функциональности или UI, реализующие целый сценарий использования

5️⃣ features/ — продуктовые функции, которые приносят
бизнес-ценность пользователю

6️⃣ entities/ — бизнес-сущности, с которыми работает проект (например, user или product)

7️⃣ shared/ — переиспользуемая функциональность, не привязанная к специфике проекта или бизнеса

〰️ Модуль может импортировать другие слайсы только с нижележащих слоёв. Верхний слой не может использовать модули из других слоёв.

⚙️ FSD универсальна: её можно использовать в любых проектах с любым стеком, языком или фреймворком.

🔥 Еще больше полезного на курсе «Архитектуры и шаблоны проектирования» (−40%)

🐸 Библиотека фронтендера

#blueprint