Вопросы на собеседовании frontend разработчика: самые лучшие вопросы / RUVDS.com corporate blog / Habr – Вопросы для собеседования кандидату на должность Front-end разработчика

Содержание

самые лучшие вопросы / RUVDS.com corporate blog / Habr

Недавно мне довелось побывать на встрече участников проекта FreeCodeCamp в Сан-Франциско. Если кто не знает, Free Code Camp — это сообщество, нацеленное на изучение JavaScript и веб-программирования. Там один человек, который готовился к собеседованиям на позицию фронтенд-разработчика, попросил меня подсказать, какие вопросы по JavaScript стоит проработать. Я немного погуглил, но не смог найти подходящего списка вопросов, на который я бы мог дать ссылку и сказать: «Разбери эти вопросы и работа твоя». Некоторые списки были близки к тому, что мне хотелось найти, некоторые выглядели очень уж простыми, но все они были либо неполными, либо содержали вопросы, которые вряд ли кто станет задавать на реальном собеседовании.


В итоге я решил составить собственный список. В него входят и те вопросы, которые задавали мне, когда я искал работу, и те, которые задавал я, когда искал сотрудников на позиции фронтенд-разработчиков. Обратите внимание на то, что некоторые компании (вроде Google) уделяют особое внимание таким вещам, как проектирование эффективных алгоритмов. Поэтому, если вы хотите в подобной компании работать, в дополнение к приведённым тут вопросам, порешайте задачки с соревнований CodeJam.

Я буду добавлять и редактировать ответы на эти вопросы здесь. Если у вас возникнет желание что-нибудь дополнить или улучшить — буду рад вашим пулл-реквестам.

Вопросы разбиты на несколько разделов:

  • Теория.
  • Программирование.
  • Отладка.
  • Проектирование систем.

Итак, вот мои вопросы.

Теория


Интервьюируемый должен обладать чётким пониманием концепций, которые затрагивают вопросы из этого раздела, должен уметь всё это объяснить. Программирование тут не требуется.
  1. Что такое нотация «О-большое» и как ей пользоваться?
  2. Что такое DOM?
  3. Что такое цикл событий?
  4. Что такое замыкание?
  5. Как работает прототипное наследование и чем оно отличается от классической модели наследования? (По моему мнению, это не особенно полезный вопрос, но многим нравится его задавать.)
  6. Как работает ключевое слово this?
  7. Что такое всплытие событий и как работает этот механизм? (Мне этот вопрос тоже не нравится, но его часто задают на собеседованиях.)
  8. Опишите несколько способов обмена данными между клиентом и сервером. Расскажите, не вдаваясь в подробности, о том, как работают несколько сетевых протоколов (IP, TCP, HTTP/S/2, UDP, RTC, DNS, и так далее).
  9. Что такое REST и почему эта технология популярна?
  10. Мой сайт тормозит. Расскажите о шагах по его диагностированию и исправлению. Опишите популярные подходы к оптимизации, и расскажите о том, когда их следует использовать.
  11. Какими фреймворками вы пользовались? Каковы их сильные и слабые стороны? Почему программисты пользуются фреймворками? Проблемы какого рода решают фреймворки?

Программирование


Ответы на эти вопросы предполагают реализацию функций на JavaScript. За каждым вопросом следуют тесты, которые должно успешно проходить решение.

