Топ-5 вопросов и задач, которые задают на собеседованиях на Frontend-разработчика

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

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

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

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

question-frontend Для веба клиентский 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
    Что почитать на эту тему и где? Тема «Массивы: методы» о встроенных методах массивов 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 

Топ-5 вопросов и задач, которые задают на собеседованиях на Frontend-разработчика: 6 комментариев

  • Hi my friend! I want to say that this post is awesome, great written and come with approximately all significant infos.

    I would like to look more posts like this .

  • Привет! Очень интересная статья! А это тестовое задание на какой уровень разработчика (джуниор, мидл, сеньёр)? Ну или на какую зп.

    Хочется по больше тестовых заданий посмотреть😎

  • Задачка рассчитана на разработчика с опытом 1 год +. Совсем зелененькому новичку будет ее выполнить сложновато, потому что требуется уверенное знание Javascript. То есть уровень где-то продвинутый джуниор или начинающий мидл. Насчет зарплаты сказать не могу, так как между Москвой, Петербургом и регионами вилка цен разная на один и тот же грейд разработчика.

  • На сколько я понял это задание от казанской фирмы? Я сам Казанда Яшим.

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

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