Собес в Сбер · Frontend разработчик (Disrupt)
Материал Эйч · Опубликовано 21 июля 2026
Обзор
Senior-роль в команде Disrupt (блок ГенИИ): UI для AI-продуктов Giga, клиентская логика, интеграция с LLM-API и агентами. Офис, Москва (м. Кутузовская).
Фишка: Команда Disrupt работает как фабрика гипотез: быстрые MVP AI-продуктов на базе Giga, масштабирование успешных сценариев. На собесе ценят скорость мышления, глубину в CS и умение строить удобные LLM-интерфейсы.
| Этап | Длительность | Что проверяют |
|---|---|---|
| HR-скрининг | 30–45 мин | Мотивация, опыт с TS/React, готовность к офису, зарплатные ожидания, срок выхода |
| Техническое интервью | 60–90 мин | Теория JS/TS/React, асинхронность, задачи на код (debounce, memo, массивы), вопросы по AI/LLM-интеграции |
| Интервью с командой / тимлидом | 45–60 мин | Архитектурные решения для чат-UI, опыт с MVP и быстрыми итерациями, сложные задачи из прошлого опыта |
| Финал / оффер | 1–2 недели | Согласование условий, проверка службой безопасности (типично для Сбера) |
Стек и темы
Обязательный минимум
- TypeScript 6+ лет
- React или Vue.js
- Event Loop, Promise, async/await
- Алгоритмы и структуры данных
- Virtual DOM, React Hooks
- CORS, HTTP, безопасность на клиенте
- Понимание LLM и agent tools/skills
- Live coding на JavaScript/TypeScript
Плюсом будет
- Streaming UI (SSE/WebSocket)
- Оптимизация рендера (useMemo, useCallback, memo)
- Unit/интеграционные тесты (Jest, RTL)
- Redux или аналоги state management
- Опыт с AI-API и чат-интерфейсами
- Accessibility в сложных UI
JavaScript и асинхронность
Что такое Event Loop?
Call Stack → Microtasks (Promise) → Macrotasks (setTimeout). Один поток, неблокирующий I/O.
Как работает Event Loop?
Синхронный код → microtask queue → render → macrotask queue. Порядок: sync, then microtasks, then macrotasks.
Что такое Promise?
Объект pending/fulfilled/rejected. Цепочка .then/.catch/.finally. Promise.all/race/allSettled/any.
Какие знаешь методы Promise?
all — все успешны; race — первый; allSettled — все завершены; any — первый успех.
Что такое замыкание?
Функция + лексическое окружение. Используется для инкапсуляции, каррирования, debounce.
В чём разница между var, let и const?
var — function scope, hoisting; let/const — block scope; const — нельзя переназначить ссылку.
В чём разница между null и undefined?
undefined — не инициализировано; null — явное отсутствие значения. typeof null === 'object' (баг JS).
В чём разница между стрелочной и обычной функцией?
Стрелочная: лексический this, нет arguments, нельзя new. Обычная: свой this, hoisting.
Какие знаешь методы массива?
map/filter/reduce/find/some/every/flat/splice/slice — знать сложность и мутабельность.
Что такое чистая функция?
Без side effects, одинаковый результат при одинаковых аргументах. Основа React и тестируемости.
Ловушка: Частая ловушка: порядок console.log с setTimeout(0) и Promise.then — microtasks выполняются раньше macrotasks.
Совет: Для Senior уровня в Сбере ждут не только определения, но и примеры из реальных проектов: race conditions, отмена запросов, AbortController.
TypeScript
Работал ли с TypeScript?
Ожидают 6+ лет. Расскажи про strict mode, utility types, discriminated unions.
Что такое Generics в TypeScript?
Параметризация типов: function identity<T>(x: T): T. Constraints через extends.
В чём разница между type и interface?
interface — merge declaration, extends; type — unions, mapped types, tuples. Для объектов часто взаимозаменяемы.
Какие знаешь типы данных в JS?
7 примитивов + object. typeof, instanceof. Symbol, BigInt.
Фишка: Disrupt требует TS от 6 лет — будь готов показать типизацию API-ответов LLM, generic hooks и type guards для union-типов сообщений чата.
React
Что такое React?
UI-библиотека, компонентная модель, однонаправленный data flow, Virtual DOM.
Что такое Virtual DOM?
In-memory дерево. Diffing → reconciliation → минимальные DOM-операции.
Зачем нужен Virtual DOM?
Batching обновлений, декларативный UI, оптимизация через diffing.
Что такое useEffect?
Side effects после render. Cleanup function. Зависимости [deps]. Не для синхронных вычислений.
В чём разница между useEffect и useLayoutEffect?
useLayoutEffect — синхронно после DOM mutations, до paint. Для измерений DOM.
Что такое useMemo?
Мemoization вычислений. Зависимости. Не злоупотреблять — overhead сравнения deps.
Что такое useCallback?
Мemoization функции. Полезен при передаче в memo()-компоненты или deps других hooks.
В каких случаях используется useCallback?
Стабильная ссылка для memo children, deps useEffect, контекст без лишних ререндеров.
Какие знаешь хуки?
useState, useEffect, useContext, useReducer, useMemo, useCallback, useRef, useId, custom hooks.
Какие плюсы и минусы React?
Плюсы: экосистема, JSX, hooks. Минусы: boilerplate, нужна дисциплина с rerenders, нет встроенного routing/state.
Что такое Redux?
Single store, actions, reducers, immutability. Альтернативы: Zustand, Jotai, React Query для server state.
Писал ли тесты?
Jest + React Testing Library. Unit для utils, integration для компонентов. Mock fetch/SSE.
Ловушка: useCallback с пустым [] но использующий state — stale closure. Всегда включай зависимости или functional updates.
Совет: Для AI-чатов: виртуализация списка сообщений (react-window), optimistic UI, разделение server/client state.
Сети и безопасность
Что такое CORS?
Cross-Origin Resource Sharing. Preflight OPTIONS. Access-Control-Allow-Origin. Same-origin policy.
Какие знаешь способы хранения данных в браузере?
localStorage, sessionStorage, cookies, IndexedDB. HttpOnly cookies для токенов.
Фишка: При работе с AI-API в Сбере важно понимать проксирование запросов, токены авторизации и не хранить секреты на клиенте.
Ловушка: XSS через LLM-ответы: санитизация markdown/HTML, CSP, DOMPurify для user-generated и model-generated контента.
AI/LLM на фронтенде
Что такое LLM и как они работают?
Large Language Model — предсказание следующего токена. Context window, temperature, system prompt. Не «база знаний».
Что такое AI-скиллы (инструменты агентов)?
Function calling / tool use: модель выбирает инструмент → фронт/бэк выполняет → результат в контекст. Orchestration loop.
Как организовать стриминг ответов LLM в UI?
SSE или WebSocket. ReadableStream + fetch. Chunk-by-chunk render. AbortController для отмены. Typing indicator.
Как проектировать UX для чат-интерфейса с агентом?
История сообщений, tool call visualization, retry/regenerate, feedback, latency handling, error states.
Фишка: Disrupt строит новые воплощения Giga — покажи понимание MVP-подхода: быстрый прототип чата, итерации по метрикам, масштабирование успешных гипотез.
Совет: Подготовь рассказ: как бы ты с нуля сделал чат с LLM за 2 недели — стек, API-слой, стриминг, базовый UX.
Задачи
Debounce
Написать функцию debounce(fn, delay), которая откладывает вызов fn на delay мс и сбрасывает таймер при повторном вызове.
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}Сложность: O(1) на вызов, O(n) суммарно для n вызовов
Функция мемоизации
Написать memo(fn), которая кеширует результат для одинаковых аргументов.
function memo(fn) {
const cache = new Map();
return function (...args) {
const key = JSON.stringify(args);
if (cache.has(key)) return cache.get(key);
const result = fn(...args);
cache.set(key, result);
return result;
};
}Сложность: O(1) lookup при хеш-ключе, O(k) для сериализации args
Бесполезный useCallback
Исправить код: Button с memo не перерендеривается оптимально из-за ошибок в useCallback и props.
1) onClick → OnClick (имя prop). 2) useCallback deps: [isVisible]. 3) onclick → onClick в JSX. 4) setIsVisible(prev => !prev) для стабильности.
Сложность: O(1)
Чтение кода (destructuring)
Определить значения foo и bar в 6 фрагментах с деструктуризацией и переименованием.
1) {foo:1, bar:2}. 2) {foo:2, bar:1} — swap. 3) {foo:[2], bar:1}. 4) {foo:{baz:3}, bar:1}. 5) {foo:3, bar:1}. 6) {foo:1, bar:3} — default value.Сложность: O(1)
Объединение двух отсorted массивов
Написать функцию mergeSorted(a, b), объединяющую два отсортированных массива в один отсorted.
function mergeSorted(a, b) {
const result = [];
let i = 0, j = 0;
while (i < a.length && j < b.length) {
result.push(a[i] <= b[j] ? a[i++] : b[j++]);
}
return result.concat(a.slice(i), b.slice(j));
}Сложность: O(n + m)
System Design
- Спроектируй чат-интерфейс для LLM с streaming-ответами и историей диалогов
- Как бы ты построил UI для agent с tool calling (skills): отображение вызовов, статусов, результатов?
- Архитектура фронтенда MVP AI-продукта: от прототипа до масштабирования (фабрика гипотез)
- Как обрабатывать ошибки, таймауты и отмену генерации в LLM-чате?
- Разделение server state и UI state в React-приложении с AI-фичами
Каркас ответа
- Уточни требования: DAU, latency SLA, offline, mobile
- High-level: UI → state layer → API gateway → LLM backend
- Ключевые компоненты: MessageList (virtualized), StreamHandler, ToolCallRenderer, ErrorBoundary
- Протокол: SSE/WebSocket, idempotency, retry strategy
- State: React Query/SWR для server state, Zustand/Context для UI
- Безопасность: sanitization, auth tokens, rate limiting на клиенте
- MVP scope vs масштабирование: что отложить, метрики успеха гипотезы
Поведенческое
- Расскажи о себе
- Расскажи о своём опыте
- Расскажи про свой опыт в Frontend
- Расскажи про самые сложные задачи, которые решал
- Почему решил сменить место работы
- Почему выбрал Frontend
- На какой грейд себя оцениваешь
- Какую ищешь для себя работу
- На что будешь обращать внимание при выборе компании
- В каком направлении хочешь развиваться
- Когда готов приступить к работе
- Какие зарплатные ожидания
- Есть ли вопросы / Какие есть вопросы к компании
План подготовки
3 дня
- Повторить Event Loop, Promise, closures — нарисовать схему и проговорить вслух
- Разобрать useMemo/useCallback/memo — когда реально нужны, когда вредны
- Решить 3 задачи: debounce, memo, merge sorted arrays
- Подготовить 2-минутный питч + 2 кейса со сложными задачами (STAR)
- Изучить basics LLM: tokens, context window, streaming, function calling
7 дней
- Всё из days_3
- Пройти 15+ вопросов из блоков JS/React/TS
- Сделать мини-прототип чата со streaming (SSE mock)
- Подготовить 5 вопросов к команде Disrupt про гипотезы, стек, метрики
- Повторить CORS, XSS, хранение токенов
- Практика system design: нарисовать архитектуру LLM-чата на доске
14 дней
- Всё из days_7
- Углубить TypeScript: generics, utility types, type guards
- Повторить алгоритмы: массивы, строки, hash map — 10 задач
- Изучить agent patterns: ReAct, tool orchestration, error recovery
- Mock interview с другом: 45 мин теория + 30 мин live coding
- Подготовить ответы на мотивацию: почему Сбер, почему GenAI, почему офис
| Блок | Готов, если... |
|---|---|
| JavaScript и асинхронность | можешь объяснить порядок выполнения sync/micro/macro tasks и решить debounce с нуля |
| TypeScript | можешь типизировать API-ответ LLM и объяснить generics на примере |
| React | можешь объяснить Virtual DOM, hooks lifecycle и когда useCallback реально помогает |
| Сети и безопасность | можешь объяснить CORS preflight и риски XSS в LLM-чате |
| AI/LLM | можешь описать streaming UI и agent tool calling flow |
| Live coding | решаешь merge sorted arrays и memo за 15 мин без подсказок |
| Поведенческие | есть 2 STAR-кейса с метриками и готовность к офису в Москве |
В день собеседования
- Повторить шпаргалки по Event Loop и React hooks (15 мин)
- Подготовить IDE/редактор для live coding
- 3 вопроса к интервьюерам: текущие гипотезы команды, стек MVP, критерии успеха продукта
- Проверить связь, тихое место, заряд
- Настроиться на формат фабрики гипотез: гибкость важнее идеального ответа