Как организована ответственность слоев в FSD?

Принцип организации слоев в FSD

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

Слои и их ответственность

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

Пример кода

// entities/user/model.ts — бизнес-логика пользователя
export interface User {
  id: number;
  name: string;
}

// features/login/ui/LoginForm.tsx — сценарий входа
import { User } from 'entities/user';

export const LoginForm = () => {
  // использует entities, но не widgets или pages
};

Вывод

FSD помогает поддерживать чистую архитектуру в больших проектах, где важно разделение ответственности и предсказуемость зависимостей. Этот подход особенно полезен в командах, где требуется масштабируемость и легкость внесения изменений.