Какие вопросы задают на собеседовании в ОКО (frontend, middle)?

Question

Маяк · Accepted Answer

1. Решить несколько несложных задач на JavaScript (лайвкодинг)
2. Сталкивался ли с секцией системного дизайна раньше? Приходилось ли делать что-то похожее?
3. Спроектировать mobile-first веб-приложение «Агрегатор новостей»: две страницы — лента новостей и страница новости, лайки/дизлайки (суммируются в рейтинг), источники новостей настраиваются через админку. Собрать функциональные и нефункциональные требования (SEO, скорость загрузки, гео-распределённость по СНГ, масштабирование) и нарисовать верхнеуровневую архитектуру (клиент, BFF на Next.js с SSR, бэкенд на Node.js, БД, S3-хранилище, CDN).
4. Спроектировать схему базы данных: пройтись по сущностям (user, post), описать их поля, связи через id, обязательность полей, формат хранения контента (markdown строкой), выбор документоориентированной БД (MongoDB).
5. Спроектировать API (ручки) приложения: получение списка постов с пагинацией, получение пользователя, оценка поста (лайк/дизлайк), отзыв оценки.
6. Как сделать так, чтобы пользователь видел, что лайк уже прожат, и не мог накрутить лайки (тумблер: лайк / дизлайк / ничего), с учётом того, что у пользователя может быть миллион лайкнутых постов и грузить их все на клиент неоптимально?
7. Как будет осуществляться переход со страницы ленты на страницу новости (роутинг, урлы, передача данных без дополнительного запроса)?
8. При загрузке ленты грузится лишний контент новостей, который может быть внушительным — как это оптимизировать?
9. Помимо инъекций через поля ввода, что ещё может пойти не так с точки зрения безопасности (например, если конкуренты встроят наше приложение на другой странице/урле)?
10. Что позволяет избежать настройка CORS? Как правильно настраивать CORS-политики (вайтлист хостов вместо звёздочки)?
11. Помимо CORS, какие ещё есть способы вставки содержимого/контента на другие страницы (iframe, выполнение скриптов) и как от этого обезопаситься?
12. Представь, что этот проект приходит к тебе как задача: чего ещё не хватает в техническом задании, чтобы приступить к разработке?
13. Как по метрикам понимать, что приложение быстро и плавно работает у пользователей на мобильных устройствах (не лагает, скролл без слайд-шоу)?
14. Какие метрики можно измерить в браузере пользователя (не синтетические тесты), чтобы понять, что приложение действительно отзывчиво работает?
15. Какие кастомные метрики (поверх стандартных браузерных) мы могли бы сами померить в этом приложении?
16. Время открытия новости — между какими событиями его измерять?
17. Как померить плавность скролла бесконечной ленты? Что можно назвать плавным скроллом?
18. На какое значение FPS ориентироваться, чтобы считать, что скролл работает плавно?
19. У нас есть гипотеза по улучшению (например, уменьшить время загрузки страницы новости) — как понять, что внесённые изменения действительно положительно повлияли на пользователя?
20. Чем чревато большое количество фичфлагов в коде?
21. Если запускать приложение для пользователей с ограниченными возможностями (accessibility) — что можно сделать, на что обратить внимание?
22. Расскажи, как будешь делать ленивую дозагрузку новостей (lazy loading) в бесконечной ленте.
23. Какой якорь использовать как триггер дозагрузки следующей порции новостей?
24. Расскажи про CI/CD: как устроить пайплайны (линт, тайпчек, тесты, билд), процесс разработки (фичеветки, merge request, код-ревью, trunk-based development) и релизный процесс (релизные ветки, деплой на превью-стенд и продакшн).
25. Как разработчики могут помочь тестированию (тестировщикам)?
26. E2E-тесты — это автоматические тесты, где открывается браузер и нажимаются кнопки, или синтетические?