Кто такой фронтенд-разработчик
Мы привыкли ассоциировать техническую часть сайта или приложения с программистом, а визуальную — с дизайнером. Однако в этом процессе есть еще одно важное звено — фронтенд-разработчик. Он связывает функционал и код сайта с его визуальной оболочкой и создает для пользователя удобный, корректно работающий продукт.
Фронтенд-разработчик — это специалист, который создает пользовательские интерфейсы. Он отвечает за всю внешнюю часть сайта или приложения, с которой взаимодействуют люди: меню, карточки товаров в интернет-магазине, кнопки, формы обратной связи. Благодаря качественной работе фронтенд-разработчика появляются быстрые и удобные сайты.
Чем занимается фронтенд-разработчик
Фронтенд работает в команде с бэкенд-разработчиком и дизайнером. Бэкендер разрабатывает техническую начинку сайта или приложения: внутреннюю архитектуру, то, как система собирает, обрабатывает и хранит данные. Дизайнер создает макет сайта: выбирает цвета, шрифты, иконки, расположение элементов на экранах. Задача фронтенд-разработчика воплотить техническое содержание сайта в визуальной форме, которую предлагает дизайнер.
Для этого он выполняет следующие задачи:
- Делает дизайн-макет живым: верстает сервис, добавляет текст, изображения, кнопки, иконки, всплывающие окна и чаты.
- Настраивает интерактивность страниц: чтобы все кнопки вели на правильные страницы и внутренние ссылки работали корректно.
- Отвечает за то, как выглядит и работает сервис на разных устройствах. За красивую и удобную или же «кривую» мобильную версию сайта тоже можете благодарить фронтендера.
Тренды профессии
За 2021 год на американском джоб-борде Glassdoor только в Америке и Великобритании опубликовали 45 тыс. вакансий фронтенд-разработчиков.
По данным сайта для поиска работы Zippia, фронтенд-разработчиков чаще всего нанимают в крупные компании, в том числе в корпорации из списка Fortune 500. Среди сфер, куда активно нанимают фронтендеров, на втором месте — технологические компании, а на третьем — финансовые организации. Также фронтендеры востребованы в ритейле.
В остальных сферах фронтендеры нужны меньше. Это может быть обусловлено тем, что для малого бизнеса выгоднее воспользоваться конструктором для создания простого сайта или продающего лендинга. Фронтенд-разработка нужна для более сложных проектов с высоким бюджетом.
Сергей Шалыгин, фронтенд-разработчик и преподаватель по JavaScript в Skillfactory:
«Сейчас появились разные конструкторы сайтов с зеро-блоками, которые уже запрограммированы. Все, что нужно сделать — это собрать из готовых элементов свой сайт. Я считаю, что такие инструменты фронтенд-разработчикам никакой конкуренции не составляют. Чаще всего конструкторы выбирают из соображений бюджета: нанять профессионального разработчика дороже, чем поручить собрать лендинг на Тильде маркетологов. Фронтендерам тоже не нужны такие клиенты: там обязательно будет много требований, при этом мало денег. Тем временем крупные компании, которым нужны сложные системы и продукты, индивидуально собранная для бизнеса архитектура, продолжат нанимать для этих целей фронтендеров. На мой взгляд, для начинающего специалиста лучше сразу выбрать IT-путь и начать учиться фронтенду. Это откроет больше путей карьерного развития: из фронтенда можно перейти в бэкенд, мобильную разработку, защиту данных. Было бы желание».
На международном рынке фронтенд-разработчик в среднем зарабатывает примерно $102 тыс. в год, это около $8,5 тыс. в месяц.
На момент написания статьи на Headhunter — 4698 вакансий по России России. По данным Habr.Карьера, за 2021 год средняя зарплата фронтенд-разработчика выросла на 21% и составляет примерно ₽149 тыс.
Какие навыки нужны фронтенд-разработчику
Создание сайта или приложения — многоэтапный процесс, в котором фронтендеру приходится сотрудничать как с бэкендером, так и с дизайнером. Чтобы охватить этот спектр задач, ему пригодятся следующие навыки.
Hard skills:
- Знать HTML и CSS — это основа. HTML позволяет создавать структуру страницы, а CSS — задавать стили: то, как будут выглядеть заголовки, подписи, таблицы, графики.
- Знать JavaScript. Это язык, который позволяет делать страницы интерактивными и связывать их между собой.
- Уметь пользоваться системой управления версиями Git и сервисом GitHub, чтобы хранить все версии кода в одном месте и работать над ним совместно с командой.
- Освоить фреймворки для работы с JavaScript: Vue.js, React.js.
- Понимать основы юзабилити сайтов и сервисов, принципы кроссплатформенной верстки, чтобы создавать удобные для пользователя интерфейсы.
- Базово пользоваться Figma или Photoshop, на случай, если нужно будет быстро что-то перерисовать без помощи дизайнера.
- Знать этапы и специфику веб-разработки, чтобы общаться с бэкендером на одном языке.
Soft skills:
- Уметь работать в команде. Не тянуть на себя одеяло, но проявлять экспертизу и отстаивать свои границы, находить компромисс.
- Английский язык для чтения технической документации, обучения и работы на международном рынке.
- Готовность постоянно учиться. Это пригодится, особенно на первом этапе, потому что в разных компаниях разные требования к фронтенд-разработчику. Где-то вам нужно будет осваивать графические редакторы, где-то — новые фреймворки, где-то — больше вникать в бэкенд.
- Упорство. Понадобится, чтобы пережить первые 100 отказов при приеме на работу и найти команду мечты.
Сергей Шалыгин:
«Я проходил трехмесячную стажировку в одной компании, итогом которой должен был стать самостоятельно выполненный проект. Тогда мы писали приложение для учебных заведений России. Мне поставили квалификационную задачу: создать отдельную страницу в приложении с новой формой захвата и со своими правилами. Чтобы решить эту задачу, мне нужно было применить все навыки, которые я приобрел за время стажировки, и даже немного больше. Проблема была в том, что меня никто не учил, на три месяца меня бросили один на один с огромным legacy-кодом (код, который достается разработчику от предшественников, часто в нем есть много нерасшифрованных сокращений, решений без пояснения). По отдельности с задачами я справлялся и чему-то сам учился. Но квалификационный проект казался мне необъятным.
Я собирал решения по крупицам, что-то выспрашивал у коллег. Они были не очень отзывчивыми, поэтому приходилось выуживать, спрашивать аккуратно о другом, чтобы узнать нужную мне информацию. Решить задачу мне помогло упорство, ежедневный труд, я думал о задаче даже вне работы. В итоге я все выполнил, но меня все равно уволили. Однако я еще в самом начале пути решил, что не сдамся, пока число отказов не дойдет до сотни. Тогда можно будет думать, подходит ли мне профессия. Большинство историй успеха — о том, чтобы не бояться неудач, давать себе время развиваться и двигаться вперед. Этот позитивный настрой очень помог мне на старте».
Откуда приходят в профессию
Фронтенд-разработчик — это профессия со средним порогом входа, которую при желании можно освоить с нуля. Ближайшая к ней более простая специализация — верстальщик в вебе. Верстальщик занимается только HTML и CSS версткой сайтов или приложений, не отвечает за интерактивность и никак не связан с бэкендом.
С этой базы можно начать брать небольшие заказы на верстку и параллельно осваивать JavaScript и основные JS-фреймворки, чтобы повышать квалификацию до фронтенд-разработчика. В перспективе фронтенд-разработчик может расти по грейдам от джуниора до сеньора, а затем становиться тимлидом или развиваться горизонтально.
Сергей Шалыгин:
«Чаще всего фронтендеры уходят в мобильную разработку: iOS, Android или кроссплафторменную. Также достаточно близкая сфера — бэкенд, мы постоянно сотрудничаем с бэкендерами, они присылают нам материал, мы его обрабатываем. Достаточно выучить PHP или Python, чтобы начать развиваться в бэкенд-разработке. Если есть управленческие амбиции, можно стремиться в тимлиды, а потом становиться хорошим продакт-менеджером, который разбирается в кодовой части сервиса».
Как стать фронтенд-разработчиком
Научиться фронтенд-разработке можно как самостоятельно на бесплатных материалах, так и на онлайн-курсах с кураторством. Однако для того, чтобы пойти на курс, для начала стоит получить минимальную базу самостоятельно. Например, ознакомиться с HTML и CSS, основами Web-разработки на YouTube, полистать бесплатный учебник по JavaScript, попробовать свои силы в бесплатных тренажерах (например, от HTML Academy).
Сергей Шалыгин:
«Хороший вариант — учиться на практике под руководством ментора. Можно, например, воспользоваться сервисом GetMentor. На нем можно найти платного или бесплатного консультанта, который поможет разобрать сложные задачи и поделится опытом. Также поискать опытного программиста можно по друзьям и знакомым. Важно показать ментору свою заинтересованность. Я, например, готов тратить свое время на обучение новичков, но мне важно, чтобы человек также отдавался этому, как я. Иначе мне просто нет смысла тратить время, мой час с каждым годом стоит все дороже».