Frontend Senior — техническое интервью

75 минут, senior. Архитектура UI, производительность, design system, доступность.

Questions
15
Live coding
2

Разогрев: опыт и контекст

  1. Техническое влияние

    BehavioralMedium

    Какое решение за последние 1–2 года дало наибольший эффект для продукта или команды? Что именно сделали вы?

    Scoring rubric (0–10)
    3–5: «Улучшили производительность» без метрик и своей роли.
    6–8: Конкретное решение, контекст, результат (latency, cost, velocity).
    9–10: Trade-offs до/после; как убедили стейкхолдеров; что измеряли.
    Красный флаг: приписывает себе работу команды без деталей.
    Interviewer notes
    5 минут — ключевой вопрос для senior+.
  2. Мотивация смены

    BehavioralEasy

    Почему сейчас рассматриваете новые возможности? Что ищете в следующей роли?

    Scoring rubric (0–10)
    3–5: «Хочу роста / денег» без конкретики.
    6–8: Понятные критерии (стек, продукт, процессы); не toxic про текущего работодателя.
    9–10: Осознанный fit: что даст компания кандидату и наоборот.
    Красный флаг: только негатив про прошлые команды, обвиняет всех кроме себя.
    Interviewer notes
    Не давить — достаточно 2–3 минут.
  3. Масштаб продукта

    BehavioralMedium

    Какой был самый большой 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

  1. Micro-frontends

    TheoryHard

    Когда 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 минут.
  2. Server vs client state

    TheoryHard

    Как проектируете слой данных: 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 минут.
  3. Design system

    TheoryHard

    Как внедряли или поддерживали 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 минуты.
  4. Core Web Vitals

    TheoryHard

    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 минут.
  5. Frontend security

    TheoryHard

    Откуда берётся 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 минуты.

Практика: живой код

  1. Virtualized list hook

    Coding taskHardCode

    Спроектируйте 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 + обсуждение.
  2. Deep equal

    Coding taskHardCode

    Реализуйте 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

  1. A11y audit

    TheoryHard

    Как проводите 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 минуты.
  2. i18n и RTL

    TheoryMedium

    Добавляете 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 минуты.

Инженерная культура и вопросы

  1. Приоритизация техдолга

    BehavioralMedium

    Как решаете, когда платить техдолг, а когда откладывать ради фич? Пример из практики.

    Scoring rubric (0–10)
    3–5: «Всегда сначала фичи» или «всегда сначала рефакторинг».
    6–8: Критерии (риск, частота изменений, cost of delay); пример компромисса.
    9–10: Связь с roadmap; % capacity на платформу; метрики (MTTR, lead time).
    Красный флаг: техдолг = «переписать всё с нуля».
    Interviewer notes
    4 минуты.
  2. Архитектурное решение

    BehavioralHard

    Опишите спорное техническое решение в команде. Как пришли к итогу?

    Scoring rubric (0–10)
    3–5: «Мы выбрали микросервисы» без альтернатив.
    6–8: Варианты, аргументы, критерии; роль кандидата; итог и последствия.
    9–10: RFC/ADR; dissenting opinion учтён; postmortem/ревизия решения через время.
    Красный флаг: «насильно навязал своё» без данных.
    Interviewer notes
    5 минут.
  3. Вопросы к нам

    BehavioralEasy

    Какие вопросы у вас к нам про команду, продукт или процессы?

    Scoring rubric (0–10)
    3–5: «Нет вопросов» или только про отпуск/ЗП.
    6–8: 2–3 содержательных вопроса про продукт, команду, релизы.
    9–10: Вопросы показывают, что изучил компанию; уточняет ожидания от роли.
    Красный флаг: нулевой интерес к продукту на middle+.
    Interviewer notes
    Оставить 3–5 минут в конце интервью.

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