Frontend System Design

Быстрый переход к обучению

1. Frontend System Design — учебный модуль
2. Все учебные модули

Что нужно знать

1. Функциональные и нефункциональные требования (latency, availability, observability).
2. Границы системы: BFF, API gateway, CDN, edge.
3. Performance budgets и capacity planning для frontend.
4. Модели доставки: SSR/SSG/CSR/ISR hybrid.
5. Rollout-стратегии: feature flags, canary, rollback.

Что уметь объяснить на собеседовании

1. Как декомпозировать задачу system design в frontend-контексте.
2. Как выбирать компромисс между скоростью разработки и надежностью.
3. Как закладывать наблюдаемость и диагностику в архитектуру.
4. Как защищать решение при изменении требований.

Грейд-фокус

1. Junior: знать базовые термины и ограничения.
2. Middle: участвовать в проектировании модулей и оценке trade-offs.
3. Senior: вести архитектурный раунд end-to-end.

Глубокие кейсы собеседования

1. Проектирование личного кабинета с высокой нагрузкой: ключевые аспекты: data-fetch strategy, кэширование, fallback UX, graceful degradation.
2. Мультирегиональный продукт: CDN strategy, cache invalidation, локализация и latency budget.
3. Требование быстрой доставки новой фичи без риска: feature flags, staged rollout, мониторинг и instant rollback.

Практический минимум

1. Разобрать 2 system design кейса и оформить архитектурный ответ.
2. Составить performance budget для одного ключевого экрана.
3. Подготовить схему observability для frontend-инцидентов.

Типовые ловушки

1. Сразу уходить в инструменты без постановки требований.
2. Игнорировать эксплуатацию и поддержку.
3. Не закладывать план отката и мониторинга.

Self-review перед собеседованием

1. Я могу начать с требований, а не с технологий.
2. Я умею назвать основные компромиссы выбранного дизайна.
3. Я могу защитить решение с точки зрения бизнеса и инженерии.

Связанные материалы

1. Frontend-архитектура
2. Тестирование frontend
3. Tooling и Delivery