▍Простые задания


  1. Реализуйте функцию isPrime(), которая возвращает true или false, указывая, является ли переданное ей число простым.
    isPrime(0)                          // false
    isPrime(1)                          // false
    isPrime(17)                         // true
    isPrime(10000000000000)             // false

  2. Реализуйте функцию factorial(), которая возвращает факториал переданного ей числа.
    factorial(0)                        // 1
    factorial(1)                        // 1
    factorial(6)                        // 720

  3. Реализуйте функцию fib(), возвращающую n-ное число Фибоначчи.
    fib(0)                              // 0
    fib(1)                              // 1
    fib(10)                             // 55
    fib(20)                             // 6765

  4. Реализуйте функцию isSorted(), которая возвращает true или false в зависимости о того, отсортирован ли переданный ей числовой массив.
    isSorted([])                        // true
    isSorted([-Infinity, -5, 0, 3, 9])  // true
    isSorted([3, 9, -3, 10])            // false

  5. Создайте собственную реализацию функции filter().
    filter([1, 2, 3, 4], n => n < 3)    // [1, 2]

  6. Создайте собственную реализацию функции reduce().
    reduce([1, 2, 3, 4], (a, b) => a + b, 0) // 10

  7. Реализуйте функцию reverse(), которая обращает порядок следования символов переданной ей строки. Не пользуйтесь встроенной функцией reverse().
    reverse('')                         // ''
    reverse('abcdef')                   // 'fedcba'

  8. Создайте собственную реализацию функции indexOf() для массивов.
    indexOf([1, 2, 3], 1)               // 0
    indexOf([1, 2, 3], 4)               // -1

  9. Реализуйте функцию isPalindrome(), которая возвращает true или false в зависимости от того, является ли переданная ей строка палиндромом (функция нечувствительна к регистру и к наличию в строке пробелов).
    isPalindrome('')                                // true
    isPalindrome('abcdcba')                         // true
    isPalindrome('abcd')                            // false
    isPalindrome('A man a plan a canal Panama')     // true

  10. Реализуйте функцию missing(), которая принимает неотсортированный массив уникальных чисел (то есть, числа в нём не повторяются) от 1 до некоего числа n, и возвращает число, отсутствующее в последовательности. Там может быть либо одно отсутствующее число, либо их может не быть вовсе.

    Способны ли вы добиться того, чтобы функция решала задачу за время O(N)? Подсказка: есть одна хорошая формула, которой вы можете воспользоваться.

    missing([])                         // undefined
    missing([1, 4, 3])                  // 2
    missing([2, 3, 4])                  // 1
    missing([5, 1, 4, 2])               // 3
    missing([1, 2, 3, 4])               // undefined

  11. Реализуйте функцию isBalanced() которая принимает строку и возвращает true или false, указывая на то, сбалансированы ли фигурные скобки, находящиеся в строке.
    isBalanced('}{')                      // false
    isBalanced('{{}')                     // false
    isBalanced('{}{}')                    // true
    isBalanced('foo { bar { baz } boo }') // true
    isBalanced('foo { bar { baz }')       // false
    isBalanced('foo { bar } }')           // false

▍Задания средней сложности


  1. Реализуйте функцию fib2(). Она похожа на функцию fib() из предыдущей группы заданий, но поддерживает числа вплоть до 50. Подсказка: используйте мемоизацию.
    fib2(0)                               // 0
    fib2(1)                               // 1
    fib2(10)                              // 55
    fib2(50)                              // 12586269025

  2. Реализуйте функцию isBalanced2(). Она похожа на функцию isBalanced() из предыдущей группы заданий, но поддерживает три типа скобок: фигурные {}, квадратные [], и круглые (). При передаче функции строки, в которой имеются неправильные скобочные последовательности, функция должна возвращать false.
    isBalanced2('(foo { bar (baz) [boo] })') // true
    isBalanced2('foo { bar { baz }')         // false
    isBalanced2('foo { (bar [baz] } )')      // false

  3. Реализуйте функцию uniq(), которая принимает массив чисел и возвращает уникальные числа, найденные в нём. Может ли функция решить эту задачу за время O(N)?
    uniq([])                              // []
    uniq([1, 4, 2, 2, 3, 4, 8])           // [1, 4, 2, 3, 8]

  4. Реализуйте функцию intersection(), которая принимает два массива и возвращает их пересечение. Можете ли вы добиться того, чтобы функция решала эту задачу за время O(M+N), где M и N — длины массивов?
    intersection([1, 5, 4, 2], [8, 91, 4, 1, 3])    // [4, 1]
    intersection([1, 5, 4, 2], [7, 12])             // []

  5. Создайте реализацию функции sort(), которая сортирует числовой массив за время O(N×log(N)).
    sort([])                              // []
    sort([-4, 1, Infinity, 3, 3, 0])      // [-4, 0, 1, 3, 3, Infinity]

  6. Реализуйте функцию includes(), которая возвращает true или false в зависимости от того, встречается ли переданное ей число в переданном ей отсортированном массиве. Может ли функция решить эту задачу за время O(log(N))?
    includes([1, 3, 8, 10], 8)            // true
    includes([1, 3, 8, 8, 15], 15)        // true
    includes([1, 3, 8, 10, 15], 9)        // false

  7. Реализуйте функцию assignDeep(), которая похожа на Object.assign(), но выполняет глубокое объединение объектов. Для того, чтобы не усложнять задачу, можно исходить из допущения, что объекты могут содержать только числа и другие объекты (в них не может быть массивов, строк, и так далее).
    assignDeep({ a: 1 }, {})              // { a: 1 }
    assignDeep({ a: 1 }, { a: 2 })        // { a: 2 }
    assignDeep({ a: 1 }, { a: { b: 2 } }) // { a: { b: 2 } }
    assignDeep({ a: { b: { c: 1 }}}, { a: { b: { d: 2 }}, e: 3 })
    // { a: { b: { c: 1, d: 2 }}, e: 3 }

  8. Реализуйте функцию reduceAsync(), которая похожа на функцию reduce() из группы простых заданий, но работает с функциями, возвращающими promise-объекты, каждый из которых должен быть разрешён до перехода к следующему.
    let a = () => Promise.resolve('a')
    let b = () => Promise.resolve('b')
    let c = () => new Promise(resolve => setTimeout(() => resolve('c'), 100))
    await reduceAsync([a, b, c], (acc, value) => [...acc, value], [])
    // ['a', 'b', 'c']
    await reduceAsync([a, c, b], (acc, value) => [...acc, value], ['d'])
    // ['d', 'a', 'c', 'b']

  9. Реализуйте функцию seq(), пользуясь тем же подходом, что и при работе над функцией reduceAsync(). Эта функция должна принимать массив функций, которые возвращают promise-объекты, и разрешать их один за другим.
    let a = () => Promise.resolve('a')
    let b = () => Promise.resolve('b')
    let c = () => Promise.resolve('c')
    await seq([a, b, c])                  // ['a', 'b', 'c']
    await seq([a, c, b])                  // ['a', 'c', 'b']

