Архітектура Feature-Sliced Design у React з TypeScript

Сучасна розробка фронтенду залежить від масштабованості та підтримуваності, особливо для складних застосунків. Feature-Sliced Design (FSD) пропонує структуровану архітектуру, яка покращує ці якості. У цій статті ми розглянемо, як реалізувати Feature-Sliced Design у проекті React з використанням TypeScript.

Що таке Feature-Sliced Design?

Feature-sliced design — це архітектурна методологія для фронтенд-застосунків. Вона зосереджена на поділі застосунку на осмислені частини (slices), що базуються на функціональності та меті. Такий підхід сприяє модульності, читаності та повторному використанню коду, вирішуючи поширені проблеми масштабування в проектах React.

Ключові принципи FSD включають:

1. Мислення через функціональність: Організовувати код за функціями, а не за технічними аспектами (наприклад, "компоненти", "утиліти", "хуки").
2. Розділення шарів: Структурувати код у кожній функції на шари, такі як сутності, функції та спільні модулі.
3. Чіткі залежності: Забезпечити ясність залежностей між шарами та функціями.

Основні шари в FSD

FSD ділить застосунок на кілька шарів:

1. Шар застосунку: Обробляє питання, що стосуються всього застосунку, такі як маршрутизація, теми та постачальники керування станом.
2. Процеси: Бізнес-процеси, які об’єднують кілька функцій, такі як процеси аутентифікації.
3. Сторінки: Агрегати функцій, що представляють окремий маршрут або цілу сторінку.
4. Функції: Інкапсулює конкретну, незалежну функціональність (наприклад, панель пошуку або профіль користувача).
5. Сутності: Компоненти або представлення стану на рівні домену (наприклад, User, Product).
6. Спільні: Переносні утиліти, хуки, компоненти або константи, що використовуються по всьому застосунку.

Налаштування FSD у проекті React

Ось приклад структури директорій для архітектури Feature-Sliced Design:

/src  
 /app  
 index.tsx  
 App.tsx  
 /providers  
 /processes  
 /auth  
 index.ts  
 /pages  
 /home  
 index.tsx  
 HomePage.tsx  
 /product  
 index.tsx  
 ProductPage.tsx  
 /features  
 /search  
 index.ts  
 SearchBar.tsx  
 SearchBar.module.css  
 /cart  
 index.ts  
 Cart.tsx  
 /entities  
 /user  
 User.ts  
 UserModel.ts  
 /product  
 Product.tsx  
 ProductModel.ts  
 /shared  
 /ui  
 Button.tsx  
 Input.tsx  
 /lib  
 api.ts  
 helpers.ts

Реалізація функції: Панель пошуку

Давайте створимо функцію SearchBar як приклад. Ця функція включає компонент, стилі та сервіс.

1. Компонент

features/search/SearchBar.tsx

import React, { useState } from 'react';  
import styles from './SearchBar.module.css';

interface SearchBarProps {  
 onSearch: (query: string) => void;  
}export const SearchBar: React.FC = ({ onSearch }) => {  
 const [query, setQuery] = useState(''); const handleInputChange = (e: React.ChangeEvent) => {  
 setQuery(e.target.value);  
 }; const handleSearch = () => {  
 onSearch(query);  
 }; return (  
 <div className={styles.searchBar}>  
   <input type="text" value={query} onChange={handleInputChange} />  
   <button onClick={handleSearch}>Search</button>  
 </div>  
 );  
};

2. Стилі

features/search/SearchBar.module.css

.searchBar {  
  display: flex;  
  gap: 8px;  
}  

input {  
  flex: 1;  
  padding: 8px;  
  border: 1px solid #ccc;  
  border-radius: 4px;  
}  
button {  
  padding: 8px 12px;  
  border: none;  
  background-color: #007bff;  
  color: white;  
  border-radius: 4px;  
  cursor: pointer;  
}

export

`features/search/index.ts`

export { SearchBar } from './SearchBar';
```

Переваги FSD

• Масштабованість: Кожна функція є самодостатньою, що полегшує додавання або зміну функціональності.
• Підтримуваність: Чітка структура дозволяє командам ефективно орієнтуватися в кодовій базі.
• Повторне використання: Спільні компоненти та утиліти сприяють повторному використанню коду по всьому застосунку.

Висновок

Feature-sliced design дає можливість розробникам React створювати масштабовані та підтримувані застосунки. Організовуючи код у змістовні частини та дотримуючись принципів FSD, команди можуть досягти кращої модульності та ясності. Почніть інтегрувати FSD у свої проекти та відчуйте переваги чіткої архітектури.

Перекладено з: Feature-Sliced Design Architecture in React with TypeScript