Что такое FSD?

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Зачем это нужно?

1. Масштабируемость: FSD позволяет легко добавлять новые функции в приложение без необходимости значительных изменений в существующем коде.
2. Поддерживаемость: Код, организованный по FSD, легче читать и поддерживать, так как каждая часть кода отвечает за конкретную функциональность.
3. Переиспользуемость: Модули, созданные по FSD, могут быть легко переиспользованы в других частях приложения или даже в других проектах.

Как это работает?

FSD предлагает разделять проект на несколько уровней:

• App: Уровень, который отвечает за инициализацию и конфигурацию приложения.
• Pages: Уровень, который содержит страницы приложения. Каждая страница может состоять из нескольких фич.
• Features: Уровень, который содержит функциональные возможности приложения. Каждая фича может включать в себя компоненты, логику, стили и тесты.
• Shared: Уровень, который содержит общие компоненты и утилиты, которые могут быть использованы в разных частях приложения.

Пример кода

Рассмотрим пример структуры проекта, организованного по FSD:

/src
  /app
    index.js
    App.js
  /pages
    /HomePage
      index.js
      HomePage.js
    /ProfilePage
      index.js
      ProfilePage.js
  /features
    /UserAuth
      index.js
      LoginForm.js
      authSlice.js
    /UserProfile
      index.js
      ProfileCard.js
      profileSlice.js
  /shared
    /components
      /Button
        index.js
        Button.js
    /utils
      formatDate.js

• /app: Содержит точку входа в приложение и основной компонент App.
• /pages: Содержит страницы приложения, такие как HomePage и ProfilePage.
• /features: Содержит функциональные возможности, такие как UserAuth для аутентификации и UserProfile для профиля пользователя.
• /shared: Содержит общие компоненты и утилиты, такие как Button и formatDate.

Пример использования

// src/features/UserAuth/LoginForm.js
​
import React from 'react';
import { useDispatch } from 'react-redux';
import { login } from './authSlice';
​
// Компонент формы логина
const LoginForm = () => {
  const dispatch = useDispatch();
​
  // Обработчик отправки формы
  const handleSubmit = (event) => {
    event.preventDefault();
    const username = event.target.elements.username.value;
    const password = event.target.elements.password.value;
    dispatch(login({ username, password }));
  };
​
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" placeholder="Username" required />
      <input type="password" name="password" placeholder="Password" required />
      <button type="submit">Login</button>
    </form>
  );
};
​
export default LoginForm;

• Импортируем необходимые библиотеки: React для создания компонентов и useDispatch из react-redux для отправки действий в хранилище.
• Определяем компонент LoginForm: Это функциональный компонент, который рендерит форму для входа.
• Используем useDispatch: Получаем функцию dispatch для отправки действий.
• Обработчик handleSubmit: Обрабатывает отправку формы, предотвращает стандартное поведение и отправляет действие login с данными пользователя.
• Рендеринг формы: Включает поля для ввода имени пользователя и пароля и кнопку для отправки формы.

FSD помогает организовать код так, чтобы каждая часть приложения была четко определена и изолирована, что упрощает разработку и поддержку.