Мок-собес · 27 августа 2026
Разбор часовой записи: как устроен собес по фронтенд-систем-дизайну, какие вопросы звучат с обеих сторон стола и что нужно знать, чтобы дожать каждый блок.
Длительность
57 мин уложились в час, не успели два блока
Фаз в собесе
11 от границ скоупа до фидбэка
Тем на подготовку
16 блоки A–P
Пять дополнительных условий в постановке — заготовленные крючки. Каждое из них интервьюер разворачивает в отдельный deep dive. Проговорить их вслух в начале и вернуться к каждому по ходу.
Таймкоды — из записи. Бюджет — рекомендованный на час
Прочитать задачу вслух и сразу отсечь лишнее: «Мы проектируем только пользовательскую часть? Кабинет авиакомпании и менеджера не трогаем?» Первое, что оценивают, — не бросился ли кандидат проектировать всё сразу.
Выписать пользовательский флоу списком и держать на виду. По ходу собеса возвращаться к нему и вычёркивать закрытые пункты — в записи это делалось трижды и работало.
Ядро первой трети. Спрашивает кандидат, интервьюер отвечает как продакт. Здесь закладываются все дальнейшие решения — каждое НФТ потом должно всплыть как обоснование технологии.
Считать вслух: 1000 DAU × 10 запросов ÷ 100 000 с ≈ 0,1 RPS, трафик ≈ 2 МБ/с. Здесь стоял главный капкан собеса — средний RPS против пикового. Сошлись на 1000 RPS в пике.
Схема поблочно с проговариванием: клиент → CDN → балансировщик → SSR-ноды → API Gateway → микросервисы поиска и фильтрации → Redis → Postgres, отдельно Payment-сервис во внешнюю платёжную систему.
Каждая технология — только вместе с «почему». Прозвучало: SSR ради SEO, React из-за рынка найма при росте команды, RTK в хосте и Context с React Query в микрофронтах, Module Federation, Nginx, TypeScript.
Отдельный запрос интервьюера: компоненты, страницы, слои. Ответ — FSD и слоистая структура плюс разнесение страниц: поиск на SSR, детальная карточка и оплата на клиенте.
Коротко и списком: CSP против XSS, HTTPS, токены против CSRF, CDN как щит от DDoS. Блок небольшой, но его отсутствие замечают.
GET на поиск, GET на фильтрацию (интервьюер подводит к тому, что их надо объединить), GET на детальную карточку, POST на оплату. JSON поверх HTTPS, между микросервисами gRPC. Сущности не успели.
Интервьюер берёт одно из условий и давит вглубь: «API отвечает 10 секунд, первые результаты готовы за 500 мс». Раскрутка шла четырьмя слоями — ленивая подгрузка, виртуализация, пагинация, стриминг. Ответ, к которому вели: Server-Sent Events.
Что не успели, вопросы кандидата, договорённость о фидбэке.
Десять пунктов за семь минут — рабочий темп. Справа — ответ интервьюера.
Жирным — то, что реально прозвучало в записи
Спрашивает кандидат
Молчаливый кандидат на систем-дизайне проигрывает по умолчанию. Эти вопросы задают в первые десять минут.
Спрашивает интервьюер
Вопросы идут не по списку, а по слабым местам того, что кандидат нарисовал и произнёс.
Семь мест, каждое с готовым исправлением
Посчитал 0,1 RPS и остановился. Интервьюер: «Тысяча активных может сделать запрос одновременно — у тебя всё упадёт».
Как надоВсегда два числа: средний RPS и пиковый с коэффициентом на всплеск — рассылка, акция, утро понедельника.
SSR появился на доске молча, «почему» прозвучало только после прямого вопроса интервьюера.
Как надоКаждый блок схемы проговаривать формулой «беру X, потому что требование Y».
Цифра взята на глаз и утянула за собой весь расчёт трафика. Для такого сервиса реалистичный ориентир — сотни килобайт на первый экран.
Как надоДержать в голове рабочие ориентиры размеров, чтобы допущение не выглядело случайным.
Решение оправдывалось будущим ростом, но для MVP с парой разработчиков это преждевременная сложность.
Как надо«На старте монолит, готовый к выделению микрофронтов. Граница, по которой режу, — больше двух команд».
Главный deep dive: перебрал ленивую подгрузку, виртуализацию и пагинацию, но до стриминга не дошёл — SSE назвал сам интервьюер.
Как надоБэкенд отдаёт результаты порциями по мере готовности через Server-Sent Events, фронт дорисовывает список.
17 минут на верхнеуровневую схему — в итоге не успели ни API целиком, ни сущности, ни Web Vitals.
Как надоВслух объявлять бюджет: «на схему беру 10 минут, дальше иду в API».
Несколько минут ушло на «ты видишь квадратик?» — рисунок не долетал до собеседника.
Как надоПроверять инструмент до начала и при первом же сбое переключаться на демонстрацию экрана.
Шестнадцать блоков — под материалы базы знаний
Функциональные и нефункциональные требования, чек-лист вопросов, расчёт DAU → RPS → трафик, средний против пикового, оценка размера бандла, MVP против масштабирования, как вести доску и держать время.
CSR, SSR, SSG, ISR и когда что. Потоковый SSR и Suspense, гидратация и её виды, React Server Components, Next.js и Remix, TTFB, FCP, LCP, выбор стратегии на каждую страницу.
CDN и edge, регионы. HTTP-кэш: Cache-Control, ETag, stale-while-revalidate. Слои кэша от клиента до Redis, инвалидация. Балансировщики и алгоритмы: round-robin, least connections, sticky sessions. Nginx.
REST-дизайн ресурсов, объединение поиска и фильтрации, пагинация offset против cursor и keyset, сортировка и фильтры в query, идемпотентность и идемпотентные ключи для оплаты, версионирование, GraphQL, gRPC, паттерн BFF.
Server-Sent Events, WebSocket, long polling, HTTP chunked и потоковые ответы, стриминг разметки. Когда что выбирать и чем платишь за каждый вариант.
Виртуализация и как она устроена изнутри, бесконечный скролл против пагинации, скелетоны и оптимистичный рендер, батчинг обновлений, работа с сотнями тысяч записей.
React Query и SWR: staleTime, инвалидация, рефетч, дедупликация. RTK и RTK Query, границы применимости Context, когда серверный кэш заменяет глобальный стор, нормализация данных.
FSD и слоистые архитектуры, микрофронтенды и Module Federation, границы разрезания и цена решения, монорепозитории, дизайн-система, критерии перехода от монолита.
Устаревание цены и доступности, поллинг против подписки, повторная валидация перед оплатой, расхождение цены в момент покупки, блокировка мест и таймаут корзины, идемпотентность платежа.
XSS и Content Security Policy, CSRF и токены, HTTPS и HSTS, cookie и SameSite, хранение токенов, защита от DDoS и ботов, что означает PCI DSS для фронта, персональные данные пассажиров.
Core Web Vitals, разделение бандла и ленивые чанки, preload, prefetch, preconnect, оптимизация изображений и форматы, шрифты, бюджет производительности, профилирование React.
i18n и подходы к переводам, валюты и форматирование, часовые пояса и время вылета, поддомены против подпапок, hreflang и региональный SEO, юридические различия по странам.
Индексация клиентского рендеринга, SSR и пререндер, метатеги и Open Graph, sitemap и robots, микроразметка Schema.org, посадочные страницы направлений.
Таймауты, ретраи и экспоненциальная задержка, circuit breaker, graceful degradation при недоступном провайдере, error boundaries, фолбэки и заглушки, обработка частичных ответов.
RUM и синтетика, Sentry и трекинг ошибок, логи и трассировка на фронте, продуктовые метрики, A/B-эксперименты и фичефлаги.
Desktop и mobile в одном приложении, responsive против adaptive, тач-интерфейсы, клавиатурная навигация, семантика и ARIA для списка результатов и панели фильтров.