JavaScript. Мій досвід проведення технічних інтерв'ю.
Для початку
Кандидат повиннeн знати основи JavaScript. Без цього не варто переходити до запитань про фреймворки. Це початкова точка для будь-якого завдання. Будьте уважними та допомагайте. Я впевнений, ви знаєте знамените "Всі брешуть". У нашому випадку "Всі нервуються через співбесіду". Ваше завдання — хоча б спробувати допомогти людині краще висловлюватися.
Якщо є два інтерв’ювери, а один із них ставить запитання, на яке людині важко відповісти, ви можете зіграти в ситуацію "доброго-поганого поліцейського". Один з вас ставить запитання, а інший намагається допомогти і навести на правильну відповідь. Це може допомогти кандидату більше розкритися.
Проводячи інтев'ю ви також отримуєте вигоду. Ви постійно оновлюєте свої знання та дізнаєтеся щось нове з кожним інтерв’ю. Це справді так.
Кандидат про себе
Спочатку потрібно зрозуміти, з яким досвідом і знаннями прийшов до нас кандидат. Це потрібно щоб знати, які питання ставити далі і чого очікувати. Крім того, це чудова початкова точка, яка допомагає людині менше нервувати.
Прості – уточнюючі запитання
Ви можете почати з простих запитань. Не потрібно турбуватися що пропустите якусь тему. Можна використовувати такий підхід: ставите стандартне запитання і якщо кандидат не може відповісти на нього, спробуйте перефразувати. Все одно ні? Добре, тоді спробуйте наступне просте запитання. Якщо кандидат чогось не знає – це нормально.
Якщо кандидат відповідає на просте запитання, запитайте щось складніше, що розширює початкове питання. Такий підхід має викликати дискусію. Дискусія — це те що потрібно для розуміння досвіду кандидата.
Наприклад,
Обов'язкові складні запитання
Бути розробником означає багато працювати над різноманітними проблемами та вчитися на своїх помилках. Саме так ми здобуваємо досвід. Досвідчений розробник повинен мати глибокі знання. В цій частині можна обговорити кілька тем, таких як асинхронний код та event loop, об'єктно-орієнтоване програмування, функціональне програмування, наслідування через прототипи, компіляція чи інтерпретація коду та інше. Також треба використовувати практичні приклади для закріплення теоретичних відповідей.
Асинхронний код — це дуже важлива тема. Можна почати з випливаючих запитань: "Отже, JS — це single-threaded мова, правда? Але при цьому користувач може завантажити дані чи запустити таймер на сторінці. Як це можливо?". Тут можна перейти до обговорення Event Loop. Саме на цьому етапі кандидат має детально пояснити як це працює. Краще всього зробити це з практичними прикладами.
Якщо кандидат розібрався з Event Loop, то переходимо до мікро і макро завдань. Це важливо знати в контексті асинхронних операцій. Пам'ятай, що пояснити це може бути складно, тому варто надавати допомогу. Додатково, можна запитати про Promise та callback та їх роль в асинхронних операціях.
Щоб закрити цей розділ нам потрібно запитати щось практичне. Напевно найбільш влучне і популярне запитання це порядок викорання console.log в такому коді
Об'єктно-орієнтоване програмування
Це досить очевидно. Можна почати з основних принципів, таких як інкапсуляція, наслідування, поліморфізм і абстракція. Головне тут — це те, що нам потрібно мати практичне розуміння кожного з них. Перевірте чи кандидат може застосувати кожний принцип.
Якщо у вас є багато часу і ви хочете заглибитися в матеріал, тоді бажано запитати SOLID принципи. Логіка та ж сама — потрібно мати практичне розуміння кожного принципа. Також можна попросити кандидата пояснити один із принципів, використовуючи редактор коду чи інші інструменти.
Функціональне програмування
На мою думку це одна з найцікавіших тем. Можна бути креативним і запитувати що завгодно. Це можуть бути питання, більше пов’язані з математикою, як каррінг чи монади. Може бути щось більш класичне, як чисті функції та незмінність (immutability). Це важлива тема, оскільки зараз функціональне програмування дуже часто використовується при роботі з JS фрейморками. І знову ж таки, обов’язково запитуйте практичні приклади.
Наслідування прототипами
Ну, це вже складніша тема. Зараз багато кандидатів не знають про це, через "синтаксичний цукор" який пропонує сучайний ECMAScript. Можна поставити кілька поверхневих питань, щоб перевірити, чи є розуміння. Чи заглиблюватися в тему прототипів вирішувати Вам.
Браузер, DOM, зберігання даних, події
Ось список можливих запитань, щоб перевірити рівень загальних знань про браузери:
Що таке DOM? CSSOM? Render tree?
localStorage чи IndexedDB, яка різниця між ними? Що краще?
CORS? Що це? Вони у браузері? Як обійти CORS помилки?
Які перевеги використання cookies над localStorage?
WebWorkers та ServiceWorkers
Як додати event listener? Що таке target та currentTarget в подіях?
Bubbling та захоплення подій (capturing) — це важлива тема для обговорення. Що роблять методи stopPropagation та preventDefault?
Мережа
Мережа — це недооцінена частина інтерв'ю. Вона є основою для всього WEB. Питання, що стосуються розуміння HTTP2, HTTPS, DNS, DNS Lookup, REST, XHR запитів і веб-сокетів, повинні бути бути задані. Можна поставити більш загальні запитання, такі як: "Як виконується комунікаці між браузером і сервером під час HTTP запиту?" або "Що таке REST і як його правильно використовувати?".
CSS
Це швидше за все необов'язкова тема. Якщо кандидат вже на співбесіді, то він має знання CSS. Але все ж таки можна задати складні питання, які знає лише людина з досвідом.
Що таке адаптивний дизайн?
Які існують способи для вирівнювання div за допомогою CSS?
Що таке властивість pointer-events?
Що таке hex, rgb, rgba?
Що таке px, em, rem?
У чому різниця між властивостями visibility та display?
Цінним буде знання Less, Sass, Styled-components та Emotion. Можна запитати про технології та досвід, який є у кандидата.
Зараз дуже рідко можна побачити чисте CSS-стилізування на проєкті. Зазвичай, використовуються CSS-фреймворки, такі як Material, Foundation, Radix, Tailwind тощо. Питання, що стосуються цих інструментів, будуть дуже корисними. Можна запитати або про щось конкретне, або про думку з якихось повсякденних завдань.
Typescript
Додаткова, але важлива тема.
Що таке Union тип?
Що таке Generics? Як кандидат їх використовував?
Які вбудовані Generics ви знаєте?
Яка різниця між any та unknown?
Чи мав Ви коли-небудь проєкт з суворими правилами щодо null? Яка твоя думка щодо застосування таких налаштувань?
Чи можете створити компонент Select з такими вимогами? Він повинен мати параметри value та onChange. Value може бути типу number | string або (number | string)[]. А дія onChange повинна повертати тип value.
Чи доводилося Вам налаштовувати TypeScript з нуля?
Веселощі. Практичні завдання
Тут ми можемо мати два підходи. Перший — це довга сесія, яка може тривати 1-2 години живого кодування. Інший, дати одне завдання, яке потребує логіки. Наприклад, створити компонент React, який показує прогрес комітів за місяць, як на GitHub. Будь ласка, не соромтесь використовувати цей підхід для пошуку найкращого кандидата. Це може зайняти час. Не кожен кандидат хоче брати участь у такій довгій сесії, але це дозволяє побачити, як кандидат працює над реальним проєктом.
Якщо оберете другий варіант — маленькі завдання це топ. Вони можуть бути будь-якими. Вони не повинні бути надто складними, але й не тривіальними. Щось «розумне». Ось приклади які я використовував:
1. Який результат виконання скрипту. Далі запитай 2 можливі рішення (let + Immediately Invoked Function Expression)
2. Який результат виконання скрипту
3. Який результат виконання скрипту
4. Створити функцію, яка буде порівнювати 2 масиви
5. Створити функцію, яка буде перетворювати [0,1,2,3,4,5] на [[0,1],[2,3],[4,5]] використовуючи тільки функціональне програмування та без мутації даних
6. Створити функцію-каунтер
7. Створити функцію, яка буде перевіряти чи стрічка є ісограм
Фреймворки
Так, необхідно знати мову JavaScript для виконання завдань. І так, знання фреймворків для того, щоб «дійсно» робити речі зручно та швидко, теж важливе. Тому питання про фреймворки є обов'язковими. Ось приклади запитань щодо бібліотеки React:
Яка різниця між useMemo та useCallback?
Що якщо використати useEffect без другого параметру dependency?
Як написати рекурсивний компонент? Наприклад, ми будуємо дерево.
Що таке React state batching?
Які способи передати дані між братами (сиблінгами)?
Чи можна використовувати хук всередині тіла компонента?
Яка різниця між <> та Fragment?
Як передати ref до дитини компонента?
Як можна перерендерити компонент?
Що таке useLayoutEffect? Коли його потрібно використовувати?
Навіщо передавати функцію як аргемент в setState?
Навіщо використовувати Portal?
Чому нам потрібні ключі при рендерингу через map? Чи можуть ключі бути випадковими значеннями?
Що таке Suspense?
Чи створювали Ви колись власні React хуки?
Які найкорисніші бібліотеки Ви використовували разом з React?
Чи використовували Ви коли-небудь Redux? Чи можете пояснити як він працює?
Чи використовували Ви коли-небудь react-query або rtk query? Які переваги? Що Ви можете сказати про кешування в них?
Чи використовували Ви коли-небудь createContext? Які переваги та недоліки?
Як би Ви реалізували авторизацію та приватні роути в React додатку?
Що таке SSR (Server-Side Rendering)? Коли потрібно використовувати цей підхід?
Архітектура та Продуктивність
Архітектура — це дуже суб'єктивна тема. Гарним початком будуть питання щодо досвіду налаштування нових проєктів. Стандартні питання можуть бути такими: "Якби Вам зараз потрібно було почати новий проєкт, що б Ви використовували і який був би потік даних?" "Який інструмент для бандлінгу підходить Вам краще?" "Лінтери, тести, налаштування TS?" Це має бути більше обговорення, а не суворі запитання.
Оптимізація продуктивності та профілювання — це чутливі теми. Розробники рідко займаються оптимізацією під час розробки, але це точно необхідно. Найкращий спосіб — це задавати загальні питання та вести обговорення. Приклади: "Чи займалися Ви коли-небудь профілюванням?", "Що можна побачити в даних профілю з Google Chrome?", "Що можна побачити в даних профілю React?", "Як знайти проблемне місце у коді за допомогою профайлера?"
Чудова тема — це авторизація між фронтендом і бекендом. Що таке JWT? Які популярні бібліотеки для авторизації ви знаєте? У чому різниця між авторизацією та автентифікацією?
Якщо моя розповідь вам допомогла, ви знайшли помилку або можете запропонувати покращення, будь ласка не соромтеся написати мені. Мої контакти ви знайдете на початку сторінки 😉