▍Сложные задания


Некоторые задания из этой группы связаны с созданием структур данных. Не нужно запоминать все тонкости их функционирования, достаточно понимания их устройство, при этом сведения о предоставляемом ими интерфейсе можно найти в интернете. Далее, нужно знать, для чего эти структуры данных используются, каковы их ограничения в сравнении с другими структурами данных.
  1. Реализуйте функцию permute(), которая возвращает массив строк, содержащий все пермутации заданной строки.
    permute('')             // []
    permute('abc')          // ['abc', 'acb', 'bac', 'bca', 'cab', 'cba']

  2. Создайте самостоятельную реализацию функции debounce().
    let a = () => console.log('foo')
    let b = debounce(a, 100)
    b()
    b()
    b() // только этот вызов должен вызывать a()

  3. Реализуйте класс LinkedList, не используя встроенные массивы JavaScript ( [] ). Ваш LinkedList должен поддерживать лишь 2 метода: add() и has().
    class LinkedList {...}
    let list = new LinkedList(1, 2, 3)
    list.add(4)                           // undefined
    list.add(5)                           // undefined
    list.has(1)                           // true
    list.has(4)                           // true
    list.has(6)                           // false

  4. Реализуйте класс HashMap, не используя встроенные объекты JavaScript ( {} ) или функцию map(). Вам дана функция hash(), которая принимает строку и возвращает некое число. Эти числа, в основном, уникальны, но возможна и ситуация, когда двум разным строкам соответствуют одинаковые числа.
    function hash (string) {
      return string
        .split('')
        .reduce((a, b) => ((a << 5) + a) + b.charCodeAt(0), 5381)
    }

    Ваша реализация HashMap должна поддерживать лишь 2 метода: get() и set().
    let map = new HashMap
    map.set('abc', 123)                   // undefined
    map.set('foo', 'bar')                 // undefined
    map.set('foo', 'baz')                 // undefined
    map.get('abc')                        // 123
    map.get('foo')                        // 'baz'
    map.get('def')                        // undefined

  5. Реализуйте класс BinarySearchTree. Он должен поддерживать 4 метода: add(), has(), remove(), и size().
    let tree = new BinarySearchTree
    tree.add(1, 2, 3, 4)
    tree.add(5)
    tree.has(2)                           // true
    tree.has(5)                           // true
    tree.remove(3)                        // undefined
    tree.size()                           // 4

  6. Реализуйте класс BinaryTree, который поддерживает поиск в ширину, а также функции симметричного, прямого и обратного поиска в глубину.
    let tree = new BinaryTree
    let fn = value => console.log(value)
    tree.add(1, 2, 3, 4)
    tree.bfs(fn)                          // undefined
    tree.inorder(fn)                      // undefined
    tree.preorder(fn)                     // undefined
    tree.postorder(fn)                    // undefined

Отладка


При ответе на следующие вопросы сначала постарайтесь понять, почему представленный код не работает. Объясните причину ошибки. Затем предложите пару вариантов исправления проблемы и перепишите код, реализуя один из предложенных вариантов. В итоге программа должна работать правильно.
  1. Необходимо, чтобы этот код выводил в лог hey amy, но он выводит hey arnold. Почему?
    function greet(person) {
      if (person == { name: 'amy' }) {
        return 'hey amy'
      } else {
        return 'hey arnold'
      }
    }
    greet({ name: 'amy' })

  2. Необходимо, чтобы этот код выводил в лог числа 0, 1, 2, 3 в указанном порядке, но он этого не делает (Однажды вы столкнётесь с этой ошибкой. Некоторые люди любят задавать этот вопрос на собеседованиях).
    for (var i = 0; i < 4; i++) {
      setTimeout(() => console.log(i), 0)
    }

  3. Необходимо, чтобы этот код выводил в лог doggo, но он выводит лишь undefined.
    let dog = {
      name: 'doggo',
      sayName() {
        console.log(this.name)
      }
    }
    let sayName = dog.sayName
    sayName()

  4. Попытка вызова метода bark() объекта Dog вызывает ошибку. Почему?
    function Dog(name) {
      this.name = name
    }
    Dog.bark = function() {
      console.log(this.name + ' says woof')
    }
    let fido = new Dog('fido')
    fido.bark()

  5. Почему функция isBig() возвращает именно такой результат?
    function isBig(thing) {
      if (thing == 0 || thing == 1 || thing == 2) {
        return false
      }
      return true
    }
    isBig(1)    // false
    isBig([2])  // false
    isBig([3])  // true

