Иерархия компонентов и разбиение приложения на компоненты

Если вы работали с компонентными фреймворками (React, Vue, Svelte), вам знакома идея разбиения интерфейса на компоненты. Этот подход популяризировал React. В официальной документации есть статья («Thinking in React»)[https://react.dev/learn/thinking-in-react], где предлагается:

• визуально выделять блоками разные части UI;
• давать каждому блоку имя — так формируется структура компонентов.

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

В нашем проекте мы разделяем все элементы на 4 категории:

1. Screens (экраны)
2. Features (фичи)
3. Components (обычные компоненты)
4. Shared (общие компоненты вне модулей)

Этой иерархии достаточно для:

• навигации по проекту
• масштабирования
• поддержки командной разработки
• чистой структуры модулей

Что такие Screens, Features и Components?

Screens — основные экраны модуля. Это “входные точки” модуля. Пример: DeliveryScreen SearchAllScreen SearchRestaurantsScreen

Некоторые модули имеют 1 экран, другие — несколько. Например, модуль Delivery будет иметь один экран. Модуль Search - несколько экранов по вкладкам (All, Top Rated, Offers).

Features — крупные функциональные части экрана

Это не маленькие компоненты, а самостоятельные блоки логики и UI, часто включающие свои компоненты. Примеры:

• блок фильтров на странице ресторана
• виджет карты доставки
• модальное окно выбора времени доставки
• слайдер промо-карточек

Если элемент настолько сложный, что внутри него нужны подпапки (components/, hooks/), — это вероятнее всего feature.

Shared — общие элементы проекта

Здесь находится все что не привязано к конкретному модулю например утилиты, переиспользуемые хуки и т.д.

Пример разбиения UI на части

Возьмём страницу ресторана. Страница целиком - это Screen, большой блок быстрых фильтров → Feature, каждый фильтр → Component и т.д.