раздел 07

Браузер и Frontend

DOM, события, наблюдатели, хранилища, воркеры. Слой рядом с пользователем.

19 уроков51 тем · 12 кластеров

Начать раздел

Хочу пройти

Без входа у каждого урока видно начало. Войди, чтобы читать целиком, отмечать пройденное и решать задачи. войти

Уроки раздела

Начать раздел

Понятия курса

Понятия разобраны внутри уроков. Нажми на понятие, чтобы открыть урок, где оно объясняется.

Платформа

Браузерные APIDOM, BOM, Events, Fetch, WebSocket, IndexedDB, SW, Web Workers, Storage, Clipboard, History, Observers.урок 1 · JavaScript в браузере и подключение скриптов
HTML / CSS, доступностьSemantic HTML, ARIA, Flexbox, Grid, CSS variables, SCSS/PostCSS, CSS-in-JS, Tailwind.урок 1 · JavaScript в браузере и подключение скриптов
JS в браузере, BOM, подключение скриптовwindow, location, history, navigator, screen. defer/async/type=module, importmaps. Polyfills и browser baseline.урок 1 · JavaScript в браузере и подключение скриптовопираются: урок 2
Браузерные движкиBlink/WebKit/Gecko. Pipeline: Parse -> Style -> Layout -> Paint -> Composite. Reflow vs Repaint.тема без урока

React

Императивная работа с DOM из ReactuseRef + focus(), forwardRef, useImperativeHandle. autofocus при появлении input.урок 6 · React: хуки, useId и работа с DOM через ref
Что вызывает ререндерИзменение props, state (useState/useReducer), context (useContext), parent rerender, forceUpdate.урок 4 · React: декларативный UI, JSX и первый компонент
JSX и альтернативыJSX = синтаксический сахар над createElement. h/hyperscript, jsx-runtime automatic, htm. Почему работает в TS/Babel.урок 4 · React: декларативный UI, JSX и первый компонент
Базовые хуки ReactuseState, useReducer, useEffect, useRef, useContext. Правила хуков, что возвращать из useEffect.урок 6 · React: хуки, useId и работа с DOM через refопираются: урок 7, урок 8, урок 9, урок 10, урок 19
Когда нужны классовые компонентыcomponentDidCatch и Error Boundaries. Почему функциональный компонент не ловит ошибки render и что не ловит try/catch.урок 7 · React: контекст, производительность и Suspense
React 19 + экосистемаHooks, Concurrent, Suspense, RSC. State (XState/Zustand/Redux Toolkit), Routing, Forms, react-query.урок 4 · React: декларативный UI, JSX и первый компонентопираются: урок 5, урок 6, урок 8, урок 13, урок 14, урок 15, урок 16, урок 18
useId: доступность и устройствоСвязь label, input и подсказки. mountId/updateId, memoizedState, путь в дереве, локальный счётчик и identifierPrefix.урок 6 · React: хуки, useId и работа с DOM через ref
useMemo, useCallback, React.memoКогда нужно (тяжёлые вычисления, ссылочное равенство props), когда нет (антипаттерн memoize всё). Задача useIncrement.урок 7 · React: контекст, производительность и Suspenseопираются: урок 15
Virtual DOM и ReconciliationЗачем VDOM, фазы render и commit, fiber, ключи, как diff проходит списки, ограничения алгоритма.урок 5 · React: композиция, жизненный цикл и что вызывает ререндеропираются: урок 6, урок 7
React 19: use(), Actions, useOptimisticuse() читает Promise и Context прямо в рендере. Actions: useActionState/useFormStatus/useOptimistic убирают флаги isLoading и try/catch.урок 7 · React: контекст, производительность и Suspense
React Compiler: автоматическая мемоизацияBabel/SWC-плагин, который сам расставляет memo/useMemo/useCallback на этапе сборки. Требует Правил React и линтера.урок 7 · React: контекст, производительность и Suspense

Tooling

Build toolingVite, esbuild, SWC, Rollup, Webpack. Tree-shaking, code splitting.урок 16 · Бандлеры внутри: Vite, esbuild, SWC, свой за 80 строкопираются: урок 18
Внутренности бандлераМодульный граф, AST, топологическая сортировка, code splitting, tree-shaking, dynamic import, source maps. Авторский мини-бандлер ~80 строк.урок 16 · Бандлеры внутри: Vite, esbuild, SWC, свой за 80 строк

Производительность