Проектирование систем


Если вы не уверены, что знаете, что такое «проектирование систем», сначала почитайте это.

1. Расскажите о реализации виджета автозавершения вводимого пользователем текста. Данные для автозавершения загружаются с сервера. Рассмотрите клиентскую и серверную части системы.

  • Как бы вы спроектировали клиентскую часть системы, которая поддерживает следующие возможности:
    • Получение данных с применением серверного API.
    • Вывод результатов в виде дерева, когда у элементов могут быть родительские и дочерние элементы, то есть, подсказки автозаполнения — это не обычный плоский список.
    • Поддержка, помимо обычных текстовых фрагментов, элементов разных типов: флажков, радиокнопок, иконок.

  • Как выглядит API компонента?
  • Как выглядит серверное API?
  • Какие соображения, касающиеся производительности, нужно учитывать для того, чтобы виджет работал в режиме реального времени, выводя подсказки по мере ввода данных пользователем? Есть ли здесь какие-нибудь пограничные случаи (например, когда пользователь вводит текст быстро при медленном сетевом соединении)?
  • Как бы вы спроектировали сетевую подсистему и серверную часть высокопроизводительного решения такого рода? Как организовали бы взаимодействие клиента и сервера? Как данные хранятся на сервере? Как всё это масштабируется для поддержки больших объёмов данных и большого количества клиентов?

2. Расскажите о реализации сервиса, подобного Twitter, описав клиентскую и серверную части (этот вопрос бессовестно украден у моего друга Майкла Ву).
  • Как твиты загружаются с сервера и выводятся в пользовательском интерфейсе?
  • Как, при обновлении твитов, обновляется лента? Как клиентская часть приложения узнаёт о появлении новых твитов?
  • Как выполняется поиск по твитам? Как организован поиск по автору? Расскажите о том, как спроектирована база данных, серверная часть приложения и API.

Итоги


Надеемся, эти вопросы пригодятся и тем, кто собирается на собеседования, и тем, кто их проводит. А если вы не относитесь ни к тем, ни к другим, полагаем, вопросы помогут вам поддерживать себя в хорошей программистской форме.

Вот, кстати, ещё несколько мест, куда можно заглянуть, если вам хочется попрактиковаться: The Algorithm Design Manual, задачи с соревнований CodeJam, репозиторий keon/algorithms. А вот — несколько ресурсов, которые будут полезны JS-разработчикам: JavaScript Allonge, You Don’t Know JS, Effective JavaScript.

Уважаемые читатели! Если у вас есть на примете вопросы, которые, по вашему мнению, стоит добавить в этот список (или если вы обнаружите ошибку) — расскажите нам и напишите автору этого материала.

Вопросы для собеседования кандидату на должность Front-end разработчика

Это перевод популярного репозитория от html5bp — Front-end Job Interview Questions (en), который существует с 2009 года. Список вопросов составлялся и дополнятся известными во front-end людьми, поэтому на этот список можно положиться. Перевод делал не я (вернее я хотел, но он оказался уже переведен).

Замечание: Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность front-end разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь).

Также, имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе).

Содержание

  1. Общие вопросы
  2. Вопросы по HTML
  3. Вопросы по JavaScript
  4. Примеры кода на JavaScript
  5. Вопросы по jQuery
  6. Вопросы по CSS
  7. “Светская беседа«
  8. Первоначальные авторы

