Раньше создавая свои первые проекты на React, я не задумывался об архитектуре. Мой фокус был на том, чтобы просто заставить приложение работать — без лишних сложностей. Однако со временем я начал замечать, как отсутствие структуры мешает масштабировать проект, добавлять новые фичи и даже просто находить нужный код. Все проекты были похожи — стандартный набор components, store, utils и т.д. Всё работало, но каждый новый функционал превращал проект в лапшу из кода. Найти нужный компонент было сложно, циклические связи мешали расширять проект, а поддержка напоминала квест. 😅
Так продолжалось до тех пор, пока я случайно не наткнулся на видео, посвященное различным архитектурам во frontend-е. Среди них была и FSD — на тот момент я вообще не знал, что это такое. Но идея сделать проект структурированным и понятным заинтриговала. 🤔
Что такое FSD, основные понятия
Feature-Sliced Design (FSD) — это методология проектирования frontend-архитектуры, которая помогает структурировать код так, чтобы он был легко расширяемым и понятным. Вместо того чтобы складывать всё в папку components, ты делишь проект на слои:
📁 app — точка входа приложения: роутинг, провайдеры, глобальные стили. Всё, благодаря чему проект запускается.
📁 pages — страницы приложения или крупные части страницы, если используется вложенный роутинг.
📁 widgets — большие самодостаточные модули, реализующие целый пользовательский сценарий (например, навигационное меню).
📁 features — логика отдельных функций приложения, которые приносят бизнес-ценность пользователю (например, авторизация).
📁 entities — бизнес-сущности, такие как пользователь (User), продукт (Product), заказ (Order).
📁 shared — общие ресурсы (компоненты, утилиты, стили), которые переиспользуются на разных уровнях.
Каждая часть выполняет свою задачу и изолирована от других. А ещё, на практике, каждый слой делится на слайсы (например, слайс "user" для слоя Entities).
Дополнительно: внутри каждого слайса код группируется по назначению — в сегменты. Распространённые сегменты включают:
📁 ui — компоненты интерфейса, включая стили и виджеты;
📁 model — модели данных, хранилища, бизнес-логика;
📁 api — взаимодействие с бэкендом;
📁 lib — вспомогательные функции и утилиты;
📁 config — настройки или фиче-флаги.
☝️ Публичный API
В каждом слайсе создаётся файл index.ts, где прописываются экспортируемые компоненты, утилиты и методы. Это не только упрощает подключение, но и помогает скрыть лишние детали реализации, сохраняя модульность и упрощая рефакторинг.
🔧 Мой путь к FSD: от хаоса к порядку
В первый раз я решил попробовать внедрить FSD в проект, который уже был в хаотичном состоянии. Начал с малого: постепенно выделял фичи, сущности и общие модули. Перемещать компоненты и утилиты в нужные папки было медленно, но результат оказался впечатляющим: код стал более понятным, а работать с проектом — приятнее. И что круто, переход к FSD можно делать плавно: выделить очевидные сущности, а остальное перерабатывать по мере появления новых задач. 🛠
Что я понял о FSD?
Плюсы:
➕ Логичная структура. Ты сразу знаешь, где искать нужный компонент или логику.
➕ Масштабируемость. Добавление новой фичи становится быстрым и безболезненным.
➕ Нормализация данных. Работа с Redux становится чище и удобнее.
➕ Плавный переход. Можно внедрять архитектуру постепенно.
➕ Понятность для команды. Новые разработчики легче понимают проект.
Основной минус:
➖Иногда сложно понять, куда отнести определённый компонент или функцию (часто все оказываются в папке features).
🧐Итоги: стал ли я фанатом FSD?
Честно говоря, я только начинаю своё знакомство с FSD, и вопросов пока больше, чем ответов.
Но главное — я вижу, как этот подход помогает мне расти как разработчику и лучше понимать структуру проектов. Это вызов, который мотивирует улучшать навыки и искать новые решения.
❓ А как вы структурируете свои проекты? Попробовали ли вы FSD? Поделитесь своими мыслями в комментариях! 💬
Больше лайфхаков и полезных материалов вы найдете в моем Telegram-канале Frontmind. Присоединяйтесь!
#React #Frontend #FSD