Какие знаешь принципы FSD?

Feature-Sliced Design (FSD) — принципы архитектуры фронтенда

Feature-Sliced Design (FSD) — это методология организации кода в фронтенд-приложениях, которая структурирует проект по слоям и фичам. Это альтернатива традиционной структуре по типам файлов (components, utils, hooks и т.д.).

Основная идея

Вместо группировки по типам файлов:

❌ Старый подход
src/
  components/
  pages/
  hooks/
  utils/
  types/
  stores/

ФSD группирует по фичам и слоям:

✅ FSD подход
src/
  shared/        # Переиспользуемые части
  entities/      # Бизнес-сущности
  features/      # Бизнес-фичи
  widgets/       # Композитные части
  pages/         # Страницы
  app/           # Инициализация приложения

Слои FSD (снизу вверх)

1. Shared (Общее)

Переиспользуемые утилиты и компоненты, не связанные с бизнес-логикой:

src/shared/
  ui/           # UI компоненты (Button, Input, Modal)
  lib/          # Утилиты и помощники
  config/       # Конфигурация приложения
  types/        # Общие типы
  api/          # HTTP клиент

2. Entities (Сущности)

Бизнес-сущности (User, Post, Product):

src/entities/
  user/
    model/      # Бизнес-логика пользователя
    ui/         # UI компоненты пользователя
    api/        # API для работы с пользователем
  post/
    model/
    ui/
    api/

3. Features (Фичи)

Бизнес-фичи (Like, Subscribe, Share):

src/features/
  like-post/
    model/      # Логика лайка
    ui/         # UI для лайка
  subscribe/
    model/
    ui/

4. Widgets (Виджеты)

Композитные компоненты, собранные из фич и сущностей:

src/widgets/
  post-card/        # Карточка поста с лайком и комментариями
  user-profile/     # Профиль пользователя
  comments-section/ # Секция комментариев

5. Pages (Страницы)

Страницы приложения:

src/pages/
  home/
  user-profile/
  post-detail/

6. App (Приложение)

Инициализация, роутинг, глобальное состояние:

src/app/
  router.tsx
  store.ts
  styles/

Принципы FSD

1. Разделение на слои

Каждый слой имеет определённую ответственность:

app/      → инициализирует приложение
pages/    → комбинирует features и widgets
widgets/  → комбинирует features и entities
features/ → реализует бизнес-фичи
entities/ → определяет бизнес-сущности
shared/   → предоставляет переиспользуемый код

2. Изоляция слайсов (Slice)

Каждая фича или сущность — это изолированный слайс:

src/features/like-post/
  model/
    index.ts
    store.ts         # Zustand, Redux, Context
    actions.ts
  ui/
    LikeButton.tsx
    index.ts         # Public API
  api/
    likeApi.ts
  types.ts
  index.ts           # Public API слайса

Внутри слайса файлы могут импортировать друг друга, но не могут импортировать из других слайсов.

3. Public API (index.ts)

Каждый слайс экспортирует только публичное API через index.ts:

// src/features/like-post/index.ts
export { LikeButton } from './ui/LikeButton';
export { useLikePost } from './model/hooks';
export type { LikePostState } from './types';

// ✅ Правильный импорт
import { LikeButton } from '@/features/like-post';

// ❌ Неправильный импорт (обходит публичное API)
import { LikeButton } from '@/features/like-post/ui/LikeButton';

4. Зависимости только в одну сторону

Структура зависимостей строго направлена (не циклических):

app/ → pages/ → widgets/ → features/ → entities/ → shared/

Правила:

• app может импортировать из всех слоёв
• pages не может импортировать из app
• features не может импортировать из pages или widgets
• entities не может импортировать из features
• shared не может импортировать ничего (кроме node_modules)

// ✅ Правильно
import { User } from '@/entities/user';        // entities для features
import { LikeButton } from '@/features/like';  // features для widgets

// ❌ Неправильно
import { LikeButton } from '@/features/like';  // shared не может импортировать features
import { HomePage } from '@/pages/home';       // features не может импортировать pages

5. Группировка по Сегментам

Внутри слайца файлы группируются по сегментам:

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

Практический пример

Структура проекта:

src/
  app/
    router.tsx
    store.ts
  pages/
    home/
      ui/HomePage.tsx
    post-detail/
      ui/PostDetailPage.tsx
  widgets/
    post-card/
      ui/PostCard.tsx
      index.ts
  features/
    like-post/
      model/
        store.ts
        useLike.ts
      ui/
        LikeButton.tsx
      api/
        likeApi.ts
      types.ts
      index.ts
  entities/
    post/
      model/
        types.ts
      ui/
        PostTitle.tsx
      api/
        postApi.ts
      index.ts
    user/
      model/
        types.ts
      ui/
        UserAvatar.tsx
      index.ts
  shared/
    ui/
      Button.tsx
      Input.tsx
    lib/
      api.ts
    types/
      common.ts

Использование в компоненте:

// src/widgets/post-card/ui/PostCard.tsx
import { PostTitle } from '@/entities/post';
import { UserAvatar } from '@/entities/user';
import { LikeButton } from '@/features/like-post';
import { Button } from '@/shared/ui';

export function PostCard({ post, user }) {
  return (
    <div>
      <UserAvatar user={user} />
      <PostTitle post={post} />
      <LikeButton postId={post.id} />
      <Button>Поделиться</Button>
    </div>
  );
}

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

• Масштабируемость — легко добавлять новые фичи
• Переиспользуемость — четкие границы и public API
• Слабая связанность — минимальные зависимости между модулями
• Тестируемость — каждый слайс можно тестировать отдельно
• Читаемость — структура понятна новым разработчикам
• Производительность — можно разделить код по слайсам для code splitting

Инструменты

Import validation: используй ESLint плагины для проверки зависимостей

// .eslintrc.json
{
  "plugins": ["eslint-plugin-fsd-imports"],
  "rules": {
    "fsd-imports/boundaries": "error"
  }
}

Ключевые моменты

• FSD — это архитектурный паттерн, а не фреймворк
• Слои определяют общую структуру
• Слайсы группируют связанную функциональность
• Public API ограничивает видимость внутренней реализации
• Зависимости направлены только вниз по слоям
• Гибкость — правила можно адаптировать под проект

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