Общие вопросы: [↑]

  • Вы пользуетесь Твиттером?
    • Если да, то кто присутствует в вашей ленте?
  • Кого из мировых front-end разработчиков вы знаете?
    • А российских front-end’щиков?
  • У Вас есть аккаунт на GitHub?
    • Если да, то за какими интересными проектами вы следите?
  • Какие блоги Вы читаете?
  • Какие системы управления версиями вам приходилось использовать?
  • Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты)
  • Опишите последовательность Ваших действий, когда вы создаете новую Web-страницу
  • Можете ли пояснить разницу между progressive enhancement и graceful degradation?
    • Бонус, если также расскажете про feature detection (определение возможностей браузера)
  • Объясните, что означает «Семантическая разметка»
  • Какой Ваш основной браузер для разработки и какими инструментами Вы в нем пользуетесь?
  • Как можно оптимизировать загрузку внешних ресурсов на странице?
    • Комбинация из потенциальных решений:
      • Конкатенация
      • Минификация
      • Использование CDN
      • Кэширования
      • и т.д.
  • Каково преимущество в подгрузке внешних ресурсов с нескольких доменов?
    • Сколько ресурсов браузер может одновременно качать с одного домена?
  • Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального)
  • Если Вы присоединились к проекту, где для форматирования используются табы, а Вы привыкли использовать пробелы, как Вы поступите?
    • Предложите использовать EditorConfig (editorconfig.org)
    • Останетесь верным своим привычкам
    • Выполните команду :retab!
  • Используете ли приёмы для ускорения написания кода (сниппеты, Emmet)?
  • Знакомы ли с шаблонизаторами (Smarty, HAML etc.)
  • Реализуйте примитивное слайд-шоу
    • Бонус, если Вы это сделаете без использования JS
  • Какие инструменты Вы используете для тестирования производительности кода?
  • Если бы у Вас была возможность освоить новую технологию в этом году, что бы это было?
  • Объясните важность стандартов и ком

Разбор процесса фронтенд-собеседований | Techrocks

Перевод статьи «Decoding the Front-end Interview Process».

Фронтенд-собеседование

Если вы фронтенд-разработчик, вы неизбежно попадете на техническое собеседование (и даже не одно). К сожалению, весь процесс собеседований может быть не до конца понятным и варьироваться в зависимости от компании.

Хорошее понимание происходящего поможет вам чувствовать себя более уверенно. Прохождение собеседований это отдельный навык, который нужно тренировать, но когда вы знаете, чего ждать, это все же успокаивает.

Давайте рассмотрим, как выглядит процесс собеседований на позицию фронтенд-разработчика, и что нужно делать, чтобы этот процесс прошел успешно.

Процесс собеседований

Я много раз проходила собеседования на позицию фронтенд-разработчика. Многие люди считают умение проходить собеседование чем-то само собой разумеющимся. Однако собеседования по фронтенду можно считать одними из самых сложных.

От вас требуется концептуальное понимание языков, с которыми вы работаете (HTML, CSS, JavaScript), умение сразу выдать на-гора код, использовать алгоритмы сортировки и поиска и иметь представление о многих сопутствующих технологиях и сферах деятельности (HTTPS, REST, методологии разработки).

Исходя из моего опыта, приобретенного на собеседованиях, проходивших по всем Штатам, а также в Германии, в большинстве компаний процесс собеседований выглядит так:

Процесс собеседований на должность фронтенд-разработчика

Техническое собеседование на фронтенд разработчика

Успешное техническое собеседование на фронтенд разработчика – это прежде всего подготовка. Вот список материалов и советов, которые помогут.

В этом разделе собраны темы и вопросы, ответы на которые облегчат техническое собеседование на фронтенд разработчика. Обратите внимание, что фронтенд-фреймворк и сопутствующие технологии (здесь – React.js/Redux) могут быть любыми другими, главное – как вы будете отвечать на общие вопросы.

Темы:

  • JS, CSS и HTML в общих чертах.
  • Структура документа.
  • Архитектура проекта.
  • Git.
  • Производительность кода.
  • Безопасность.
  • SEO.
  • Отзывчивость интерфейса и дизайна.

Возможные вопросы:

  • Опишите типичный сайт. Выделите его компоненты.
  • Как сделать сайт адаптивным?
  • Как центрировать текст вертикально и горизонтально?
  • Как работают отступы в CSS? Чем отличаются внутренние отступы от внешних?
  • Как бы вы изменили наш сайт?
  • Как вы относитесь к работе с другими частями приложения? К примеру, с бекэндом?
  • Что для вас хороший user experience?
  • Как протестировать UX?
  • Используете ли вы БЭМ? Расскажите, что вы знаете о БЭМ?
  • Пишете ли вы тесты? Что такое юнит-тест?
  • В чем разница между == и ===?
  • В чем преимущество array.forEach в сравнении с циклом? В каких случая лучше использовать цикл?
  • Что вы знаете о React?
  • Как вы пришли к необходимости использовать фреймворк?
  • Как работает Redux? Расскажите о его API.
  • Что такое иммутабельность или immutability?

Старайтесь не гуглить готовые решения

Трудно помнить все тонкости конкретного API и языка, поэтому если во время тестового задания на собеседовании вы будете пользоваться Гуглом, вряд ли кто-то будет против. Но если вы что-то забыли, лучше обратиться напрямую к документации: ваш собеседник это оценит. Намного хуже, если вы возьмете готовое решение со Stack Overflow и не сможете его правильно адаптировать.

Уточняйте

