Как подготовиться к собеседованию на позицию веб-разработчика

Перевод статьи «Prepare Your Skill Set for Web Developer Interviews».

Подготовка к собеседованию

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

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

Прежде чем начать

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

Назад к основам

Сложность подготовительного процесса зависит от того, насколько интенсивно вы в данное время используете JavaScript, HTML и CSS, а также от требований конкретной вакансии.

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

Давайте рассмотрим пример. На многих собеседованиях задают вопрос о замыканиях, например, каким будет output этого кода:

[javascript]for (var i = 0; i < 5; i++) { setTimeout(() => console.log(i), 1000);
}[/javascript]

В данном случае output это 5 5 5 5 5, а не 0 1 2 3 4. Если мы используем let вместо var или используем ((j) => { return () => console.log(j); })(i), то значение i будет сохранено IIFE в аргументе новой области видимости функции. Этот маленький пример очень показателен, поскольку включает некоторые важные концепции языка – замыкания, контекст, область видимости, IIFE и let / var.

Этот вопрос довольно широко применяется, поэтому к нему задаются дополнительные уточняющие вопросы, например, о причинах такого поведения. В объяснении вы можете упомянуть цикл событий, а это благодатная почва для углубления в то, «как работает JavaScript».

Также вам могут предложить решить какую-нибудь проблему. Возможно, вы знаете, как она решается, но интервьюер может попросить вас привести и другие варианты решения. Например, одним из решений может быть функция bind, но есть также функции apply и call. Какова разница между ними? И таким образом мы приходим к обсуждению внутреннего устройства JavaScript.

Как работает веб

Как это работает

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

Как работает веб

Что происходит, когда вы нажимаете кнопку «Go» в адресной строке браузера? Думаете ли вы об этом когда-нибудь? DNS и все такое… Да, но не только DNS. В этом процессе действительно участвует механизм DNS-серверов, но есть и другие составляющие. Этот процесс содержит проверку 4 кэшей для нахождения пути к правильному IP. Затем, как вы помните из своих университетских лекций, идут TCP-рукопожатие и Ack-сообщения.

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

Что будет делать браузер после возвращения HTML? Парсинг и рендеринг ресурсов, включая различные элементы, внешние и внутренние скрипты и стили, – это большой процесс. В этом процессе есть блокирующие операции и служебные слова вроде defer и async. Т

о, где вы разместите внешние источники и скрипты, имеет значение для производительности и временных показателей time to an interaction (TTI). Есть определенные приоритеты, и браузер производит много работы для их учета.

Веб не работает по мановению волшебной палочки

JavaScript однопоточен

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

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

Кроме того, есть и другие известные языки, например, Java или C#. Там для каждого соединения появляется новый поток. Очень важно знать, какой язык стоит использовать. А зависит это от того, как будет использоваться продукт.

Цикл событий, стек вызовов, очередь, куча

Еще одна часть того, «как это работает», – внутренние течения и процессы языка, его механизм. Каков порядок выполнения, где сохраняется каждая переменная, в чем разница между стеком вызовов и очередью и что происходит при использовании setTimeout? Каков механизм лидирующего в мире языка и как все это устроено? Ответив на эти вопросы, вы поймете рабочий процесс JavaScript. Без понимания этого механизма не нужно ходить на собеседования на позиции, связанные с использованием JavaScript. Это критически важный момент.

JavaScript Event Loop Visual Representation — photo credit for Gaurav Pandvia
JavaScript Event Loop Visual Representation — photo credit for Gaurav Pandvia

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

Асинхронность – Callbacks, Promises, Async\Await и генераторы

JavaScript-разработчики интенсивно используют асинхронные операции. HTTP-запросы, планировщики (schedulers), таймеры и операции ввода/вывода представляют собой лишь часть асинхронных операций. Это не дополнительное свойство языка, это его суть.

Последние разработки нового функционала и его развитие просто поражают. От callbacks (c callback hell) к promises (с promise hell) и затем к генераторам и механизму async\await – вы должны знать о подобной эволюции и уметь ее объяснять.

ES6/7/8

JavaScript постоянно обновляется. Процесс включения новых вещей в спецификацию очень упорядоченный и сбалансированный. ECMAScript это стандарт, формирующий основы JavaScript. Сам ECMAScript стандартизирован организацией ECMA International в спецификациях ECMA-262 и ECMA-402.

ES6 Features — Compatibility & Browser Support
ES6 Features — Compatibility & Browser Support

TC39 (Ecma International Technical Committee 39) официально выпустил ECMAScript 2017 в середине 2017 года. За последний год мы много говорили об ECMAScript. И ведь было о чем поговорить.

ES6 это одна из самых свежих вещей в мире JavaScript. Он везде. Своей сегодняшней популярностью ES6 обязан новому синтаксису и инновациям, которые существенно улучшают работу разработчиков. Из последних изменений стоит назвать async\await, стрелочные функции, оператор spread, классовую структуру.

Семантический HTML

Даже если вы не видите визуальной разницы между div, footer, main и article, за ними стоит целый babel. Семантический HTML это важно, причем по многим причинам. Например, люди с ограниченными возможностями используют считыватели экрана, а семантика влияет на порядок чтения и операции, которые могут выполняться.

Для вас как разработчика это часть стандарта. Работать с семантическим HTML-блоком проще, чем с div внутри другого div. Это способствует унификации и влияет на ощущения посетителя сайта/приложения. Например, h2 на каждой странице будет выглядеть одинаково.

Порой вы можете задаваться вопросами:

  • Можно ли помещать div в параграф?
  • Когда стоит использовать тег article?
  • Нормально ли вкладывать тег main внутрь другого тега main?
  • Что выбрать для ссылок на следующую и предыдущую страницу – тег a или button?

Ответы на эти и другие вопросы, а также рекомендации можно найти в официальной спецификации HTML или на сайте W3C.

Хранение данных и асинхронность

Cookies vs локальное хранилище vs сессионное хранилище

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

Локальные данные (локальное и сессионное хранилище) воздействуют на конкретный браузер, в котором сохраняются. Если вы хотите сохранить это воздействие на всех машинах и всех браузерах, используемых юзером, нужно сохранить данные на сервере.

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

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

Локальное хранилище может содержать только строчные ключи и значения, а cookies могут сохранять комплексные объекты.

Есть и ограничения по размеру. Локальное и сессионное хранилище могут содержать до 5MB, а cookies — до 4KB. Есть и другие ограничения и различия.

Данная тема является распространенной на собеседованиях и может «всплывать» в качестве решения некоторых вопросов или как самостоятельный вопрос.

Заключение

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


[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

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

Прокрутить вверх