← Все навыки

Системный дизайн для фронтенд-разработчиков

Подготовка к секции Frontend System Design — проектирование фронтенд-приложений production-уровня

Frontend Middle → Senior Индивидуально с ментором

Для кого этот курс

  • Фронтенд-разработчики, готовящиеся к секции Frontend System Design — её всё чаще спрашивают вместо классических алгоритмов, в том числе в Яндексе
  • Инженеры, которые хотят проектировать фичи целиком: от рендеринга и API до кэширования и офлайна
  • Кандидаты на Senior-позиции, где спрашивают архитектуру, производительность и трейдофы

Программа

Сети и доставка контента

HTTP/1.1 → HTTP/3, CDN, кэширование
  • Эволюция HTTP: 1.1, 2, 3 — что это даёт фронту
  • TLS, DNS, CDN и доставка статики
  • HTTP-кэширование: Cache-Control, ETag, инвалидация

Рендеринг-архитектуры

CSR, SSR, SSG, ISR, гидрация
  • CSR vs SSR vs SSG vs ISR — выбор под SEO и скорость
  • Гидрация и streaming-рендеринг
  • SEO: crawling, semantic tags, sitemap, Open Graph
  • Кейсы: когда Next.js оправдан, а когда — лишний

Данные и API

REST vs GraphQL, BFF, клиентский кэш
  • REST, GraphQL, BFF — выбор протокола и слоя
  • Пагинация: offset vs cursor, бесконечный скролл
  • Клиентский кэш данных (react-query/SWR), optimistic updates

Real-time

Polling, SSE, WebSocket
  • Polling, long-polling, SSE, WebSocket — выбор транспорта
  • Реконнект, гарантия порядка, очереди сообщений

Состояние и модульность

Стейт на масштабе, микрофронтенды
  • Локальное vs глобальное состояние, синхронизация вкладок
  • Микрофронтенды и module federation — когда оправданы
  • Дизайн-системы и переиспользуемые компоненты

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

Web Vitals, бандл, 60 FPS
  • Web Vitals: LCP, INP, CLS — диагностика и оптимизация
  • Бандл-бюджет, code splitting, критический путь рендеринга
  • Виртуализация списков, оптимизация скролла до 60 FPS
  • Оптимизация изображений: srcset, компрессия, progressive images

Офлайн, PWA и безопасность

Service Worker, XSS/CSRF, токены
  • Service Worker и стратегии кэширования, офлайн-режим
  • XSS, CSRF, CSP, хранение токенов в браузере
  • Наблюдаемость: RUM, crash reporting, feature flags

Доступность и интернационализация

ARIA, контраст, локализация
  • Доступность: ARIA, контраст, клавиатурная навигация, медленные сети
  • Интернационализация: локализация форматов, plural forms, RTL

Стратегия интервью

Как вести секцию и защищать решения
  • Функциональные и нефункциональные требования: SEO, 60 FPS, офлайн, бандл-бюджет
  • Структура: требования → API и данные → архитектура компонентов → deep dives
  • Артикуляция трейдофов и работа с фидбеком интервьюера

Практика

Разборы в формате реального интервью — от требований до deep dives

  • Лента с бесконечным скроллом, чат, коллаборативный редактор, дашборд реального времени
  • Выбор рендеринг-стратегии под SEO и скорость с обоснованием
  • Дизайн кэширования: HTTP-заголовки + CDN + клиентский кэш данных
  • Mock-интервью Frontend System Design с разбором по критериям Middle/Senior