Не стесняйтесь переспрашивать, уточнять, задавать вопросы во время решения тестового задания. Если вам что-то непонятно, или вам кажется, что решение должно быть иным – уточните. Это намного лучше, чем если вы сделаете все так, как вам кажется верным, в то время как собеседник будет ожидать другого решения.

Разбирайтесь с ошибками

Баги в процессе написания кода всегда неизбежны. Старайтесь не запускать ошибки даже во время тестового задания, разбирайтесь с ними по мере их появления. Даже, казалось бы, незначительное изменение решения может повлиять на вашу оценку не в лучшую сторону.

Освежите знание языка перед собеседованием

Даже если вы пишете код каждый день, могут быть вещи, которые вы упускаете из виду, и которые могут оказаться на собеседовании. Потратьте лишнее время на документацию. К примеру, повторите про array.map, array.filter и array.reduce, чтобы не переборщить с циклами в решении.

Не забывайте о тестировании

Даже если вы не занимаетесь тестами для собственного кода, в работе вам наверняка придется это делать. Вы должны иметь хотя бы общее представление о тестировании кода: ознакомьтесь с юнит-тестированием и интеграционными тестами.

Короче – не всегда лучше

Краткость – сестра таланта только до тех пор, пока код остается читабельным. Производительность и чистота кода важны, но не увлекайтесь слишком сокращениями, иначе код превратится в плохо читаемый набор методов.

Топ-5 вопросов на собеседовании на Frontend-разработчика

Доброго времени суток. Приветствую вас снова на моем блоге.

Сегодня речь пойдет о том, какие вопросы и задачи задают на собеседовании на позицию frontend-разработчика. Выборка сделана по 10 очным интервью и скайп-собеседованиям с техническими специалистами из разных IT-компаний города Казани и Иннополиса. А собеседование, которое я проходила в Яндексе, это вообще отдельная тема.

Почему на вакансию Frontend Developer задают вопросы на знание Javascript

После того, как вы прошли первичный отсев у HR-специалиста и рассказали о своем опыте работы с той или иной технологией, вопросы начинает задавать программист или технический директор. Если говорить кратко, тот человек, в задачу которого входит оценить ваши навыки программирования и уровень владения той технологией, которая указана в вакансии на позицию.

 Для веба клиентский Javascript считается основообразующим — практически все интерфейсы, с которыми взаимодействует пользователь в браузере, и их логика написаны на этом языке программирования. Другими словами, браузер понимает только HTML, CSS и Javascript (стандарт ES5, ES6 пока добрая половина браузеров не поддерживает, но думаю в ближайшие 1-1,5 года эта проблема решится и не придется использовать транспайлеры вроде Babel и синтаксический сахар).

Поэтому все JS-фреймворки и библиотеки (Angular, React, Vue) требуют понимания  чистого Javascript. Например, мой любимый ReactJS — это сплошь и рядом нативные javascript-функции, поэтому чтобы освоить его особо не приходится ничего изучать нового, в отличие от Angular, который тащит почти всё свое из коробки. Сложности в изучении библиотеки возникают в настройке проекта — React это не фреймворк, а библиотека, где проект собирается из кучи мелких библиотечек. И чтобы собрать на нем проект, требуется знание Webpack и npm.

Что касается Vue.js, то написание проекта на нем несколько проще, чем React за счет расширения html javascript-ом. Если вы когда-нибудь работали с jquery, то на чисто интуитивном уровне можно освоить его, поработав несколько часов. На React наоборот — javascript расширяется html за счет jsx-синтаксиса. Также Vue.js работает по принципу «всё одним разом скачали, установили и пишите код» (интереса ради попробовала написать на нем небольшое приложеньице).

