Web Development на собеседовании

Google, Meta, Apple - на senior Frontend собеседованиях не спрашивают синтаксис. Спрашивают: 'Как работает Event Loop?', 'Спроектируй Google Photos', 'REST vs GraphQL - что выбрать?'. Это проверка понимания, а не знания API наизусть.

• **Meta (Facebook):** Frontend System Design - отдельный 45-минутный раунд. Спрашивают дизайн Instagram Feed: infinite scroll, виртуализация, real-time обновления через SSE, optimistic likes. Ожидается знание RADIO framework.
• **Stripe:** В coding раунде часто просят реализовать retry с exponential backoff и jitter - именно так устроен Stripe.js SDK для обработки network errors при платежах.
• **Vercel:** Tradeoff-вопросы на архитектурном интервью: 'Когда ISR лучше SSR?', 'Как выбрать между Edge Middleware и Server Actions?'. Правильный ответ - разобрать конкретный use case, а не дать абстрактный.

Dom Questions

DOM-вопросы на собеседованиях в FAANG проверяют понимание Event Loop, делегирования событий, Virtual DOM и оптимизации перерисовок. Вопрос 'как работает Event Loop' - один из самых частых в Google и Meta. Понимание разницы между Reflow (Layout) и Repaint критично для объяснения производительности.

Event Loop: Call Stack -> Web APIs -> Callback Queue (Task Queue) -> Microtask Queue. Microtasks (Promise.then, queueMicrotask) выполняются перед следующим Task (setTimeout, DOM events). Это объясняет почему `Promise.resolve().then(() => console.log('micro'))` выведется раньше `setTimeout(() => console.log('macro'), 0)`.

Async Questions

Async JavaScript - второй обязательный блок в FAANG-собеседованиях. Реализация Promise с нуля, Promise.all vs Promise.allSettled, отмена fetch через AbortController, избегание callback hell - всё это проверяется. Stripe в интервью спрашивает реализацию retry с exponential backoff.

Ловушки async/await: необработанные rejected promises (нет try/catch = UnhandledPromiseRejection), забытый await (функция возвращает Promise, не значение), параллельные запросы через `await` в цикле (waterfall вместо parallel). Promise.allSettled возвращает результаты всех промисов включая отклонённые - в отличие от Promise.all (fail-fast).

System Design

Frontend System Design - отдельный тип интервью в Meta, Google, Apple. Типичные вопросы: 'Спроектируй Google Photos Web', 'Спроектируй Twitter Feed', 'Спроектируй систему автодополнения'. Структура ответа: Clarify requirements -> High-level design -> Component design -> Performance -> Accessibility -> Error handling.

RADIO framework (Requirements, Architecture, Data Model, Interface, Optimizations) - стандартный подход для Frontend System Design. Ключевые темы: виртуализация длинных списков (react-window), infinite scroll vs pagination, optimistic updates, WebSocket vs SSE vs polling для real-time данных.

Tradeoffs

Вопросы о tradeoffs - высший уровень Frontend-собеседований. 'Когда использовать SSR против SPA?', 'REST vs GraphQL', 'TypeScript vs JavaScript для стартапа', 'Когда не нужен Redux?' Правильный ответ всегда начинается с 'Зависит от контекста...' и заканчивается конкретными критериями выбора.

Шаблон ответа на tradeoff-вопрос: 1) Уточни контекст (размер команды, трафик, SEO важен?), 2) Назови оба варианта честно, 3) Перечисли критерии выбора, 4) Дай конкретную рекомендацию. Избегай ответов 'X всегда лучше Y' - это red flag для интервьюера.

Итоги

• **DOM и Event Loop:** Microtasks (Promise.then) перед Macrotasks (setTimeout). Layout thrashing - батч reads/writes. transform/opacity не вызывают reflow. Делегирование событий через bubbling.
• **Async паттерны:** Promise.all vs allSettled (fail-fast vs always resolves). Retry с exponential backoff + jitter. Параллельные запросы через Promise.all, не await в цикле. AbortController для отмены fetch.
• **System Design + Tradeoffs:** cursor-based pagination для стабильного infinite scroll. Виртуализация через react-window/@tanstack/react-virtual. Ответ на tradeoff: контекст -> оба варианта честно -> критерии -> рекомендация.

Связанные темы

Подготовка к собеседованию охватывает все ключевые темы frontend разработки:

• TypeScript и типизация — На senior интервью часто просят объяснить generic constraints, conditional types и как TypeScript помогает избежать runtime ошибок в async коде
• Производительность (Core Web Vitals) — System Design вопросы часто включают LCP/CLS/INP оптимизации: виртуализация для INP, Streaming SSR для LCP, reserved placeholders для CLS
• Testing стратегия — На senior уровне спрашивают не только 'как написать тест', но и 'как выбрать между unit/integration/e2e' и 'как mock'ировать external APIs в тестах'

Вопросы для размышления

• Как объяснить Event Loop на конкретном примере, показывающем разницу между microtask и macrotask очередями?
• При проектировании real-time фида - когда выбрать SSE против WebSocket, и как обработать reconnection при разрыве соединения?
• Как аргументировать выбор GraphQL над REST для мобильного приложения с учётом ограничений трафика и сложности серверной реализации?

Связанные уроки

• sec-01