То есть фронтенд разработчик — это специалист, отвечающий за ту часть сайта или приложения, с которой взаимодействует пользователь.
На его плечи ложатся следующие задачи:
· реализовать задумку дизайнера — сделать из картинки работающий код
· добиться, чтобы все корректно отображалось в разных браузерах, на различных устройствах
· «оживить» дизайн: заставить работать кнопки, ссылки, формы, бургеры меню, аккордеоны, слайдеры, табы, онлайн-калькуляторы и другие элементы пользовательского интерфейса
· организовать подготовку данных к отправке на сервер или в стороннее приложение (по API)
В общем, он отвечает за все, что видит и с чем взаимодействует пользователь: UI, UX и «иже с ними». Сферу ответственности Front-end разработчика хорошо иллюстрируют следующие картинки:
Неважно, что там «за занавесом», главное, чтобы у пользователя все летало и было чистенько-красивенько.
Фронтендеры владеют самыми распространёнными инструментами. Но они всё равно в дефиците
Посмотрите на свежий рейтинг наиболее часто используемых языков программирования и технологий, подготовленный Stack Overflow (за 2020 год):
2 из 3 позиций в ТОПе занимают инструменты фронтенд разработчика — JavaScript и HTML/CSS. Казалось бы, таких специалистов на рынке больше всего, значит, и проблем с их поиском быть не должно. Ан нет. Потребность во фронтендерах из года в год растет. Ведь спрос на сайты, web-приложения, CRM-, BPM- и другие решения для бизнеса увеличивается, а при создании интерфейса без фронтенд-разработчика не обойтись. Так что не верьте в сказки типа: «Рынок Front-end разработчиков перегрет». Поиск хорошего фронтендера — это такой же квест, как и подбор любого другого IT-специалиста. Тем более, эта сфера развивается очень быстро — появляются новые подходы инструменты, эволюционирует JavaScript… Если фронтендер не будет следить за трендами, а остановится в развитии, хватит и пары лет, чтобы из хорошего специалиста превратиться в кодера с посредственными знаниями, коих вокруг миллионы.
Языки программирования и технологии, которыми должен владеть фронтенд разработчик
Как и в любой IT-профессии, во фронтенде есть свой must have, которым должен обязательно владеть любой специалист, и «ответвления», которые выбираются, исходя из специфики работы и того, в каких проектах будет работать Front-end developer.
Must have для любого фронтендера, или 3 столпа, без которых не зайти в профессию
Базис для фронтенд-разработчика включает:
· HTML — язык гипертекстовой разметки (не является языком программирования). С его помощью структурируются веб-страницы. Т.е. HTML дает браузеру понять, из чего состоит страница, какие на ней есть блоки, какого вида информация содержится в каждом из них. Можно сказать, что на HTML строится «скелет».
· CSS — стандартный язык таблиц стилей, описывающий представление веб-страницы. Т.е. при помощи CSS структура, созданная на HTML, обретает дизайн. Этот язык определяет, как должны выглядеть и вести себя элементы веб-страницы, он отвечает за цветовое оформление, размеры шрифтов, графические эффекты, позиционирование элементов и пр. Это своего рода «мясо» для HTML-«скелета», при помощи которого страница обретает удобный для восприятия вид и дизайн.
· JavaScript — язык программирования, при помощи которого веб-страница или приложение «оживает» и становится интерактивной. С его помощью обрабатываются действия пользователей (например, что должно происходить при нажатии на кнопку), организуется взаимодействие с Back-end частью, реализуются различные сценарии и пр.
Не лишним будет добавить к базису еще и TypeScript. По сути, это расширенный JavaScript, строго типизированный и компилируемый, благодаря чему облегчается тестирование и поиск ошибок в коде. TypeScript и JavaScript имеют взаимную совместимость. Так что, если специалист знает JavaScript и никогда не работал с TypeScript, это не проблема. Он быстро разберется при необходимости.
Другие технологии и инструменты Front-end разработчика, или совершенству нет предела
На рассмотренный выше базис «наслаивается» немалое количество инструментов и технологий, которыми может владеть фронтендер (и должен, в зависимости от специфики проекта или компании, для которой ищется специалист).
Среди них:
· CSS-препроцессоры SASS/SCSS и/или LESS. С их помощью значительно ускоряется создание CSS-кода, на выходе получается быстрый, валидный CSS без кучи повторов, которые влияют на скорость отрисовки интерфейса.
· PUG. Это HTML-препроцессор и шаблонизатор. Выполняет функцию, аналогичную описанной в предыдущем пункте, но уже для HTML. Т.е. с его помощью значительно ускоряется создание HTML-кода.
· Адаптивная кроссбраузерная верстка. Flex-box, Grid, работа с медиа-запросами, SVG-спрайтами, WebP-форматом изображений и пр. Это не должно пугать кандидата на должность Front-end разработчика.
· GULP. Это таскраннер, автоматизирующий шаблонные процессы, и опять же, ускоряющий процессы web-разработки. С его помощью фронтендер сможет, например, объединить все .js или .css файлы в один с минимизированным кодом, или сжать картинки для ускорения их загрузки, перевести код из SCSS в CSS, быстро подключить библиотеки без кучи ссылок <link> и <src> в HTML и пр. Чаще всего этот инструмент используют для сборки верстки.
· Webpack. Его позиционируют как комбайн-бандлер. Назначение примерно такое же, как и у предыдущего инструмента. Но здесь более широкий функционал. «Вебпак» чаще всего используют для сборки JavaScript.
· Git и другие системы контроля версий. Фронтенд разработчику необходимо знать их, чтобы успешно работать в команде. Такие решения позволяют членам команды отслеживать процесс разработки и не зависеть друг от друга (каждый работает над своим куском кода, потом все объединяется в единые файлы). Если вдруг кто-то что-то случайно «сломал», системы контроля версий позволяют легко исправить ошибку и откатиться до последней работающей версии.
· JavaScript библиотеки. Их огромное количество. Одна из самых популярных библиотек — JQuery. Она облегчает написание кода — одной строчкой можно реализовать то, что на чистом JS требует написания большого количества кода. На JQuery разработано множество популярных слайдеров, динамических эффектов и прочих решений, которые подключаются к проекту быстро и удобно (они протестированы и обкатаны «в бою» — для большинства случаев удобнее, чем лепить что-то свое с костылями). Библиотека постепенно уходит на второй план. Но если придется работать с действующими старыми проектами, фронтендер наверняка будет сталкиваться с JQuery — куча популярных слайдеров написана на ней, JQ применяется для создания визуальных и иных эффектов и т.д. Набирает популярность Redux (эта библиотека — менеджер состояний, который становится мощным дополнениям к фреймфоркам и другим инструментам).
· JavaScript фреймворки. Если библиотеку можно рассмотреть, например, как готовый шкаф, который вы покупаете для квартиры, то фреймворк — это квартира, в которой вы делаете ремонт, покупая для нее мебель, занимаясь отделкой и пр. Это как набор библиотек, объединенный в некий «полуфабрикат» приложения. Самые популярные JavaScript-фреймворки: Angular и Vue.js. Немалой популярность пользуется React.
· Bootstrap и другие CSS-фреймворки. Это тоже своего рода «полуфабрикаты», но для работы с CSS, для создания разметки и дизайна страницы.
· Node.js. Это среда, позволяющая выполнять JavaScript вне браузера. Т.е. если фронтендер хорошо знает «Ноду», это круто. Значит, у него есть потенциал для участия в разработке бэкэнда, игровых и других видов продуктов. А там уже и до Full Stack недалеко — фронтендер, разбирающийся в бекенде, вполне может стать фулл-стек разработчиком.
Конечно же, не лишними будут и знания смежных технологий. Если фронтендер понимает, как работают базы данных, знаком с основами PHP или Python, ему легче будет найти общий язык с Back-end программистами. Если Front-end программист знаком с веб-дизайном, он может что-то поправить в дизайне для улучшения UI и UX.
Важный момент — личные качества. Если вы ищете фронтендера с перспективой развития в тимлида, важны навыки коммуникации. Ведь такому специалисту придется общаться и с клиентами, и с фронтендерами, и с бекендерами, и с менеджерами. В общем, чем больше такой специалист знает и умеет, тем лучше.
Где искать и как оценивать Front-end разработчиков
Где искать таких специалистов? Вариантов масса. Например, hh.ru только по Москве находит почти 5000 резюме фронтендеров.
Не пренебрегайте Linkedin. Для качественного и более точного поиска потенциальных кандидатов советуем освоить логические операторы и поиск Boolean Search. Увидите, эффект от этого будет неплохой.
Телеграм — также мощный инструмент. Здесь можно «выцепить» даже специалиста, который не ищет работу открыто, а где-то там в глубине души у него начинает зарождаться такая мысль. Кто знает, может, ваш кандидат подписан на один из тематических каналов или чатов.
Вот несколько мест, где можно опубликовать объявление о поиске Front-end разработчика (конечно же, предварительно изучите правила и свяжитесь с админом при необходимости):
· https://t.me/projs_ru — чат для JS разработчиков
· https://t.me/devschat — сообщество web-разработчиков
· https://t.me/react_js — русскоговорящее сообщество React
· https://t.me/angular_ru — русскоговорящее сообщество Angular
· https://t.me/web_structure — сообщество верстальщиков и других специалистов, связанных web-программированием
· https://t.me/freelancetaverna — канал «Фриланс Таверна». Кто знает, может, кто-то из фрилансеров-фронтендеров захочет на full time
· https://t.me/freejobit — чат JOBIT
Конечно, это малая часть «годноты» из Телеграма для тех, кто ищет Front-end девелоперов. Ищите, как говорится, и найдете.
Во ВКонтакте и на Facebook также немало сообществ, где можно найти фронтендера. Вот несколько полезных ссылок для поиска в «Фейсбуке»:
· MoscowJS — сообщество тех, кто связан с JS и сопутствующими технологиями
· freeCodeCamp Moscow — группа, объединившая московских (и не только) разработчиков. Спецы по фронтенду здесь тоже есть
· Интернациональный клуб тестировщиков. Сообщество не совсем про фронтенд. Но практика показывает, что многие тестировщики желают перейти в разработчики. А здесь, как-никак, более 7000 участников. Кто знает, может и фронтендера своего вы здесь найдете
Что касается ВКонтакте, можно поискать в этих местах: For Web — фронтенд, дизайн, программирование, CSS-live – Сообщество про HTML, CSS и JavaScript, Фронтенд-вдохновение, Веб-стандарты, JavaScript Kitchen, PHP, JavaScript, jQuery, CSS, HTML, Web /> HTML CSS JavaScript PHP Python, Love Front-end.
Внедряйтесь и ищите специалистов там, где другие и не думают
Неплохой вариант — поиск специалистов на онлайн-курсах. Вы регистрируетесь на них в качестве ученика и получаете доступ к контактам огромного количества потенциальных соискателей. Конечно, это зависит от курсов. Найти такие, где все открыто, проблематично. Но реально. Пример — курсы по Front-end (и не только) от Rolling Scopes School. Это — сообщество энтузиастов, обучающих специалистов бесплатно. Набор у них примерно 2 раза в год. И здесь не только новички. Среди обучающихся множество айтишников из других сфер, желающих перейти во фронтенд. Также есть доступ к контактам опытных разработчиков, которые выступают здесь в роль менторов. База немалая — более 6000 специалистов.
м
Junior, Middle и Senior фронтенд разработчики.
Как сформировать критерии для поиска специалиста
Сразу отметим, что деление на Junior, Middle и Senior условное и какой-то четкой грани между этими уровнями нету. Джун в одной компании вполне может стать мидлом в другой. И наоборот, мидл в какой-то малюсенькой студии, клепающей сайты конвейером, может с удивлением обнаружить, что у него не хватает знаний, чтобы устроиться в более-менее крупную аутсорсинговую или продуктовую компанию.
Но все-таки давайте попытаемся определить хотя бы примерные критерии.
Итак, Junior Front-end разработчик может не иметь опыта продуктовой разработки. Но HTML и CSS должен знать на высоком уровне. Также нужны уверенные знания JavaScript и базовые — фреймворков (на уровне «Сейчас посмотрю документацию и сделаю как надо» или «Спрошу у мидла, он это уже проходил»). Требовать от джуна «элегантного», легкого кода не всегда уместно.
Middle — это специалист с опытом (от года или другой срок — все зависит от него самого и специфики проекта). Он разбирается в продвинутых аспектах языка, знает, как написать код так, чтобы он требовал меньше вычислительных мощностей. Мидл понимает не только код. Он уже «сечет» в процессах, происходящих в командах. Также очень важный момент — способность декомпозировать большие задачи, не бояться огромных кусков кода и пр. Он свободно ориентируется в React, Angular или Vue.js (в зависимости от специфики компании), отлично знает ванильный JS, делает предложения по проекту, его архитектуре и берет наставничество над джунами.
С Senior сложнее. Этот специалист больше не про код, а про проект. Такой специалист имеет в активе ряд успешно запущенных проектов, он может четко оценить объемы работы, разбирается в бизнес- и других процессах. Т.е. он должен уметь с нуля спланировать и запустить проект.
Понравилась статья? Подпишитесь на рассылку и получайте подборку статей, лайфхаков, видео и другого интересного контента!