frontend.md

Вопросы для фронтендеров (JS, React, TS, Redux)

Софт скиллы (навыки взаимодействия, коммуникации и подхода к работе)

• Расскажи о себе, про свой опыт.
• Расскажи о своем пути в разработку, почему именно фронтенд?
• Можешь рассказать про какую-то сложную задачу, которую ты решил. Которой ты сейчас гордишься?
• Где работали, какие задачи выполняли?
• Как проходило код-ревью в вашей команде?
• Как ты относишься к написанию кода: делаешь так, чтоб просто работало, или пишешь обдуманно?

Junior

Общие вопросы

• Приходилось ли писать тесты? Знаешь, что такое TDD, BDD?
• Как следишь за чистотой кода? Какие инструменты используешь?
• Какой сборщик возьмешь - webpack или vite?
• MobX или Redux?
• Для чего нужен TypeScript?
• Что такое CI/CD?
• Какой опыт работы с Docker?
• Отличие git revert от git reset?

JavaScript

• Отличие var let и const
• В чем разница двойного равно и тройного (== и ===)?
• Что такое замыкание и hoisting (всплытие)? Привести пример замыкания. Есть ли разница при использовании var и let
• Расскажи про область видимости
• Что такое анонимные фунции?
• Immediatly invoke function (самовызывающаяся функция). Это что?
• В чем разница function daclaration и function expression?
• Что такое map, reduce и filter. Расскажи про каждый и в чем разница
• Расскажи про различия "старого" JavaScript и "нового"
• В чем отличие стрелочных функций от обычных?
• Что такое чистая функция?
• Расскажи про прототипы, что это такое.
• Что делают call, bind, apply?
• Чем отличается forEach от map?
• Что такое event.target и event.currentTarget?
• Какими способами можно обработать ошибку в Promise?
• Что такое Set, Map, WeakSet, WeakMap?
• Как добавить интернационализацию в приложение?
• Как сделать глубокую копию объекта?
• Как в JavaScript передается параметр в функцию - по ссылке или по значению?
• Что такое Event Loop? Для чего он нужен? Какую проблему решает? (Очень популярный вопрос)
• Отличие null от undefined
• Как проверить переменную на NaN?
• Стек и очередь: отличия и применение
• Какие есть типы данных в JavaScript?
• Для чего нужны keyof и typeof?

CSS

• Расскажи про специфичность селекторов
• Что такое !important? Каково твое отношение к ним?
• Расскажи, как ты предпочитаешь работать со стилями CSS. Используешь ли какие-то препроцессоры?
• Размер 50vh - это сколько?
• Что такое семантика? Зачем она нужна
• Что такое BEM методология?
• Что такое position absolute, relative и fixed?
• Разница между Flex и grid?
• Что такое псевдоклассы? Рассказать подробно
• Селекторы '>, +, ~' - рассказать что зачем и почему

React

• Какие вообще бывают современные фреймворки?
• Какие особенности у React? Что такое JSX? Что делает метод render() в React?
• Что такое Virtual DOM, Дерево элементов? Какие есть фазы рендеринга? Reconciliation (согласование) в react это что?
• Почему на jQuery не хотят писать, а на React хотят?
• Если пишешь на хуках, какой единственный классовый компонент всё же нужен?(Error boundary)
• Какие есть компоненты жизненного цикла? Как с помощью хуков заменить их?
• Что такое хуки? Какие бывают хуки?
• В чем проблема prop-drilling и как ее решить?
• Зачем нужен useRef?
• Где в React компоненте правильно писать запросы к серверу?
• Отличия useMemo() от useCallback()?

Redux

• Что такое Redux? Зачем он нужен?
• Какие еще есть библиотеки, решающие эту же проблему?
• Что такое store?
• Что такое action creator?
• Где лучше всего делать запросы к серверу в Redux?
• В чем преимущества и недостатки MobX перед Redux?
• Можно ли использовать Redux без React?

Middle

Верстка