Сразу оговорюсь, что мои рассуждения касаются frontend-разработчиков, создающих Single Page Applicaton, так как для фреймворков типа Yii2 (язык PHP) и ASP.NET MVC5 (язык C#) требуются дополнительные знания других языков, кроме HTML, CSS, Javascript. А следовательно вопросы от технического специалиста будут касаться и них. Поэтому неважно, на каком фреймворке или библиотеке вы пишите код, но если он исполняется в браузере, вопросы и задачки по javascript-у будут.

Список популярных вопросов на знание Javascript

В самой статье я привожу только условие задач — решение и код к ним находится в открытом доступе в моем репозитории на Github, которые доступны по ссылкам.

Вопросы:

  1. Перечислите типы данных.
  2. Что такое ООП? Объясните, как вы понимаете основные его принципы.
  3. Что такое MVC.
  4. Что такое замыкания и callback-и?
  5. Что означает запись ‘use strict’ ?

Задачи для решения:

  1. Даны переменные a = 3, b = 5. Необходимо поменять их местами, не используя третью переменную. Массив тоже использовать нельзя.
  2. Дан массив чисел. Написать программу, которая отсортирует его на четные и нечетные числа. Четные числа должны находиться в порядке возрастания, нечетные — по убыванию. Посмотреть ответ на решение задачи на Github — Задача 2
    Что почитать на эту тему и где? Тема «Массивы: методы» на learn.javascript о встроенных методах массивов JavaScript.
  3. Задача на приведение к типу данных в Javascript

Пример тестового задания для Frontend-разработчика (JavaScript, React.js)

На выполнение этого задания дается 1 неделя. Система бронирования переговорных комнат в режиме реального времени на React.js.

Задача:

Реализовать одностраничное приложение системы бронирования переговорных комнат в режиме реального времени.

Логика работы приложения:

 

  • Интерфейс приложения должен отображать доступные даты для бронирования переговорных комнат.
  • Забронированные даты должны сохраняться в localStorage и видны при перезагрузке страницы.
  • Перечень переговорных комнат доступных для бронирования: желтая, красная, зеленая, синяя, фиолетовая.

 

Главное условие:

 

  • Разработка фронт-энда — ReactJS/JavaScript/JQuery/HTML5/CSS3
  • Кроссбраузерная верстка (min. IE10)
  • Приложение должно быть адаптировано под мобильные устройства, без использования CSS фреймворков (Bootstrap).

 

Будет плюсом:

  • Использование препроцессоров: LESS/SASS
  • Размещение исходного кода на ресурсе github с пошаговыми коммитами разработчика.

Решить такую красоту можно разными способами. Над одним из вариантов я ломала голову неделю, потому что на первый взгляд — это таблица. Пример кода находится в моем репозитории на Github reserve-room 

Какие пункты из разделов learn.javascript.ru кроме перечисленных обязательно нужно изучить перед собеседованием на вакансию front-end developer?

Через несколько дней собеседование на вакансию front-end developer. Програмистом никогда не работал поэтому это будет стажер или junior front-end developer. За несколько месяцев изучил то что перечислил ниже. Посоветуйте какие пункты кроме перечисленных обязательно нужно еще изучить. Тоесть те о которых с большой долей вероятности спросят на собесодовании. Но немного, штук 5-7 не больше. Потому что за несколько дней больше не смогу качественно изучить. А не пройденных пунктов на learn.javascript.ru еще около сотни…Особенно много не пройденных пунктов из части 2 и части 3. Просто ИМХО учебник очень большой, наверное если если распечатать его то будет с 1000 страниц. Если все три части изучить, понять и запомнить то наверное по теории знания JS будут как у хорошего мидла, но я то пробуюсь на первую работу стажер или junior, как уже возьмут…Поэтому интересует мнение тех кто ближайшие 3 года проходил собеседование на стажера или junior front-end developer. какие 5-7 пунктов вы бы посоветовали еще изучить?

P.S. На learn.javascript.ru есть пункты которые детально описывают некоторые методы, то их можете не советовать потому что я все наиболее важные и часто используемые методы в javascript изучил на других ресурсах и на практике.

Что изучил на learn.javascript.ru:

Основы JavaScript
2.1 Привет, мир!
2.3 Строгий режим — «use strict»
2.4 Переменные
2.5 Типы данных
2.7 Операторы
2.8 Операторы сравнения
2.10 Условные операторы: if, ‘?’
2.11 Логические операторы
2.12 Циклы while и for
2.13 Конструкция «switch»
2.14 Функции
2.15 Function Expression и функции-стрелки

Качество кода
3.3 Комментарии

Объекты: основы
4.1 Объекты
4.4 Методы объекта, «this»
4.6 Конструкторы, создание объектов через «new»

Типы данных
5.2 Числа
5.3 Строки
5.4 Массивы

Продвинутая работа с функциями
6.1 Рекурсия и стек
6.2 Остаточные параметры и оператор расширения
6.3 Замыкание
6.4 Устаревшее ключевое слово «var»
6.5 Глобальный объект
6.6. Объект функции, NFE
6.7 Синтаксис «new Function»
6.8 Планирование: setTimeout and setInterval

Классы
9.1 Класс: базовый синтаксис

Успешное прохождение интервью для фронтенд разработчика

Список самых главных вещей, которые нужно знать для успешного прохождения интервью для фронтенд разработчика.

Технические фронтенд интервью — сложные и это факт. Вам не только нужно иметь полное понимание основ компьютерной науки, но и понимать такие вещи, как производительность веб-страниц, системы сборки и CSS фреймворки.

Существуют различные ресурсы на эту тему, но я понял, что немногие из них могут полноценно помочь вам подготовиться к фронтенд интервью. Поэтому я решил написать пошаговую статью в надежде, что она поможет вам получить высшую оценку на вашем следующем интервью.

Итак, перед интервью уточните у вашего рекрутера о его формате. Некоторые собеседования могут быть основаны на использовании доски, в то время, как другие — на использовании текстовых онлайн редакторов, типа CoderPad. Это важно знать для того, чтобы вы могли тренироваться в таких же условиях, в которых будет проходить интервью.

HTML и CSS

HTML и CSS, Javascript, и шаблоны проектирования на Javascript являются ключевыми понятиями, которые будут проверяться на интервью. Пройдитесь по списку и убедитесь, что вы чувствуете себя уверенно относительно каждой темы.

HTML и CSS — как хлеб с маслом для клиентской разработки. В течении интервью, вас скорее всего спросят о нюансах HTML и CSS. Также, будьте готовы создать разметку на основе данного макета.

На всякий случай вам нужно освежить в памяти HTML и CSS, просмотрите следующие основные понятия:

В дополнении к этим понятиям, повторите CSS препроцессоры, такие как SASS или LESS, и их преимущества. Также ознакомьтесь с соглашениями о наименованиях CSS, такими как BEM и OOCSS.

Я уже упоминал, что некоторые интервьюеры будут просить вас создавать разметку в HTML и CSS. На практике это происходит на такой онлайновой платформе, как CodePen. Зайдите на Dribbble, там есть множество простых, но красивых проектов, которые интересно было бы воссоздать.

Наконец, насчет фронтенда, мы очень привыкли вносить изменения в нашем редакторе и затем проверят изменения в нашем браузере. Часто, в течение интервью, вы не сможете этого сделать. Когда вы готовитесь к интервью, постарайтесь создавать разметку, не проверяя результат до конца.

JavaScript

Если HTML и CSS — это хлеб с маслом фронтенд разработки, то Javascript – это нож. Компании будут уделять много времени в течение интервью на проверку ваших знаний Javascript. Многие вопросы будут основаны на следующих понятиях:

Когда задан вопрос по Javascript, поймите, на каком из этих понятий он основан и тогда будет проще найти верное решение. Если вы уверены в ваших знаниях Javascript, проверьте их здесь, здесь и здесь.

Шаблоны проектирования на Javascript предоставляют вам повторные решения общих проблем. Есть несколько шаблонов проектирования, которые важно знать:

Кроме шаблонов проектирования на Javascript, важно быть ознакомленным с фреймворками Javascript. Это не значит, что вам нужно пойти изучать очередной фреймворк перед интервью. Вместо этого, поймите, когда и где команда фронтенд разработчиков использует фреймворки. Также, если ваше интервью основано на чем-то типа React + Flux или Angular, просмотрите некоторые материалы по архитектуре фреймворка заранее.

Некоторые компании нанимают прежде всего разработчиков программного обеспечения, а уже потом фронтенд разработчиками. Это значит то, что эти компании ожидают от вас хорошей базы знаний в таких темах, как принципы проектирования программного обеспечения, масштабируемая архитектура кода и тестирование.

Если ваш рекрутер предлагает проверить ваши знания структуры данных и алгоритмов, этот раздел для вас. В ином случае, вы можете пропустить данный раздел. Если у вас нет основных знаний компьютерной науки, это нормально. Большинство из этих понятий хорошо поддаются изучению.

Есть основные структуры данных, которые я бы порекомендовал к изучению на зубок. Не просто читайте о них, потратьте время на их реализацию на Javascript. Если вы не знакомы с модульным тестированием, проверяйте структуру данных с помощью такой библиотеки, как Mocha.

  • Связные списки
  • Хеш таблицы
  • Стеки и очереди
  • Деревья (бинарные деревья и куча)
  • Графы

Примечание: Для графов, также знайте, как реализовать обход в глубину и ширину.

Для реализации этих структур данных, вы можете зайти на SanFoundry. Все представленные там примеры — для Java, но преобразовать их для Javascript довольно просто.

После того, как вы будете уверены в своих знаниях структур данных, вы можете перейти к сортировке. Пройдитесь по списку, реализуйте его в Javascript и затем составьте список по временной сложности и использованию памяти.

  • Двоичный поиск
  • Пузырьковая сортировка
  • Сортировка методом вставок
  • Сортировка методом слияния
  • Быстрая сортировка
  • Сортировка методом выбора

После просмотра структуры данных и алгоритма, проверьте свои знания на Leetcode и с помощью этих вопросов.

Я знаю, что это много материала для изучения, особенно, если вы новичок в фронтенд разработке. Начните готовиться к интервью заранее, в таком случае вы сможете двигаться в подходящем для вас темпе.

Также помните, что интервью не являются показателем вашей ценности как программиста. Некоторые люди хороши в интервью, другие нет. Иногда интервью проходит успешно, иногда нет.

Собеседование на должность программиста: вопросы по алгоритмам

Как легко пройти собеседование

Удачи!

Перевод: Софья Лепёхина

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *