Урок 1Обработка форм и валидация (контролируемые vs неконтролируемые, библиотеки: Formik, React Hook Form, VeeValidate)Реализуйте надежную обработку форм и валидацию. Сравните контролируемые и неконтролируемые поля ввода, используйте библиотеки вроде Formik, React Hook Form и VeeValidate, проектируйте валидацию, сообщения об ошибках и потоки отправки для сложных форм.
Controlled vs uncontrolled input strategiesFormik and React Hook Form in practiceVeeValidate and Vue form patternsSynchronous and async validation rulesError messages, UX, and accessibilityУрок 2Библиотеки UI-компонентов и практики доступности (Tailwind, Material, Chakra, роли ARIA, навигация с клавиатуры)Научитесь использовать современные UI-библиотеки с сохранением высокой доступности. Изучите Tailwind, Material UI и Chakra, примените роли ARIA, управление фокусом и навигацию с клавиатуры для создания инклюзивных интерфейсов, готовых к продакшену.
Design systems with Tailwind and utility classesMaterial UI and Chakra component patternsSemantic HTML and ARIA role strategiesFocus management and keyboard navigationColor contrast, theming, and reduced motionУрок 3Выбор фронтенд-фреймворка и обоснование (React, Vue, Svelte) и компромиссы экосистемОцените и обоснуйте выбор фронтенд-фреймворка. Сравните архитектуры React, Vue и Svelte, зрелость экосистем, производительность и кривые обучения, чтобы выбрать и защитить оптимальный вариант для каждого контекста проекта.
React, Vue, and Svelte core conceptsEcosystem maturity and community supportPerformance and bundle size tradeoffsTypeScript and tooling integrationDecision frameworks for real projectsУрок 4Сборка, бандлинг и оптимизация: Webpack/Vite/Rollup, разделение кода, tree-shaking, обработка ассетовОсвойте современные инструменты сборки для производительного фронтенда. Сравните Webpack, Vite и Rollup, настройте разделение кода и tree-shaking, оптимизируйте обработку ассетов, кэширование и source maps для быстрых, поддерживаемых продакшен-бандлов.
Comparing Webpack, Vite, and Rollup setupsCode splitting and dynamic importsTree-shaking and dead code eliminationOptimizing images, fonts, and static assetsCaching, hashes, and source map strategiesУрок 5Клиентские тесты: юнит-тестирование компонентов, интеграционные тесты, выбор библиотек тестирования и примерыРазработайте надежную стратегию тестирования на стороне клиента. Изучите юнит-тестирование компонентов, интеграционные тесты по маршрутам и API, научитесь выбирать между Jest, Vitest, Cypress и Testing Library для создания надежных, поддерживаемых тестовых наборов.
Unit testing UI components in isolationIntegration tests for flows and routingUsing Testing Library for user-centric testsChoosing Jest, Vitest, Cypress, or PlaywrightMocking APIs and handling flaky testsУрок 6Локальная разработка и конфигурация окружения: переменные окружения, файлы .env, флаги функций для фронтендаНастройте надежные фронтенд-среды для локальной разработки и облака. Научитесь управлять переменными окружения, файлами .env, инъекцией на этапе сборки и флагами функций для безопасного переключения функциональности между разработкой, стейджингом и продакшеном.
Managing .env files and build-time variablesSeparating dev, staging, and production configsRuntime configuration and environment safetyImplementing frontend feature flagsSecrets handling and configuration pitfallsУрок 7Структура проекта и соглашения по папкам для одностраничных приложений (компоненты, страницы, сервисы, хуки)Спроектируйте масштабируемые структуры проектов для одностраничных приложений. Изучите соглашения по папкам для компонентов, страниц, сервисов и хуков, организуйте общие утилиты, тесты и стили для удобства работы с большими кодовыми базами.
Organizing components, pages, and layoutsServices, hooks, and data access layersShared utilities, types, and constantsStructuring tests and story filesRefactoring toward modular boundariesУрок 8Паттерны интеграции API: REST vs GraphQL-клиенты, обработка ошибок, повторы запросов, таймаутыРеализуйте надежные паттерны интеграции API на клиенте. Сравните REST и GraphQL-клиенты, настройте Axios или Fetch, обработайте ошибки и повторы запросов, спроектируйте таймауты, отмену и нормализацию для устойчивых слоев получения данных.
Configuring REST clients with Axios or FetchUsing GraphQL clients like Apollo or URQLGlobal error handling and user messagingRequest retries, backoff, and timeoutsCancellation, abort controllers, and cachingУрок 9Аутентификация на фронтенде: хранение токенов, потоки обновления, безопасные подходы с кукиПоймите безопасные паттерны аутентификации на фронтенде. Сравните localStorage, sessionStorage и куки, спроектируйте потоки обновления токенов, реализуйте HttpOnly-куки, защиту от CSRF и стратегии выхода, защищающие пользователей в реальных приложениях.
Token storage: localStorage vs cookiesImplementing refresh token flows safelyHttpOnly cookies and CSRF protectionHandling logout, revocation, and rotationAuth error handling and user feedbackУрок 10Варианты и паттерны управления состоянием (локальное состояние компонентов, Context, Redux/Pinia/MobX, React Query)Сравните варианты управления состоянием для сложных фронтендов. Изучите локальное состояние, Context, Redux, Pinia, MobX и React Query, научитесь паттернам кэширования, нормализации и избежания ненужных перерисовок в крупных приложениях.
Local component state and lifting patternsContext API for cross-cutting concernsRedux, Pinia, and MobX store designServer state with React Query or SWRPerformance tuning and selector patternsУрок 11Маршрутизация и защищенные маршруты: клиентская маршрутизация, охранники маршрутов, ленивая загрузкаСоздайте надежную клиентскую маршрутизацию с защищенными маршрутами. Изучите настройку маршрутов, вложенные маршруты, ленивую загрузку и охранников маршрутов, обеспечивающих аутентификацию и авторизацию при быстрой и доступной навигации.
Configuring client-side routers and routesNested routes and layout hierarchiesImplementing lazy loading and code splittingAuth-based route guards and redirectsHandling 404 pages and fallback routes