Когда приложение требует оптимизацииСигналы: метрики CWV, жалобы, RUM-перцентили, бюджеты бандла. Profile-driven optimization vs cargo cult.урок 18 · Микрофронтенды и наблюдаемость: Module Federation, Sentry, RUM
Инструменты профайлинга фронтаChrome DevTools Performance/Memory/Coverage, Lighthouse, React Profiler, WebPageTest, RUM, INP в проде.урок 17 · Тестирование вглубь: Playwright, visual, mutation, Lighthouse CIопираются: урок 18
Core Web VitalsLCP, INP, CLS. Virtualization, memoization, concurrent features. Resource hints.урок 18 · Микрофронтенды и наблюдаемость: Module Federation, Sentry, RUM
Нагрузочное тестирование фронтендаk6 + browser, Playwright + load, RUM-проверки. Что меряем: TTFB при кэше CDN, INP под нагрузкой, edge cases масштаба.тема без урока

Наблюдаемость

Frontend ObservabilitySentry, PostHog, LogRocket, OpenTelemetry/Grafana.урок 18 · Микрофронтенды и наблюдаемость: Module Federation, Sentry, RUM

Состояние и кэш

Сайд-эффекты в Redux: thunk, sagaThunk, sagas (takeLatest/takeEvery), enhancer vs middleware, сигнатура middleware, связка с роутером.урок 11 · Сайд-эффекты и RTK Query: кэш, теги, оптимизм
Стейт-менеджмент: обзорЧто такое state management и зачем. Локальное vs глобальное. Redux/RTK, Zustand, MobX, Jotai, signals.урок 9 · Карта состояния и формы: RHF, zod, i18nопираются: урок 10, урок 11, урок 12, урок 14, урок 17
Redux: архитектураОднонаправленный поток, единый источник правды, actions/reducers/store, чистые редьюсеры, селекторы, RTK как стандарт.урок 10 · Redux Toolkit: журнал, slice и нормализацияопираются: урок 11, урок 12
Server state и кеш (React Query, RTK Query, SWR)Кеш vs состояние, инвалидация по тегам, оптимистичные апдейты, refetch on focus, инвалидация одного элемента списка.урок 11 · Сайд-эффекты и RTK Query: кэш, теги, оптимизм
Reatom: атомарный реактивный стейтatom, computed, action без ctx. Чтение вызовом, обновление через .set, граф зависимостей по вызовам. withAsyncData, withAsync, withLocalStorage. Контраст с Redux и сигналами.урок 12 · Reatom: атомы, граф и точечная реактивностьопираются: урок 13

Маршрутизация и формы

Маршрутизация во фронтеReact Router, TanStack Router, file-based в Next/Astro. Защищённые маршруты, lazy-routes, query/hash/state.тема без урока
Формы: RHF, zod, валидация и UX ошибокControlled vs uncontrolled, react-hook-form, zod-resolver, FormData, доступность.урок 9 · Карта состояния и формы: RHF, zod, i18n

Браузер: события и хранилища

События в браузереBubbling/capturing, target vs currentTarget, preventDefault/stopPropagation/stopImmediatePropagation, passive, делегирование.урок 2 · DOM: дерево, поиск, события
Формы в браузере: FormData, валидация, a11yFormData, URLSearchParams, multipart vs urlencoded. Constraint Validation API, willValidate, setCustomValidity. Доступность: label, aria-invalid, focus management.урок 3 · AJAX, формы и хранилища в браузереопираются: урок 9
Хранилища в браузереCookies, localStorage, sessionStorage, IndexedDB, Cache API, OPFS. Лимиты, безопасность, SameSite, HttpOnly.урок 3 · AJAX, формы и хранилища в браузере
AJAX: XHR, fetch, WebSocket, SSEИстория AJAX: XHR -> fetch -> AbortController. WebSocket, EventSource (SSE). CORS, credentials, preflight. Стратегии retry на клиенте.урок 3 · AJAX, формы и хранилища в браузере
CSS: центрирование, скрытие, layoutFlex/grid/absolute centering, display vs visibility vs opacity (interaction, a11y, animation), layout shift, container queries.тема без урока
DOM: структура, поиск, манипуляцииDocument/Node/Element иерархия. querySelector vs getElementById, closest, traversal. createElement, append, replaceWith, cloneNode, insertAdjacentHTML. MutationObserver.урок 2 · DOM: дерево, поиск, событияопираются: урок 3, урок 4

Архитектура фронта

