Фреймворк ответа: требования, архитектура, данные, API, оптимизации
↑ 8.4 Frontend System Design · → Следующая
Зачем это на собесе
Frontend System Design оценивает структуру мышления: умеете ли вы уточнять требования, разбивать систему и обсуждать компромиссы.
Тайминг на 45–60 минут
| Минуты | Этап |
|---|---|
| 0–8 | Требования и границы |
| 8–15 | High-level архитектура |
| 15–30 | Данные, состояние, API |
| 30–45 | Производительность, безопасность, надёжность |
| 45–60 | Компромиссы, эволюция, вопросы |
Этапы ответа
- Требования: функциональные (что делает), нефункциональные (нагрузка, устройства, offline, доступность, SEO, языки). Уточняйте: платформа, масштаб, ожидаемая задержка, пользователи.
- Архитектура: компоненты и их границы, дерево компонентов, роутинг, шаблон рендеринга (CSR/SSR).
- Модель данных и состояние: сущности, где хранится (серверное, клиентское, URL), нормализация, кэш.
- API: REST/GraphQL, форма запросов, пагинация, ошибки, версии, real-time.
- Оптимизации: производительность (Web Vitals, code splitting), UX (skeleton, optimistic UI), офлайн.
- Безопасность и надёжность: авторизация, XSS/CSRF, повторные попытки, деградация.
- Доступность и i18n.
- Тестирование и мониторинг.
- Компромиссы и эволюция: что бы сделали при росте.
Диаграмма высокого уровня
[Browser]
├─ UI (components)
├─ State (server cache + client state + URL)
├─ Data layer (API client, cache, retry)
└─ Platform (routing, i18n, a11y, monitoring)
│
[CDN] → [BFF / API Gateway] → [Backend services]Что оценивают
- умение уточнять и структурировать;
- глубина в ключевых местах (данные, производительность);
- обоснование выбора и альтернативы;
- компромиссы: сложность, время, стоимость, UX;
- коммуникация: вы ведёте интервью.
Ошибки
- сразу рисовать компоненты без требований;
- перечислять технологии без причины;
- игнорировать производительность, ошибки и доступность;
- не называть ограничения решения.
Вопросы с ответами
С чего начать ответ на задачу System Design?
С вопросов: функциональные и нефункциональные требования, платформа, масштаб, ограничения. Затем зафиксировать границы решения.
Как показать senior-уровень?
Называть несколько вариантов с плюсами и минусами, обосновывать выбор, говорить о деградации, наблюдаемости и эволюции системы.