От автора: неважно, ищете вы работу или нет, веб-разработчик должен знать как базовые, так и продвинутые темы. Они необходимы для разработки продуктов высокого качества с хорошей производительностью и правильными технологиями. В этой статье я расскажу про свой опыт поиска работы, а также про возможные вопросы для собеседования разработчика, которые необходимо изучить, чтобы подготовить себя и максимально повысить свои шансы на получение работы мечты.
Прежде чем начнем
Ищите вы работу сейчас или искали ранее, у вас точно были эти периоды. Много страхов, эмоций, желаний, надежд и дилемм. Нравится вам или нет, но вам нужно обратить внимание на некоторые проблемы и быть готовыми к поиску работы.
В моей прошлой статье мы говорили о том, что важно для соискателя, получили советы о том, как максимально повысить свои шансы, а также узнали, как подготовиться к процессу получения работы мечты. Если вы не читали эту статью, рекомендую сначала ее прочесть.
Вернемся к основам
Сложность подготовки зависит от того, сколько времени вы уделяете на данный момент HTML, CSS и JS, а также от требований должности. Очень важно понять основы и внутренности. В большинстве случаев короткого разговора достаточно, чтобы понять, что вы чего-то не понимаете. Когда что-то не работает, CSS может быть очень странным. JS может быть странным, даже когда все работает. Задача того, кто вас собеседует – увидеть, как вы рассуждаете, как справляетесь с трудными вопросами, а также понять, насколько ваши знания технологий соответствуют требованиям.
Разберем пример. Часто на собеседованиях спрашивают про замыкания – что вернет код ниже:
for (var i = 0; i < 5; i++) { setTimeout(() => console.log(i), 1000);
}
Код вернет 5 5 5 5 5, а не 0 1 2 3 4. Если использовать let вместо var или использовать ((j) => { return () => console.log(j); })(i) – значение I будет сохранено с помощью IIFE в аргумент j в область видимости новой функции. Этот небольшой вопрос так важен, потому что он собирает в себе важные концепции языка – замыкания, контекст, область видимости, IIFE, а также let и var.
Этот вопрос задают очень часто, но есть множество других вопросов типа «почему это произошло». Отвечая, вы можете вспомнить о Event Loop — отличный момент, чтобы углубиваться в важный механизм того, «как работает JS».
Может быть еще такой вопрос «как решить эту проблему». Может, вы знаете решение, но опрашивающий может попросить более сложные решения. Например, проблему можно решить с помощью функции bind, но также есть apply и call. В чем разница? К внутренностям JS можно двигаться разными путями.
Принцип работы
Хороший разработчик должен знать принцип работы языка/технологии. Это влияет на принятие решений, поддержание производительности и другие параметры. Вы должны знать, почему необходимо использовать эту технологию, а также какие варианты еще есть. Вы должны обладать этими практическими знаниями – они того стоят.
Принцип работы веба
Что происходит, когда вы нажимаете Go в адресной строке браузера? Вы думали об этом? DNS и т.д… Да, но не только это. DNS-серверы действительно участвуют в процессе, но есть и другие части. В процессе проверяется 4 кэша для поиска карты для подходящего IP. Затем идет TCP рукопожатие и Ack сообщения, которые вы помните из лекций на степень бакалавра.
«Страницу не приносит аист, он ее не загружает и не рендерит. Вам, как разработчику, нужно знать, как это происходит.»
Что будет делать браузер после того, как HTML возвращается в него? Проходит большой процесс парсинга и рендера ресурсов, среди которых элементы, внешние и внутренние скрипты и стили. То где вы расположите теги и скрипты на внешние ресурсы повлияет на производительность и время взаимодействия. Существуют приоритеты, и браузер проделывает очень много работы.
JavaScript работает в один поток
ОК, и что? Вы подумаете об этом и поймете, почему один поток это так важно. Какие плюсы и минусы в этом? NodeJS подходит разработчикам, у которых много I/O и асинхронных событий. Он работает на основе событий. То есть тяжелые синхронные вычисления типа машинного обучения, скорее всего, не подходят для NodeJS. Кроме того, существуют другие известные языки типа Java или C#. Очень важно знать, что использовать. Все зависит от способов использования продукта.
Цикл событий, стек вызовов, очередь, куча
Еще одна часть того «как это работает» — это внутренний поток и процесс языка – механизм. Каков порядок выполнения, где хранятся все переменные, в чем разница между стеком вызовов и очередью, а также что происходит при вызове setTimeout. Как устроен мир, и как он устроен? Когда вы ответите на эти вопросы, поймете поток JS. Не ходите на собеседование на должность с JS, если не знаете этот механизм. Это критично.
Что еще очень часто задают на собеседовании – область видимости, контекст, поднятие, как реализовать энкапсуляцию в ES5 и прототип. Если у вас спросили это, не сомневайтесь, вы под полным контролем.
Асинхронные колбек-функции, Promises, Async\Await и генераторы
JS разработчики используют множество асинхронных операций. HTTP-запросы, планировщики, таймеры и I/O операции – это только часть асинхронных операций. Это не очередное свойство языка – это его хлебные крошки. Нас могут впечатлить последние разработки новых функций, мы можем проследить их эволюцию. От кошмара с колбеками до кошмара с promises и к генераторам и функциям async\await. Вы должны знать эту эволюцию и уметь ее объяснить.
ES6/7/8
JS находится в продакшене, но он постоянно обновляется. Процесс принятия новых функций в спецификацию крайне упорядоченный и сбалансированный. ECMAScript – это спецификация, формирующая основы JS. ECMAScript стандартизирован организацией по стандартам International в спецификациях ECMA-262 и ECMA-402.
TC39 официально выпустили ECMAScript 2017 в середине 2017. За последний год мы часто упоминали ECMAScript и не зря. ES6 – одна из свежих функций в мире JS. Он везде. ES6 сейчас так популярен из-за своих улучшений, которые сделали разработку удобнее (новый синтаксис и инновации). В ES появились такие вещи, как async\await, стрелочные функции, оператор расширения, структура классов и т.д.
Семантический HTML
Вы не видите визуальной разницы между div, footer, main and article, но она огромна. Семантический HTML очень важен, по многим причинам. Люди с ограниченными способностями используют скрин ридеры, а семантика влияет на порядок чтения и выполнения операций. Для вас, как разработчика, это должен быть стандарт. Легко можно сделать семантический HTML блок, а не просто div внутри div. Так вы приводите разметку к единообразию, а пользователь получает хороший UX – например, h2 на всех страницах будет выглядеть одинаково.
Иногда у вас могут возникать следующие вопросы:
Можно ли помещать div в параграф?
Когда использовать тег article?
Можно ли помещать main внутрь main?
Что лучше подходит к ссылке назад и вперед – тег a или тег button?
Ответы на множество подобных вопросов и рекомендации можно найти в спецификации HTML или на сайте W3C.
Куки, локальное хранилище или хранилище сессии
Куки, локальное хранилище и хранилище сессии широко используются. Часть из них используется почти на всех сайтах, которые вы посещаете. С их помощью можно хранить локальные настройки типа размера колонок таблицы, порядка и любимых элементов. Локальные данные (локальное хранилище или хранилище сессии) влияют на конкретный браузер, на котором они сохранены. Если необходимо влиять на все браузеры и машины пользователя, то данные нужно хранить на сервере.
С помощью кук можно проходить авторизацию и проверять надежность источника запроса. Куки автоматически добавятся в запросы, если не передать время жизни. Локальное хранилище и хранилище сессии не добавятся к запросам на сервер, к ним обращаются только на стороне клиента. Хранилище сессии доступно до тех пор, пока не закрыта вкладка в браузере. Локальное хранилище доступно и при последующих сессиях в браузере.
Локальное хранилище может сохранять толкьо строковые ключи и значения, а куки может хранить сложные объекты. Эти 3 хранилища ограничены размерами. Локальное хранилище и хранилище сессии могут содержать до 5Мб, а куки до 4Кб. Есть и другие ограничения и различия. Это частая тема на собеседовании, она может быть решением на другие вопросы.
Заключение
К собеседованию можно подготовиться. Подготовка делает вас увереннее и помогает вспомнить темы, которые вы редко используете. На подготовку рекомендуется отводить определенное время, но нужно быть внимательным. В следующей части мы продолжим разбирать подходящие и важные темы, такие как архитектура. Я расскажу вам про некоторые действия и источники, которые помогут упростить подготовку.
Автор: Dor Moshe
Источник: https://hackernoon.com/
Редакция: Команда webformyself.