Mock-интервью по Frontend System Design
↑ 9.2 Финальная подготовка: live coding и вопросы · ← Предыдущая · → Следующая
Зачем это на собесе
Знание паттернов не гарантирует хороший ответ. Нужна практика полного 45–60-минутного интервью.
Формат тренировки
- Выберите задачу из списка.
- Засеките 45 минут.
- Проговаривайте вслух (запись или партнёр).
- По таймингу: требования 0–8, high-level 8–15, данные и API 15–30, оптимизации, безопасность, надёжность 30–45, компромиссы 45–60.
- Разберите с чек-листом.
Задачи для практики
| Задача | Ключевые точки |
|---|---|
| Автокомплит | debounce, кэш, отмена, a11y |
| Лента новостей | пагинация, виртуализация, оптимистичный UI |
| Чат / мессенджер | WebSocket, порядок и доставка, offline |
| Таблица админки | серверные фильтры, виртуализация, URL |
| Конструктор форм | схема, валидация, версии |
| Видеоплеер / стриминг | буферизация, адаптивный битрейт, метрики |
| Онлайн-редактор документов | CRDT/OT, курсоры, сохранение |
| Дашборд с графиками | real-time, агрегации, производительность |
| Корзина и оформление заказа | состояние, платежи, идемпотентность |
| Галерея изображений | ленивая загрузка, кэш, CLS |
| Календарь | часовые пояса, повторяющиеся события |
| Микрофронтенды | границы, интеграция, общий shell |
| Дизайн-система | токены, API компонентов, версии |
Чек-лист самооценки
- уточнил функциональные и нефункциональные требования;
- нарисовал схему компонентов и потоков данных;
- обсудил состояние (серверное, клиентское, URL), кэш;
- определил API и пагинацию;
- рассмотрел производительность (Web Vitals, бандл, виртуализация);
- обсудил ошибки, повторы, offline;
- упомянул безопасность, доступность, i18n;
- мониторинг и тестирование;
- назвал компромиссы и альтернативы;
- уложился по времени.
Типичные слабые места
- слишком много технологий без причины;
- игнорирование нефункциональных требований;
- отсутствие обсуждения ошибок и деградации;
- отсутствие цифр (объёмы, задержки);
- нет альтернатив и компромиссов.
Форма ответа
Всегда: что, почему, альтернатива, цена. Например: «Курсорная пагинация: устойчива при вставках. Альтернатива offset проще, но дублирует записи на активной ленте. Цена: нельзя перейти на страницу N».
Вопросы с ответами
Что делать, если не знаю технологии, которую спросили?
Назвать близкие концепции, объяснить принцип решения задачи и что бы вы изучили; честность лучше догадок.
Как показать senior-уровень в system design?
Вести обсуждение, называть компромиссы, ссылаться на опыт («на проекте мы столкнулись с…»), затрагивать эксплуатацию, наблюдаемость и эволюцию.