Загрузка…
Загрузка…
frontend / middle / system_design
Формат
online
Стадия
system_design
Когда
within_quarter
Длительность
60 мин
01
System design
Спроектируйте мессенджер (облегчённый телеграм): просмотр списка контактов, отправка и получение сообщений, push-уведомления о новых сообщениях, превью последнего сообщения, работа в оффлайн-режиме, обмен картинками, отложенная отправка сообщений при отсутствии интернета.
Основная сквозная задача секции архитектуры. Интервьюер выступает в роли заказчика.
02
System design
Нарисуйте верхнеуровневый дизайн системы: из каких блоков состоит мессенджер и как доставляется до пользователя (клиент, сервер, статика, API, хранение).
03
Теория
Для чего вообще предназначен Nginx и зачем вы его возьмёте в этой системе?
Кандидат: для размещения статики.
04
Теория
Как организовать взаимодействие с бэкендом: какой подход выбрать — REST, gRPC или GraphQL и почему?
Заметки
Видео — разбор 4-го этапа (системный дизайн / архитектура) в Т-Банк. Всего в Т-Банк 5 этапов: 1) созвон с HR + 10+ технических вопросов по фронтенду; 2) алгоритмические задачи, event loop, React-задача; 3) программирование (livecoding-задачки); 4) системный дизайн (эта секция); 5) знакомство с командой/командами. Секция систем-дизайна проводилась около часа, интервьюер Владимир в роли заказчика, задача — спроектировать мессенджер. Темы CI/CD, кубернетес, анимации и оптимизация CSS интервьюер обозначил как вне рамок данного собеседования. По итогам кандидат прошёл секцию и был приглашён на 5-й этап.
Подготовка
Знать назначение Nginx и настройку статики/CDN; разбираться в типах БД (реляционные vs нереляционные) и выборе БД под мессенджер; уметь объяснить realtime через вебсокеты; понимать балансировку нагрузки и работу CDN для географически распределённых пользователей; знать FSD-методологию на практике, виртуализацию списков, оффлайн-хранение (localStorage vs IndexedDB, service worker, PWA); разбираться в безопасности фронтенда (XSS/экранирование, CSRF и CSRF-токены, HttpOnly/Secure куки, HTTPS).
Стиль интервьюера
Интервьюер Владимир выступает в роли заказчика, даёт функциональные требования и предлагает кандидату уточнять их. Ведёт по структуре: верхнеуровневый дизайн → стек → фронтовая архитектура → безопасность/производительность. Доброжелательный, подсказывает и направляет, не углубляется слишком глубоко (за час всё уместить сложно). Фидбэк сразу не даёт — его передаёт рекрутер.
Кандидат выбрал GraphQL, аргументировал типизацией и запросом только нужных данных.
05
Теория
Какая база данных лучше подойдёт для мессенджера?
06
Теория
Какие бывают типы баз данных и чем отличаются реляционные и нереляционные БД?
Кандидат не смог ответить.
07
Теория
Мессенджер работает в реальном времени — каким образом получать новые сообщения?
Кандидат: вебсокеты, socket.io на Node.js; нарисовать стрелочками подписку клиента на сокет.
08
System design
Приложение планируется очень популярным с высокой нагрузкой — каким образом справляться с этой нагрузкой?
09
System design
Как работает CDN, если основной сервер в Москве, а клиенты находятся далеко (Владивосток / Россия — Америка)?
10
System design
Если все запросы идут через CDN, как клиент получит index/динамику — CDN ведь не может постоянно отдавать один индекс?
Подводка к тому, что за индексом нужно ходить на сервер, а в нём ссылки на CDN.
11
System design
Расскажите про фронтовую архитектуру: как построите компоненты на фронте и как организуете работу с оффлайном.
12
Теория
Какой фронтенд-стек выберете (React или Vue) и почему?
Кандидат выбрал React 18, TypeScript, Webpack, PWA, GraphQL-клиент.
13
System design
Разбейте макет мессенджера на компоненты по выбранной методологии (FSD): pages, entities, features, shared.
Кандидат предложил FSD, но признал, что на практике работал с компонентным подходом.
14
Теория
В чате может быть очень много сообщений — каким образом оптимизировать фронтенд при рендеринге большого списка?
Кандидат: виртуализация списка.
15
Теория
Что такое виртуализация списка?
Follow-up на ответ про виртуализацию.
16
Теория
Нужно хранить информацию о последнем сообщении и работать в оффлайн-режиме — каким образом это реализовать локально?
Кандидат: localStorage, сервис-воркер.
17
Теория
Какие есть минусы у localStorage?
Кандидат: ограничение ~5 МБ.
18
Теория
Что такое IndexedDB и подойдёт ли он для локального хранения?
19
Теория
Какие могут быть векторы атаки на мессенджер (безопасность)?
20
Теория
Каким образом в мессенджере можно перехватить (схватить) токен пользователя?
Кандидат: JSX экранирует, куки с HttpOnly, Secure.
21
Теория
Как называется механизм, который делает вставку скрипта/контента безопасной (экранирование)?
Кандидат: экранирование / санитайзинг.
22
Теория
Как называется атака, связанная с формами, и как от неё защититься?
CSRF; кандидат описал защиту через CSRF-токен и сравнение токенов на бэкенде.