Подготовка к интервью на Front-end разработчика

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

Я провёл множество интервью с веб-разработчиками и разработчиками ПО, стремящимся попасть в Amazon или Yahoo на должность Front-end разработчиков. В этой статье я даю советы о том, к чему и как готовиться.

Интервью – это тяжело. В течение 45 минут кандидатам приходиться показывать, на что они способны. Как интервьюер, могу сказать, что и мне зачастую непросто определить, подходит ли кандидат, за такое короткое время, поэтому иногда мы вынуждены задавать вопросы по своему усмотрению.

Распространённые заблуждения

Одна из самых распространённых ошибок среди кандидатов – подготовка к простым вопросам, вроде "Что такое блочная модель?" или "Объясните, в чём разница между == и === в JavaScript?". Такие вопросы не говорят интервьюеру ничего о кандидате, соответственно, нет смысла их задавать.

Вместо этого будьте готовы к тому, что придётся писать код. Вас могут попросить сделать виджет или проверить ваше знание Lodash и Underscore.js. Например:

• Сделать макет сайта Netflix;
• Добавить возможность выбора даты, корзину покупок или простую карусель;
• Написать функцию debounce;

Говоря о библиотеках, часто встречающейся ошибкой является подготовка к использованию популярных фреймворков на интервью. Многие думают, зачем изобретать велосипед, если можно просто использовать jQuery, React, Angular и др., тем более, что во время работы именно они, скорее всего, и пригодятся? Технологии, фреймворки и библиотеки постоянно совершенствуются. Поэтому нам интересны те, у кого есть знания основных принципов, необходимых для разработки.

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

JavaScript

Вам необходимо знать JS от корки до корки. Чем более высокая позиция, на которую вы претендуете, тем более глубоких знаний от вас ожидают. Темы, обязательные для понимания:

• Контекст выполнения;
• "Поднятие" переменных, область видимости блоков, функциональные выражения;
• Связь данных;
• Прототипы объекта, конструкторы, примеси;
• Композиции функций, функции высшего порядка;
• Делегирование, всплытие событий;
• Преобразование типов;
• Обработка асинхронных вызовов с помощью функций обратного вызова, промисов, await, async;
• Декларация функции и функциональные выражения.

DOM

Важно понимать, как устроена навигация в DOM. Например, многие кандидаты, которые зациклились на jQuery или долгое время пишут только React&Angular приложения, не готовы к таким вопросам.

Вы должны знать и уметь без использования библиотек:

• Искать узлы с помощью document.querySelector или document.getElementsByTagName;
• Обходить элементы дерева с помощью Node.parentNode, Node.firstChild, Node.lastChild, Node.childNodes, Node.previousSibling и Node.nextSibling;
• Добавлять, удалять, копировать и создавать узлы в дереве DOM. Знать такие операции, как изменение содержимого узла, удаление или добавление имени класса CSS;
• Кэшировать узлы.

CSS

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

• Layout – как правильно располагать элементы друг за другом, когда использовать две, а когда три колонки;
• Адаптивный дизайн, подстраивающийся под размеры окна;
• Специфичность селекторов;
• Правильный нейминг.

HTML

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

От вас будут ожидать:

• Понимание семантической вёрстки;
• Знания атрибутов тегов, например disabled, async, defer;
• Умение объявить doctype. Просто, но большинство тех, кто не занимается HTML каждый день, забывают об этом, как и о том, что мета-теги также доступны для использования.

Системный дизайн

На интервью для тех, кто работает с бэкэндом обычно спрашивают про MapReduce, проектирование распределенных хранилищ типа ключ-значение. В повседневной работе фронтенд-программист не обязан иметь глубокое представление о том, как проектируются крупные системы, однако не стоит удивляться вопросам о том, как работают популярные приложения. Такие вопросы обычно обширны, например: "предложите дизайн сайта наподобие Pinterest" или "расскажите, как бы вы проектировали систему кассовых расчетов?". Вот несколько областей, о которых стоит задуматься:

• Рендеринг – на стороне клиента, сервера и универсальный;
• Разработка дизайна, особенно несколькими командами разработчиков, подразумевает, что все должны следовать единым стандартам построения компонентов;
• Управление состояниями – выбор между потоками данных в произвольном направлении и двусвязными потоками. Вы должны задуматься, будет ли ваш дизайн следовать пассивной или реагирующей модели программирования, а также над тем, как компоненты относятся друг к другу (например Foo–> Bar или Foo –>Bar);
• Async поток – ваши компоненты, возможно, будут взаимодействовать в режиме реального времени. Дизайн, который вы проектируете, должен решать, что использовать: XHR или двунаправленные вызовы. Вас также могут спросить о поддержке устаревших браузеров;
• Концепция разделения на Model-View-Controller (MVC), Model-View-ViewModel (MVVM) и Model-View-Presenter (MVP);
• Поддержка различных устройств – будут ли решения для десктопных браузеров, для мобильных и гибридных приложений выполнены в одном стиле или они будут отличаться для подчеркивания различий. Если, к примеру, вы строите сайт вроде Pinterest, вы, вероятно, будете использовать три колонки для полной версии сайта и всего одну для мобильных устройств. Как ваш дизайн будет это реализовывать?

Веб-тестирование

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

• Понимание критического пути рендеринга;
• Оптимизация изображений;
• Ленивая vs предварительная загрузка ресурсов;
• Упрощение и сокращение областей прорисовки;
• Умение использовать GPU.

Структуры данных и алгоритмы

Это немного спорный момент, но обладание базовым представлением о сложности (или времени) вычислений вроде O(N), O(N * log N) вам не помешает. На данный момент набирают популярность одностраничные сайты, поэтому управление памятью – также ваша задача. Например, если вас попросят построить клиент-серверное приложение для проверки правописания, знание типовых структур данных и алгоритмов сильно упростит вам задачу.

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

Общие знания о веб

В общих вопросах о веб-технологиях и парадигмах от вас будут ожидать широких знаний:

• HTTP запросы – GET, POST наряду с Cache-Control, ETag, Status Codes, и Transfer-Encoding;
• REST vs RPC;
• Безопасность – когда применять политики JSONP, CORs, и iFrame.

Подводим итог

Чтобы стать разработчиком, требуется много знаний. Но всё реально, нужно лишь быть готовым учиться и набивать руку.

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

Если вам кажется, что я что-то упустил или хотите поделиться своим опытом, пишите на ruproglib@gmail.com.

Другие статьи по теме

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

Как попасть на собеседование в компанию мечты

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

Источник: David Shariff