• Рассказать про Eslint, huski. В чем разница prettier и eslint
• Как рендерится html в браузере. Этапы
• Как мы можем принудительно вынести html элемент на слой? С помощью CSS свойства (@layer)
• В чем будет разница работы render flow, если мы будем менять позицию элемента через координаты top/left и через transform/translate
• Отличие тега image от тега picture (технически и семантически)
• С какими препроцессорами CSS работал, с какими методологиями работал?
• Расскажи, как ты предпочитаешь работать со стилями CSS. Используешь ли какие-то препроцессоры?
• Что такое миксины?
• Что такое placeholder селекторы?
• Различие директивы @import и @use в SCSS
• Приходилось работать с готовыми Ui-kit?
• Почему плохо использовать transition: all?
• Какие существуют способы изоляции стилей?

TypeScript

• Какие утилитарные типы ты можешь назвать?
• Что такое дженерик?
• Отличие интерфейсов от типов
• Что такое абстрактные классы? Может ли абстрактный класс нести реализацию конкретного метода? Можем ли мы методу абстрактного класса прокинуть дженерик?
• В чем разница между типом any и unknown? Будет ли разница при сборке

JavaScript

• Что такое наследование? Что дает нам прототипное наследование? Через какое свойство мы наследуем? В чем разница proto и prototype?
• Всё ли в JS объект?
• В чем разница итерация по ключам объектов через for.. in.. и через Object.keys(...)
• Что такое async await?
• Как принудительно отправить функцию в очередь микрозадач?
• Чем множество отличается от массива в Javascript?
• Что такое протокол?
• Сталкивался ли с CORS? Что это такое, почему из Postman можно выполнить запрос, а из браузера нет? Как обойти?
• Можешь рассказать, что такое промисы в Javascript? Где они используются?
• Есть браузер, в адресную строку вводим адрес и нажимаем Enter. Что в это время происходит?
• Для чего используются async и defer при загрузке скриптов?
• Если у нас есть какой-то большой файл стилей, например 50kb. Заблокирует ли он нам рендеринг?
• Что такое debounce()? Зачем нужен. Написать реализацию
• Что такое web socket
• Доводилось ли писать собственную авторизацию? Расскажи про авторизацию через токены
• Зачем нужны классы в JS? Какие плюсы/минусы/подводные камни?

React

• Какие хуки имплементируют методы жизненного цикла? Как именно? Что делает хук useLayoutEffect()?
• В чем разница useImperativeHandle() и useRef()?
• Что такое forwardRef?
• Какие есть способы принудительного рендера компонента?
• Для чего нужны ключи в реакте
• Что такое reconciliation в react?
• Что такое react fiber?
• В чем будет разница, если в реакт компоненте обращаться к компоненту и менять его через document.querySelector() и через ref?
• Что такое SSR, зачем он нужен? Как организовать SSR в React?
• Что такое hadless компонент?
• Использовали ли ErrorBoundary? Как бы вы реализовали свой ErrorBoundary?

Общие вопросы

• Расшифровать и объясненить принципы SOLID
• В чем отличие методов test и match?
• Что такое HTTPS и в чем отличие от HTTP?
• Каким образом webpack понимает, что ему какую-то часть кода нужно вынести в отдельную чанку?
• Что такое XML и XSD?
• Для чего используются куки и в чем различия между localStorage и sessionStorage?
• Что такое мемоизация?
• Разница между WebSocket и SSE?
• Плюсы и минусы Next.js?
• Расскажи про фронтовые архитектуры
• Что такое Web Vitals? Чем отличается от Sentry?
• Есть ли тело запроса у get
• Какие паттерны программирования знаете?
• Как бы вы реализовали взаимодействие бэкенда с фронтендом?
• Что такое Big O notation? Как рассчитывается сложность алгоритма?
• На Webpack или Vite настраивали ли SSR или SSG без next.js?
• Сталкивались ли вы с ситуацией, где вам пришлось решать проблему серьезной утечки памяти?
• Расскажите про ООП и как использовали