Что такое Feature-Sliced Design (FSD)?

Что такое Feature-Sliced Design (FSD)?

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

Ключевые принципы и структура FSD

FSD делит приложение на слои (layers) и слайсы (slices), где каждый слой имеет строгую иерархию и ответственность:

1. Слои (Layers) — вертикальные уровни абстракции, от общих к частным:

   • app — инициализация приложения, глобальные стили, провайдеры, маршрутизация.
   • processes — сложные бизнес-процессы, охватывающие несколько фич (например, аутентификация).
   • pages — составные страницы, собирающие фичи и сущности.
   • features — интерактивные пользовательские сценарии (например, комментарии или поиск).
   • entities — бизнес-сущности (например, пользователь, статья), независимые от конкретных фич.
   • shared — переиспользуемый код: UI-кит, утилиты, API-Tклиенты.

2. Слайсы (Slices) — горизонтальные сегменты внутри слоя, представляющие конкретные функциональные области (например, auth в слое features).

3. Сегменты (Segments) — типовые части внутри слайса:

   • ui — компоненты интерфейса.
   • model — бизнес-логика (store, actions, типы).
   • lib — вспомогательные функции.
   • api — запросы к серверу.

Пример структуры проекта:

src/
├── app/                    # Инициализация приложения
│   ├── styles/
│   └── providers/
├── pages/                  # Страницы
│   └── article/
│       └── ui/
├── features/               # Фичи
│   └── comments/
│       ├── ui/
│       └── model/
├── entities/               # Сущности
│   └── user/
│       ├── ui/
│       └── model/
└── shared/                 # Общие модули
    ├── ui/
    └── lib/

Преимущества FSD

• Масштабируемость: Новые фичи добавляются изолированно, не затрагивая другие части.
• Чёткие правила: Строгая иерархия слоёв уменьшает хаос в архитектуре.
• Переиспользование кода: shared и entities обеспечивают единые источники для повторяющихся элементов.
• Командная разработка: Разные разработчики могут работать над разными слайсами с минимальными конфликтами.
• Тестируемость: Изоляция логики упрощает модульное и интеграционное тестирование.

Ограничения FSD

• Сложность для малых проектов: Избыточная структура для простых приложений.
• Кривая обучения: Требует времени на освоение правил иерархии.
• Жёсткость: Отклонения от методологии могут нарушить целостность.

Практический пример: фича комментариев

В слое features/comments может выглядеть так:

// src/features/comments/ui/CommentForm.tsx
import { addComment } from '../model/commentsSlice';

export const CommentForm = () => {
  const dispatch = useAppDispatch();
  const [text, setText] = useState('');

  const handleSubmit = () => {
    dispatch(addComment(text));
  };

  return (
    <form>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={handleSubmit}>Отправить</button>
    </form>
  );
};

// src/features/comments/model/commentsSlice.ts
import { createSlice } from '@reduxjs/toolkit';

const commentsSlice = createSlice({
  name: 'comments',
  initialState: [],
  reducers: {
    addComment: (state, action) => {
      state.push(action.payload);
    },
  },
});

Сравнение с другими подходами

FSD часто противопоставляют Atomic Design (организация по компонентам) и MVC (разделение на модель-представление-контроллер). В отличие от них, FSD фокусируется на бизнес1логике, что делает её ближе к Domain-Driven Design (DDD) для фронтенда. Это позволяет лучше отражать потребности продукта в коде.

Заключение

Feature-Sliced Design — это современный ответ на сложности больших frontend-приложений, предлагающий дисциплинированный подход к организации кода. Он особенно полезен в долгосрочных проектах с активной разработкой, где важны поддерживаемость и чёткое разделение ответственности. Несмотря на некоторые ограничения, FSD стал мощным инструментом в арсенале frontend-

Архитекторов, способствуя созданию чистого и предсказуемого кода.