Перевод статьи «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. Это критически важный момент.


Кроме того, на собеседовании часто спрашивают о значениях таких навязших на зубах слов как область видимости, контекст, поднятие. Также часто спрашивают о реализации инкапсуляции в 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.


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]