Frontend Senior — техническое интервью
75 минут, senior. Архитектура UI, производительность, design system, доступность.
- Questions
- 15
- Live coding
- 2
Разогрев: опыт и контекст
Масштаб продукта
Какой был самый большой frontend по трафику/команде/кодовой базе? Какие боли решали?
Scoring rubric (0–10)
3–5: «Большой SPA» без метрик. 6–8: MAU/страницы/размер bundle; проблемы (perf, releases, a11y); личный вклад. 9–10: Core Web Vitals; org structure; migration story с trade-offs. Красный флаг: senior без опыта prod performance issues.
Interviewer notes
5 минут.
Архитектура frontend
Micro-frontends
Когда micro-frontends оправданы, а когда монолитный SPA лучше?
Scoring rubric (0–10)
3–5: «Micro-frontends = modern» без критериев. 6–8: Team autonomy vs integration cost; module federation / iframe trade-offs. 9–10: Shared design system; routing ownership; versioning; observability across MFE. Красный флаг: MFE для команды из 3 человек.
Interviewer notes
5 минут.
Server vs client state
Как проектируете слой данных: React Query/SWR vs Redux vs local state?
Scoring rubric (0–10)
3–5: «Redux для всего» или «только useState». 6–8: Server cache (stale-while-revalidate); UI ephemeral state; colocation. 9–10: Optimistic updates; invalidation graph; offline/persistence where needed. Красный флаг: duplicate source of truth server+client без sync story.
Interviewer notes
5 минут.
Design system
Как внедряли или поддерживали design system? Как обеспечивали adoption?
Scoring rubric (0–10)
3–5: «Использовали UI kit». 6–8: Tokens, components, documentation; versioning; contribution model. 9–10: Metrics adoption; breaking change policy; a11y baked in; Figma ↔ code sync. Красный флаг: DS без consumers «сделали и забыли».
Interviewer notes
4 минуты.
Core Web Vitals
LCP/INP/CLS просели после релиза. Как диагностируете и что делаете?
Scoring rubric (0–10)
3–5: «Оптимизируем images» единственный ответ. 6–8: RUM vs lab; bundle analysis; lazy routes; font/image strategy. 9–10: Long tasks/INP; SSR/SSG trade-offs; perf budget in CI; regression alerts. Красный флаг: perf только «на глаз» без измерений.
Interviewer notes
5 минут.
Frontend security
Откуда берётся XSS в React-приложении и как предотвращаете?
Scoring rubric (0–10)
3–5: «React экранирует всё». 6–8: dangerouslySetInnerHTML; third-party scripts; CSP basics. 9–10: Sanitization libs; supply chain; token storage (httpOnly cookies). Красный флаг: localStorage для refresh token «удобно».
Interviewer notes
4 минуты.
Практика: живой код
Virtualized list hook
Спроектируйте useVirtualWindow(items, itemHeight, viewportHeight) — какие данные вернёт хук для рендера видимых элементов?
Scoring rubric (0–10)
3–5: Рендерит все items «потом оптимизируем». 6–8: start/end index; offset/spacer; scroll handler; overscan optional. 9–10: Dynamic heights strategy; resize observer; accessibility (keyboard scroll). Красный флаг: не понимает зачем windowing при 10k rows.
Interviewer notes
20 минут — можно pseudo-code + обсуждение.
Deep equal
Реализуйте deepEqual(a, b) для plain objects и arrays (без Map/Set).
Scoring rubric (0–10)
3–5: JSON.stringify compare. 6–8: Recursive; type check; array length; key sets. 9–10: Cycle detection; Date/RegExp edge cases if discussed; performance notes. Красный флаг: JSON.stringify для objects с unsorted keys as only solution.
Interviewer notes
15 минут.
Доступность и UX
A11y audit
Как проводите accessibility review перед крупным релизом?
Scoring rubric (0–10)
3–5: «Lighthouse score». 6–8: Keyboard nav; focus order; ARIA roles; contrast; axe in CI. 9–10: Screen reader testing; live regions; team training; WCAG level target. Красный флаг: a11y = «потом поправим».
Interviewer notes
4 минуты.
i18n и RTL
Добавляете RTL язык в существующее приложение. Какие технические риски?
Scoring rubric (0–10)
3–5: «CSS direction: rtl». 6–8: Logical properties; mirrored icons; date/number formatting; layout tests. 9–10: Content length expansion; pseudo-locale testing; SSR locale routing. Красный флаг: hardcoded left/right margins everywhere.
Interviewer notes
4 минуты.
Инженерная культура и вопросы
Run an interview with this template
Sign up free: copy the template to your org, schedule an interview, and run it in a room with live coding.
Get started in FlashTalk