Архитектурные паттерны фронта: MVC, Flux, FSDMVC, MVP, MVVM (Vue/Knockout), Flux, Redux как Flux, Feature-Sliced Design (FSD), Atomic Design для UI-китов. Какой паттерн под какую команду.урок 14 · Архитектура фронта: автоматы, FSD и Atomic
TypeScript в ReactFC<> антипаттерн, типизация props, generic-компоненты, forwardRef, события, useState с union, дискриминированные пропсы.урок 14 · Архитектура фронта: автоматы, FSD и Atomic
Слоистая и гексагональная архитектураLayered (зависимости только вниз по ярусам) и hexagonal (ports and adapters). FSD это layered под фронт, гексагональные идеи в публичных index.ts срезов.урок 14 · Архитектура фронта: автоматы, FSD и Atomic
HDAA: htmx, Hotwire, LiveViewHypermedia-Driven Applications. Сервер отдаёт HTML-фрагменты, клиент их подменяет. Без JSON-API и стейт-менеджера.урок 15 · Откуда берётся HTML: CSR, SSR, Streaming, RSC, Astro
SSR и гидратация изнутриДва выполнения компонентов, один снимок данных. renderToString/hydrateRoot, безопасный JSON, useId, mismatch и streaming SSR.урок 19 · SSR и гидратация: один HTML, два выполнения React
SSR, SSG, ISR, StreamingСерверный HTML, SEO и ранний контент. Hydration, цена TTFB, SSG/ISR, edge SSR и Suspense streaming.урок 15 · Откуда берётся HTML: CSR, SSR, Streaming, RSC, Astroопираются: урок 19
UI State и lifecycle приложенияТипы state: server/UI/route/form/process. Жизненный цикл SPA: bootstrap, auth check, feature flags, locale. Конечный автомат процесса (idle/loading/error/success).урок 14 · Архитектура фронта: автоматы, FSD и Atomic
МикрофронтендыModule Federation, single-spa, iframe-композиция, контракт взаимодействия, версионирование, изоляция стилей.урок 18 · Микрофронтенды и наблюдаемость: Module Federation, Sentry, RUM

Кросс-браузерность и адаптивность

Кроссбраузерная и адаптивная вёрсткаBaseline web platform, autoprefixer, can-i-use, фичетесты, Safari/iOS, container queries, responsive с динамикой.тема без урока

Альтернативные фреймворки

Vue 3: Composition API и реактивностьref, reactive, computed, watch. Reactivity через Proxy. SFC (<template>/<script setup>/<style scoped>). Pinia как store. Сравнение с React.урок 13 · Vue 3 и реактивные модели: Proxy, сигналы, три Echo
Signals: Solid, Svelte 5, Qwik, TC39 proposalИдея сигналов: атомарная реактивность без VDOM-diff. Solid (createSignal/createEffect), Svelte 5 runes ($state/$derived), Qwik resumability, TC39 Signals proposal.урок 13 · Vue 3 и реактивные модели: Proxy, сигналы, три Echo

Тестирование фронта

Двойники тестов: dummy, fake, stub, spy, mockКлассификация Meszaros: dummy (заглушка-параметр), fake (рабочая, но лёгкая реализация), stub (предзаписанные ответы), spy (запись вызовов), mock (stub + spy + проверка).урок 17 · Тестирование вглубь: Playwright, visual, mutation, Lighthouse CI
Пирамида и трапеция тестовПирамида (Cohn): unit -> integration -> E2E. Трапеция (Kent C. Dodds): тяжёлый integration-слой. Зачем какой слой и сколько штук.урок 8 · Тестирование React: RTL, Vitest и MSW
RTL + Vitest + MSWReact Testing Library: render, screen, query priorities (ByRole > ByText > ByTestId). userEvent vs fireEvent. Vitest + jsdom. MSW для HTTP-моков.урок 8 · Тестирование React: RTL, Vitest и MSWопираются: урок 17
E2E с PlaywrightPlaywright: fixtures, авторизация (storageState), параллельность, trace viewer, codegen. Что тестировать в E2E (golden paths), что нет.урок 17 · Тестирование вглубь: Playwright, visual, mutation, Lighthouse CI
Visual regression и StorybookStorybook как каталог компонентов + isolation-среда. Chromatic / Loki / Percy для скриншот-diff. Когда snapshot-DOM, когда screenshot, когда mutation testing.урок 17 · Тестирование вглубь: Playwright, visual, mutation, Lighthouse CI