Доброго времени суток, друзья. Если вы читаете эту статью, то скорее всего вы находитесь в начале пути становления frontend разработчиком и не имеете понимания о том, что вам потребуется выучить, чтобы соответствовать требованиям этой IT профессии. Хочу сразу вас предупредить, что все нижеперечисленные пункты являются не обязательными и, как правило, очень специфичны для каждой конкретней вакансии. Я попытаюсь описать среднестатистические требования, на которые с вероятностью 95% вы наткнётесь, обивая пороги IT компаний.
Вы можете подумать, кто я такой и почему пишу про это? Более 5 лет я занимаюсь именно frontend разработкой и формированием команд. За время своей профессиональной деятельности я бывал с обеих сторон «барикад», проходил большое количество собеседований в разных компаниях и сам проводил собеседования как для разработчиков уровня junior, так и senior. Имея весь этот опыт, я постараюсь рассказать вам о реальных требованиях, которые сейчас актуальны для рынка frontend разработчиков.
Видео на эту тему.
Разница между верстальщиком и frontend разработчиком
Прежде чем я перейду к описанию конкретных навыков и знаний, давайте сначала определим понятие frontend разработчика. Сейчас часто можно услышать от опытных коллег следующее утверждение:
«Современный фронт не является верстальщиком в реалиях 2020 года».
На него можно ответить и да, и нет. Дело в том, что в 2010 году понятие frontend разработчика еще не существовало (в текущем виде) и весь стек делился на backend разработчиков (разработка серверной части приложений) и на верстальщиков (верстка интерфейса, добавляя интерактивность, используя js, jquery). Часто эти две специализации вовсе не делились и превращались в единого full stack разработчика, или, как раньше говорили, вебмастера. Как правило, верстальщик или вебмастер, благодаря усложнению интерфейсов, появлению библиотек и фрэймворков для создания более сложных интерфейсов, со временем мигрировали во frontend.
Для олдсткульных разработчиков, которые начинали с верстки, реализовывать любую сложную верстку не является какой-то проблемой. Соответственно, frontend с таким опытом может хорошо верстать, при этом реализовывая сложную frontend систему. Буквально лет 5 назад стали появляться разработчики, которые изначально не занимались версткой, а вели разработку, используя лишь React, Angular и т.д. В этом и заключается раскол текущего понимания, что должен, а что не должен уметь и знать frontend разработчик.
Я отношусь к первой категории «олдовых» фронтов и буду озвучивать вам важность знания верстки как необходимого фундамента для вашей эффективной работы, вы можете с этим быть не согласны, но как показывает бизнес практика, часто нанимается разработчик для работы например на React, Redux, при этом вероятность, что его будут просить сверстать страничку лендинга или информационного портала, очень велика. Нанимать отдельно верстальщика и frontend разработчика – расточительное занятие для компаний и очень мало кейсов, когда работодатель решается тратить на это свои ресурсы (но как я говорил выше, бывают исключения).
Прежде чем мы перейдем к рассмотрению требований, предъявляемых к junior frontend разработчику, перечислю основные требования, которыми должен обладать верстальщик, для вашего лучшего понимания.
Требования к верстальщицу
HTML (HTML5)
Для верстальщика понимание HTML является одним из самых главных знаний, которые требуются в работе. HTML это кирпичи, из которых вы создаете интерфейс. Можно отнести сюда же семантическую верстку — это умение использовать нужные семантические теги в верстке сайта для SEO оптимизации. Адаптивная верстка, иногда называется мобильной версткой и все что связано с адаптивностью макетов можно отнести сюда. Потребность в адаптивных интерфейсах появилась уже давно, еще в момент активного развития смартфонов, поэтому это must have.
CSS
Таблицы стилей дают нам возможность рисовать на нашей HTML разметки. Современный CSS очень продвинулся, появилась возможность работы с переменными, циклами и др. Все это попытки расширить CSS до возможностей препроцессоров. Лет 10 назад было важно уметь верстать таблицами, а после стали использовать float. Сейчас те же задачи намного гибче и легче, поскольку их можно решить, используя flex box и grid.
Препроцессоры
К ним относятся LESS/SASS/SCSS и другие. Препроцессоры дают автоматизацию на уровне большей абстракции над CSS. То есть мы пишем меньше кода, используя концепцию DRY(Don’t repeat yourself) и модульность, в результате препроцессоры на выходе генерят нам полноценный CSS. Тут все просто, препроцессоры необходимо знать хотя бы на уровне концепции, а при необходимости изучить какой-то конкретный по документации не займёт у вас много времени при хорошем знании CSS.
JavaScript
Вся база JS необходима как верстальщику, так и frontend разработчику, просто потому, что решение любой сложной задачи возможно именно благодаря этому языку программирования. Если требуется интерактивность на страницах или работа с формой, то без JS не обойтись.
jQuery
Библиотека, которая сильно упростила жизнь миллионам разработчиков, расширив стандартный API браузера в виде более лаконичных синтаксических конструкций, до сих пор является очень популярной либой, хотя и современный JavaScript давно перенял лучшие практики из jQuery и обзавелся удобными методами для работы.
Понимание работы CMS
Если у вас есть сайт, то с большей вероятностью он имеет какую-то CMS. Это готовая система для управления контентом сайта. Пользователь без знания языков программирования в админке может сам добавлять нужный контент, менять блоки, скрывать или удалять ненужные элементы. Верстальщицу необходимо знать несколько популярных CMS, чтобы при необходимости уметь создавать для него шаблон или сверстать нужную страницу.
Git
Если вы работаете в команде, то Git необходим вам просто для работы с актуальным кодом. Представьте проблему: другой разработчик сделал правки на вашем общем проекте и решил передать его вам. Без Git ему пришлось бы скинуть вам архив, с которым вы смогли бы продолжить свою работу. Допустим, вы вносите изменения в код, и в это же время другой разработки также вносит свои изменения. Возникает конфликт, и ваш код придется «мерджить руками», чтобы ваша общая работа была успешно выполнена. Все эти проблемы решает Git, больше тут нечего сказать, это точно must have.
Без умения гуглить в современном мире невозможно быть успешным и это уже давно не шутка. Любые ваши проблемы, с которыми вы сталкиваетесь в разработке, с вероятностью 99%, уже были реализованы другими разработчиками. Вам остается найти нужный материл и применить у себя. Количество информации с каждый днем растет с математической прогрессией и одному человеку невозможно сейчас знать все. Современные поисковые системы дают быстрый доступ к нужной информации, остается лишь сформулировать вопрос. Да, для того, чтобы найти больше информации лучше производите поиск на английском языке, о чем мой следующий пункт.
Английский язык
Большая часть информации в мире написана на английском языке, тем более для IT специалистов, документация (особенно если она новая) будет преимущественно на английском. Никто не говорит, что вы должны знать английский на высоком уровне, уметь прекрасно разговаривать с любым носителем и вести деловую переписку. Нет, необходимый уровень это умение читать простой технический текст. Это важно, старайтесь постоянно повышать свой уровень английского языка, если вы хотите преуспеть в этой сфере.
Soft skills
Самый на мой взгляд недооценённый пункт. Думаете, что все разработчики интроверты и им не важно умение отстаивать свое мнение, вести переговоры, уметь рассказать менее опытному разработчику, как выполнить ту или иную задачу? Если вы так думали, то спешу вас заверить, что любая работа в команде, а современное IT – это как правило командная работа, подразумевает умение взаимодействовать с коллегами и от ваших soft skills будет зависеть, как быстро вы продвинетесь по карьерной лестнице. Умение себя продать – не менее важный навык, чем ваши профессиональные знания. Всегда помните об этом!
Требования junior frontend разработчиков
HTML
На мой взгляд frontend разработчик должен обладать всей той базой, что и верстальщик. Если вы не знаете HTML, то создание SPA будет для вас чем-то магическим.
CSS
Тоже база, тоже must have. И тут разработчики второй категории могут возмутиться, что данную работу должен выполнять верстальщик. Я считаю, что если вы не знаете CSS, хотя бы базово, с возможностью создания адаптивного дизайна, верстки по макету, то во frontend вам рановато.
Препроцессоры
В любом современном фреймворке (библиотеке), будь то React, Angular или Vue часто используются препроцессоры. Ну просто потому, что это классика и гораздо проще найти человека, который с этим уже работал. Имеется ряд более современных подходов, например: модули, CSS-in-JS, styled components, но все они лишь обертки поверх ваших знаний по использованию CSS и препроцессоров.
JavaScript
Главной ошибкой современных разработчиков и школ программирования является отсутствие обучения базовому JavaScript, а быстрый переход на React, Angular и тд. Без отсутствия необходимого фундамента по JS вы не сможете понимать суть таких высоких абстракций, которые дают нам современные фреймворки. Часто такие «специалисты» не могут найти простые ошибки, что приводит меня в ужас.
Здесь я укажу необходимый минимум ваших знаний по JavaScript (со ссылками по некоторым из них на мои статьи):
— Переменные
— Типы данных
— Операторы
— Преобразование типов
— Циклы
— Функции
— Контекст (this).
— Иметь базовое представление о генераторах, итераторах
— fetch
— Promise
— async/await
— Работа с DOM
Git
О важности знания Git я уже писал выше. Не умея работать с ветками и мерджить конфликты, вы не сможете разрабатывать по таким модным методологиям как Scrum, Agile.
Тут тоже все ясно. У вас в руках есть очень крутой инструмент поиска информации. Начинающие разработчики часто делают большую ошибку и лезут со множеством бестолковых вопросов к синьорам в компании, хотя ответ на интересующий их вопрос уже 100500 раз был озвучен в огромном количестве статей и видео материалах на YouTube. Просто начните пользоваться поисковиками и скорость и эффективность вашей работы будут расти. Я сам с недавних времен стал переходить на видео формат, если вам интересны мои материалы, вот мой YouTube канал.
Английский язык
Раз вы целитесь на frontend разработчика, то могу сразу вас убедительно заверить, что английский вам потребуется больше, чем верстальщику. Для фронтенда имеется большое количество материалов на английском по любой теме, и без умения элементарно прочесть или понять на слух нужную информацию, скорость вашего будущего развития сильно замедляется. Не думайте, что без английского вы не сможете вовсе работать, это большое заблуждение. В первую очередь английский поможет вам развиваться как специалисту, но даже без этого языка, сейчас вы сможете найти большое количество полезной информации (например, на этом сайте) по любой теме и даже успешно работать. Но если ваши амбиции идут далеко за русскоговорящие сообщества, то думаю вам пора начать учить английский.
Soft skills
Все тоже, что я написал выше про верстальщика. Умение продать себя в современных реалиях – необходимый навык, просто чтобы быть успешным и получать достаточное вознаграждение за ваш труд. Старайтесь больше читать и коммуницировать, все это позволит вам развивать soft skills.
React, Angular, Vue
Почему я поставил знание библиотек и фреймворков на последнее место? Если вы уже обладаете всеми перечисленными знаниями и навыками, то освоение данных технологий не займет много времени. Для обучения React разработчика с нуля до уровня junior у меня уходило от 2 до 4 недель, а Vue и того меньше. Самая большая кривая обучения будет у Angular, но и тут имея всю базу, вы потратите гораздо меньше времени, как если бы просто начали с изучения этой технологии. Без понимания HTML, CSS, JS вы не сможете стать настолько крутыми разработчиками, насколько это возможно. Это подтверждает опыт моих учеников и мой собственный.
Заключение
Помните, что все эти знания не гарантируют вам успешное трудоустройство. Для вашего работодателя всегда будет важно решение его проблем, а значит всегда ценится тот специалист, который может решить уникальные задачи, необходимые бизнесу. Не отчаивайтесь, если вы сразу не получите оффер. Просто продолжайте совершенствовать свои навыки и знания, и успех обеспечен. Приобретая опыт собеседований и пополняя свои знания, дотягивая их до необходимого уровня, вы непременно получите желаемую работу. Как и в любом деле, главное ваша упёртость и трудолюбие. Надеюсь, что данный материал был вам полезен. Учитесь, думайте, пишите код. Удачного кодинга, друзья!
Подписывайтесь на наш канал в Telegram для получения самой последней и актуальной информации.
Комментарии: