frontend
Архитектура фронтенда
Как устроить настоящее фронтенд-приложение: где хранить данные, как их загружать и как не дать растущему коду превратиться в кашу.
Начать трек →С нуля
Перед senior-материалом: что вообще такое архитектура фронтенда и горстка слов, которые остальной трек считает уже знакомыми.Форма состояния
Как проектировать форму клиентского состояния — локальное vs глобальное, колокация, производные данные и трейдоффы нормализации.Data fetching: сервер vs клиент, waterfall'ы, RSC и SWR-кэш
Место data fetching решает LCP. Server fetch сводит critical path к одному round-trip; client fetch после JS добавляет 2–4 последовательных trip'а. Waterfall'ы — тихие убийцы: Promise.all, RSC и TanStack Query кэш их лечат.Формы и доступность
Доступные паттерны форм: семантический HTML, ARIA-атрибуты, управление фокусом, сообщения об ошибках и клавиатурная навигация.Дизайн-токены
Дизайн-токены как единый источник истины для цвета, отступов и типографики в компонентах и темах.Монорепозиторий
Трейдоффы инструментов монорепозитория — Turborepo, Nx и changesets — и когда общие пакеты оправдывают накладные расходы.Разбивка кода
Разбивка кода на уровне маршрутов и компонентов, ленивая загрузка и стратегии предзагрузки для низкого Time-to-Interactive.Пайплайны сборки
Пайплайны сборки фронтенда: внутренности бандлеров, tree shaking, module federation и интеграция с CI/CD.Собираем вместе
Итоговый урок: применение знаний о состоянии, формах, токенах, монорепо, разбивке и сборке в production-архитектуре фронтенда.Проекты по этому треку
Guided-проекты, которые закрепляют изученное здесь.
Совместные курсоры
Показать живой курсор и выделение каждого подключённого пользователя в общем документе, без конфликтов, через WebSocket.
Палитра команд
Палитра команд ⌘K с нечётким ранжированием, асинхронными источниками действий и полным клавиатурным управлением (стрелки, Enter, Escape, области видимости) — интерактивный слой, который нужен каждому профессиональному инструменту.
Next.js-приложение в продакшен
Собери мультитенантное контент-приложение на App Router — а потом эксплуатируй его: закрой авторизацию и секреты, наслои кэши, реши каждый выбор edge-vs-node и разберись с инцидентом, когда один тенант отравляет общую ISR-страницу.
Офлайн-синхронизация PWA
Notes PWA с офлайн-приоритетом: локальная очередь записей (IndexedDB), которая синхронизируется при переподключении через last-writer-wins, service worker для кеширования ресурсов и background sync для пропущенных записей.
Личная страница-портфолио
Собери одностраничный сайт о себе на чистом HTML, CSS и капле JavaScript — без фреймворка, без сборки, просто файлы, которые открываются в браузере. В итоге у тебя будет что показать, и ты по-настоящему поймёшь каждую строчку, потому что написал её сам.
React-фича под нагрузкой
Выкати одну настоящую production-фичу на React — живой совместный дашборд активности — а потом эксплуатируй её: оптимистичные правки, стриминговые обновления, бюджет на кадр, полную доступность и разбор инцидента, когда render-шторм замораживает вкладку.
Мини-сигналы
Собери реактивную библиотеку сигналов примерно в 100 строк (signal/computed/effect) с автоматическим отслеживанием зависимостей и безглючными батч-обновлениями — та же модель, что лежит в основе Solid, Preact Signals и Vue 3.
Движок автодополнения на основе trie
Собери префиксное дерево для ранжированного автодополнения — вставляй слова с весами, проходи каждый префикс за O(длина_префикса + результаты) и детерминированно разрешай ничьи без базы данных.
Виртуальная таблица данных
Отрисуй и плавно прокручивай 100 тыс. строк на 60fps с windowing-виртуализацией, залипающими заголовками и полной клавиатурной навигацией — без библиотек, только математика.
Архитектура бэкенда
Как сервер обрабатывает запрос от начала до конца — и как сделать его надёжным: фоновые задачи, безопасные повторы и аккуратная остановка.