Frontend

Зачем для UCP. Frontend — вторая специализация продукт-инженера: чтобы один человек довёл продукт до пользователя, ему нужна и часть, которую пользователь видит. Стек — React + TypeScript. Backend-паттерны (UseCase, агрегаты, CQRS) на него не натягиваются — у frontend свои концерны.

Раздел разбит на 13 статей. Можно читать подряд (фундамент → данные и состояние → навигация и вид → качество) или точечно.

Фундамент

1. Структура проекта и компонентная модель — раскладка, компонент как единица, типизация.
2. Компоненты: структура и композиция — границы, композиция, props против состояния.
3. TypeScript в React — типизация пропсов, generics, дискриминированные union, события и ref.
4. Хуки: кастомные и ловушки useEffect — извлечение логики, правила хуков, когда useEffect не нужен.

Данные и состояние

5. Состояние: локальное и серверное — useState/useReducer/context, когда стор.
6. Загрузка данных: TanStack Query — кеш, инвалидация, мутации.
7. Обработка ошибок и Suspense — error boundaries, состояния ошибок, graceful degradation.
8. Формы: react-hook-form и zod — валидация, согласованность с backend-контрактом.

Навигация и вид

9. Роутинг: React Router — маршруты, вложенность, защищённые маршруты.
10. Стилизация и дизайн-токены — подходы и их цена, токены.

Качество и производительность

11. Доступность (a11y) — семантика, клавиатура, ARIA.
12. Производительность рендеринга — мемоизация по делу, code-splitting, размер бандла.
13. Тестирование: Vitest и Testing Library — поведение, а не реализация.

Дальше: мобильная разработка для продукт-инженера — раздел /mobile/: тот же React + TypeScript, упакованный в нативные обёртки (web-first).

Связанное

• Мобильная разработка — тот же стек в нативных обёртках: PWA, Capacitor, iOS/Android.
• Продукт-инженер — карта специализаций и путь.
• Use Case Pattern (обзор) — методология, общий хребет специализаций.