Собес в Т-Банк · Frontend-разработчик
Материал Эйч · Опубликовано 6 августа 2026
Обзор
Middle Angular-разработчик в одном из крупнейших Angular-комьюнити в России: десятки SPA-приложений, масштаб финтех-продуктов и сильная внутренняя платформа для разработчиков.
Фишка: Более 300 Angular-разработчиков в одном комьюнити — сильная внутренняя экспертиза, опенсорс-контрибьюции и платформенные инструменты для фронтенда. Ревью по матрице компетенций и возможность ротации между продуктами.
| Этап | Длительность | Что проверяют |
|---|---|---|
| HR / первичный отбор | 30–45 мин | Мотивация, опыт с Angular и коммерческим JS, формат работы (офис/гибрид в Алматы), зарплатные ожидания, готовность к релокации или работе в хабе |
| Техническое собеседование | 60–90 мин | Теория JavaScript/TypeScript, Angular (компоненты, DI, роутинг, RxJS), вопросы по прошлым проектам, 1–2 live coding задачи на JS |
| Финальное / с тимлидом | 45–60 мин | Глубина в Angular-стеке, архитектурные решения в SPA, культура команды, fit в продуктовую линию (Т-Бизнес, CRM, мессенджер и др.) |
Стек и темы
Обязательный минимум
- JavaScript ES6+ (замыкания, this, прототипы, async/await, Promise)
- TypeScript (типы, generics, utility types)
- Angular: компоненты, модули/standalone, DI, жизненный цикл
- RxJS: Observable, операторы map/filter/switchMap, подписки и отписки
- HTML/CSS, адаптивная вёрстка
- REST API, работа с HTTP-клиентом Angular
- Git, code review, командная разработка
Плюсом будет
- NgRx или другой state management
- Unit-тесты (Jest/Jasmine + TestBed)
- Webpack/Vite, CI/CD
- WebSocket / real-time
- Опыт с дизайн-системами и UI-kit
- Performance optimization (lazy loading, OnPush, trackBy)
- Опенсорс-контрибьюции
JavaScript Core
Какие знаешь типы данных в JavaScript?
7 примитивов (string, number, bigint, boolean, undefined, null, symbol) + object. typeof null === 'object' — исторический баг.
Как работает Event Loop?
Call stack → microtasks (Promise) → macrotasks (setTimeout). async/await = Promise под капотом.
В чём разница между null и undefined?
undefined — не присвоено; null — явное «пусто». typeof undefined vs typeof null.
В чём разница между стрелочной функцией и обычной?
Стрелка не имеет своего this/arguments, не может быть constructor. this лексический.
Что такое чистая функция?
Одинаковый вход → одинаковый выход, без side effects, не мутирует внешние данные.
Какие знаешь методы Promise?
then/catch/finally, Promise.all, Promise.race, Promise.allSettled, Promise.resolve/reject.
Какие знаешь методы массива?
map/filter/reduce, find/findIndex, some/every, flat/flatMap, sort (мутирует!), slice vs splice.
Что такое замыкание (closure)?
Функция + лексическое окружение. Используется для приватных данных, мемоизации, debounce.
Ловушка: На live coding часто дают задачи на замыкания, каррирование и чтение кода с деструктуризацией — проверь, что понимаешь порядок выполнения.
Совет: Объясняй не только «что», но и «почему» — в Т-Банке ценят глубину понимания, а не заученные ответы.
TypeScript
Работал ли с TypeScript?
Angular по умолчанию на TS. Укажи: strict mode, типизация API, generics в сервисах.
Что такое Generics в TypeScript?
Параметризация типов: Array<T>, Promise<T>, собственные generic-функции и интерфейсы.
В чём разница между type и interface?
interface — расширяем (extends, declaration merging). type — union, mapped types, более гибкий.
Что такое utility types (Partial, Pick, Omit)?
Partial<T> — все поля optional. Pick/Omit — выбор/исключение полей. Record<K,V> — словарь.
Фишка: В Angular-проектах Т-Банка TypeScript — не опция, а стандарт. Будь готов типизировать сервисы, компоненты и RxJS-потоки.
Angular
Как работает жизненный цикл компонента Angular?
ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit → ngAfterContentChecked → ngAfterViewInit → ngAfterViewChecked → ngOnDestroy.
Что такое Dependency Injection в Angular?
Иерархические инжекторы, providedIn: 'root', @Injectable, inject() function. DI tree от корня до компонента.
Разница между компонентом, директивой и pipe?
Component — шаблон + логика. Directive — поведение DOM (structural: *ngIf, *ngFor; attribute). Pipe — трансформация данных.
Как работает Change Detection?
Default — проверка всего дерева. OnPush — только при изменении @Input, events, observable (async pipe). zone.js отслеживает async.
Что такое standalone components?
Компоненты без NgModule: imports прямо в компоненте. Angular 15+ — основной подход в новых проектах.
Как организовать роутинг и lazy loading?
RouterModule/loadChildren или loadComponent. Guards (canActivate, canDeactivate), resolvers для prefetch данных.
Как передавать данные между компонентами?
@Input/@Output, services с BehaviorSubject, Router state, ViewChild/ContentChild.
Фишка: Вакансия явно требует опыт с Angular — это главный фокус технического этапа. React-знания полезны для сравнения, но не заменяют Angular.
Ловушка: Не путай Angular Signals (новый реактивный API) с RxJS — знай, когда что использовать.
RxJS
Что такое Observable и чем отличается от Promise?
Observable — lazy, мультивалентный поток. Promise — один результат. Observable нужен unsubscribe.
Разница между switchMap, mergeMap, concatMap?
switchMap — отменяет предыдущий. mergeMap — параллельно. concatMap — по порядку, ждёт завершения.
Как избежать memory leaks с подписками?
takeUntil(destroy$), async pipe в шаблоне, Subscription.add(), ngOnDestroy + unsubscribe.
Что делает оператор shareReplay?
Мультикаст + кэш последних N значений. Полезен для HTTP-запросов, чтобы не дублировать вызовы.
Совет: В SPA Т-Банка RxJS — повседневный инструмент: формы, HTTP, WebSocket, state. Практикуй объяснение потоков на примерах поиска с debounce.
Браузер, HTML/CSS и сеть
Что такое CORS?
Cross-Origin Resource Sharing. Браузер блокирует cross-origin без Access-Control-Allow-Origin. Preflight для non-simple requests.
Какие знаешь способы хранения данных в браузере?
localStorage, sessionStorage, cookies, IndexedDB, Cache API. Различия в размере, TTL, доступности.
Что такое Virtual DOM и зачем он нужен?
Виртуальное представление DOM для diffing. Angular использует реальный DOM + Change Detection, не Virtual DOM как React.
Как оптимизировать производительность SPA?
Lazy loading, OnPush, trackBy в *ngFor, tree shaking, code splitting, CDN, мемоизация тяжёлых вычислений.
Писал ли тесты?
Jasmine/Karma или Jest + TestBed. Unit для сервисов/пайпов, component testing, e2e (Cypress/Playwright).
Ловушка: Если спросят про Virtual DOM — не говори, что Angular использует Virtual DOM. Angular — свой механизм Change Detection.
Задачи
Debounce
Написать функцию debounce, которая принимает функцию и задержку (мс). Возвращает новую функцию, откладывающую выполнение; при повторном вызове в течение задержки таймер сбрасывается.
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}Сложность: O(1) на вызов
Функция мемоизации
Написать функцию memo(), которая принимает функцию и возвращает мемоизированную версию: при одинаковом аргументе возвращает кэшированный результат.
function memo(fn) {
const cache = new Map();
return function(arg) {
if (cache.has(arg)) return cache.get(arg);
const result = fn(arg);
cache.set(arg, result);
return result;
};
}Сложность: O(1) при кэш-хите
Чтение кода: деструктуризация
Чему равняются foo и bar в каждом блоке? const { foo, bar } = { foo: 1, bar: 2 } → foo=1, bar=2 const { foo: bar, bar: foo } = { foo: 1, bar: 2 } → foo=2, bar=1 const { foo: [bar], bar: foo } = { foo: [1], bar: [2] } → foo=[2], bar=1
Деструктуризация с переименованием: foo: bar означает «взять foo и положить в переменную bar». Вложенная деструктуризация массивов работает аналогично.
Сложность: —
FizzBuzz
Написать функцию, выводящая числа 1–100: кратные 3 → «Fizz», кратные 5 → «Buzz», кратные 3 и 5 → «FizzBuzz».
for (let i = 1; i <= 100; i++) {
let out = '';
if (i % 3 === 0) out += 'Fizz';
if (i % 5 === 0) out += 'Buzz';
console.log(out || i);
}Сложность: O(n)
System Design
- Как спроектировать SPA для CRM с десятками экранов и общим состоянием пользователя?
- Как организовать авторизацию и refresh token во фронтенд-приложении банка?
- Как ускорить загрузку большого Angular-приложения с множеством модулей?
- Как реализовать real-time уведомления в веб-приложении (мессенджер, CRM)?
Каркас ответа
- Уточнить контекст: масштаб, пользователи, ограничения (безопасность, SLA)
- Описать high-level архитектуру: компоненты, сервисы, state management
- Обсудить data flow: REST/WebSocket, кэширование, offline
- Производительность: lazy loading, CDN, bundle splitting
- Безопасность: XSS, CSRF, CSP, хранение токенов
- Trade-offs и что бы улучшил на следующей итерации
Поведенческое
- Расскажи про проекты, на которых работал
- Расскажи про опыт работы с Angular
- Расскажи про самые сложные задачи, которые решал
- Почему ищешь работу / почему Т-Банк?
- Какой был состав команды на последнем проекте?
- Писал ли тесты? Какой подход к тестированию?
- В каком направлении хочешь развиваться?
- Какие у тебя есть вопросы к компании?
- На какой грейд себя оцениваешь?
- Какие зарплатные ожидания?
План подготовки
3 дня
- Пройти все вопросы из блоков JavaScript и Angular — ответить вслух за 2 мин
- Решить задачи Debounce и Memo на чистом JS без подсказок
- Перечитать Angular docs: lifecycle, DI, Change Detection, standalone
- Подготовить 2–3 STAR-истории про Angular-проекты
7 дней
- RxJS: switchMap vs mergeMap vs concatMap — нарисовать на примерах поиска и HTTP
- TypeScript: generics, utility types, strict mode
- Практика live coding: FizzBuzz, debounce, чтение кода с деструктуризацией
- Разобрать архитектуру одного SPA: routing, state, API layer
- Подготовить вопросы к компании: продукт, команда, стек, онбординг
14 дней
- Глубокое изучение Angular: signals vs RxJS, NgRx или альтернативы state
- Performance: OnPush, lazy loading, bundle analysis
- Тестирование: TestBed, mock сервисов, component testing
- System design: 2 кейса из блока prompts — набросать на бумаге
- Mock-интервью с таймером: 45 мин теория + 30 мин код
| Блок | Готов, если... |
|---|---|
| JavaScript Core | можешь объяснить Event Loop, замыкания, Promise и решить debounce без подсказок |
| TypeScript | можешь типизировать сервис с generic HTTP-методом и объяснить Partial/Pick |
| Angular | можешь описать lifecycle, DI, Change Detection (Default vs OnPush) и lazy loading |
| RxJS | можешь объяснить switchMap vs mergeMap и показать отписку в ngOnDestroy |
| Live coding | решаешь debounce, memo и FizzBuzz за 15–20 мин в чистом JS |
| Поведенческие | есть 3 STAR-истории про Angular-проекты с конкретными техническими деталями |
В день собеседования
- Повторить шпаргалки: Event Loop, Change Detection, RxJS операторы
- Решить одну задачу на код (debounce или memo) за 15 мин
- Проверить технику: камера, микрофон, IDE/редактор для live coding
- Подготовить вопросы к интервьюеру (3–5 конкретных)