Главная › Frontend

Frontend

Frontend-специализация на React + TypeScript: фундамент платформы (this, event loop, события DOM, рендер, анимации, сборка), компоненты, состояние, данные, формы, роутинг, качество.

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

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

JavaScript и браузер

  1. this: контекст вызова — четыре правила, стрелочные функции, потеря this в колбэках.
  2. Event loop: как работает и где стреляет — макро- и микрозадачи, порядок выполнения, длинные задачи.
  3. События DOM — всплытие и погружение, делегирование, passive-слушатели.
  4. Критический путь рендера — от байтов HTML до пикселей: что блокирует и что дорого.
  5. Обработка ошибок в JS и браузере — try/catch, unhandledrejection, глобальные обработчики, мониторинг.
  6. Анимации: CSS и оптимизации — transform/opacity, will-change, 60fps.
  7. Сборка фронтенда — Vite и webpack, code splitting, tree shaking.

Фундамент

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

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

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

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

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

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

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

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

Связанное