Фронтенд-разработчик — как боец на передовой: берёт на себя ту часть сайта, которую видят пользователи, то есть мы с вами. Он отвечает за то, с чем пользователь может взаимодействовать, что он слышит, на что может нажать. Работа фронтендера — интерфейс и функции клиентской стороны сайта.
Читайте нашу статью о том, кто такой frontend-разработчик, как им стать, чем он занимается и какие возможности есть в профессии.
Кто такой frontend-разработчик
Представим, что мы хотим купить что-то в интернет-магазине одежды. Заходим на сайт, пролистываем анимированные баннеры, смотрим все акции, видим окно онлайн-консультанта и поле для ввода данных. Логинимся, кликаем по кнопке «Войти».
Вход в личный кабинет на Lamoda
Всё, что мы видели и делали на сайте до сих пор — зона ответственности фронтендера. И она крайне важна — криво сделанный фронтенд (клиентская сторона пользовательского интерфейса к программно-аппаратной части сервиса) сведёт на нет все усилия бэкенда.
Фронтенд и бекэнд тесно связаны, их взаимодействие происходит по кругу. Фронтенд отправляет информацию в бекэнд. Там она обрабатывается и возвращается фронтенду, чтобы он придал ей понятную форму. Каждый из специалистов должен хотя бы в общих чертах представлять, что происходит на противоположной стороне.
Чем занимается фронтенд-разработчик:
- принимает участие в разработке и поддержке проекта;
- взаимодействует с другими членами команды (дизайнеры, аналитики, тестировщики).
Отличия от web-разработчиков и верстальщиков
Вакансия с задачами фронтендера может называться как угодно: верстальщик, HTML-верстальщик, фронтенд-разработчик, веб-верстальщик, web developer. Работодатели не всегда понимают, чем одна специализация отличается от другой.
Поскольку фронтенд-разработка развивается бешеными темпами, знать нужно всё больше. В определённый момент из неё выделилась html-вёрстка и появилась ещё одна профессия — верстальщик. Верстальщик — это фронтендер узкой специализации.
Если отобразить схематично, кто из кого «вышел», будет так:
Схема подспециальностей в разработке
Теперь подробнее о различиях между фронтендером и верстальщиком.
| Верстальщик | Фронтенд-разработчик |
| Делает из графического макета HTML+CSS страницу. |
Делает из графического макета HTML+CSS страницу + Может писать на JavaScript, знает библиотеки и фреймворки, делает так, чтобы макеты были наполнены реальными данными. |
| Работает в основном только с макетами дизайна. | Выполняет всю логику, написанную в основном на JavaScript. |
| Работает без погружения в бэкенд. | Работает с частичным погружением в бэкенд. |
| Знает типовые решения JavaScript, чтобы реализовать простые вещи, которые заложены в макет. | Глубоко знает JavaScript, включая использование библиотек и готовых фреймворков. |
| Порог входа в профессию более низкий, можно начать работать, если у вас минимальный опыт в разработке. | Более опытный разработчик. |
Преимущества и недостатки профессии
Фронтенд притягивает в свои ряды новобранцев хорошей зарплатой и интересными задачами. Но есть и другие плюсы.
Можно быстро найти работу. Рынку всегда нужны фронтендеры (в сентябре 2021 года на hh.ru в одном только Санкт-Петербурге есть 1 206 вакансий по запросу «фронтенд разработчик»).
Актуальные навыки. JavaScript входит в число самых популярных и востребованных языков программирования.
Удалённая работа. Профессия позволяет работать откуда угодно.
Простор для творчества. Фронтендер решает нетривиальные задачи на стыке дизайна и разработки.
Сложности в профессии тоже есть, как и в любой другой.
Придётся много учиться. Технологии во фронтенде обновляются каждые полгода, так что постоянное прокачивание навыков — ваше всё (применимо почти к любой профессии в IT и digital).
Серьёзные требования. Технологический бум налицо, требования даже к начинающим фронтенд-разработчикам довольно обширны. Чтобы начать работу в IT, нужно хорошо освоить довольно много технологий.
Размытый функционал. Иногда фронтендер это ещё немного аналитик, дизайнер и бэкендер.
Востребованность профессии
Пара кликов на сайте hh.ru — и мы видим, что в России в сентябре 2021 года есть 7 753 вакансии по запросу «Frontend разработчик». В нашу эпоху цифровизации почти у каждой компании, государственной или некоммерческой организации есть свой сайт или приложение. А значит, спрос на фронтенд-специалистов будет расти и расти.
Зарплата
Сайт «Хабр Карьера» в июле 2021 года пишет, что медианная зарплата* фронтенд-разработчиков в России составляет 120 000 ₽. За первое полугодие 2021 года зарплаты айтишников выросли на 6,2% за счёт роста в регионах.
Динамика роста зарплат IT-специалистов на сайте habr.com
Издание Forbes Russia пишет, что предложение IT-специалистов вряд ли догонит спрос в ближайшие пять-десять лет. Сегодня айтишники нужны всем, не только технологическим компаниям, поэтому спрос на разработчиков превышает предложение.
Вакансии фронтенд-разработчика на hh.ru
Опытные разработчики с задачами руководителя могут зарабатывать 300 000 ₽ и больше.
Вакансия фронтендера из Telegram-канала
Карьерный рост
Фронтендер может развиваться горизонтально, то есть расти как специалист и, соответственно, расти и в зарплате. Либо пойти вертикальным путём и стать senior-разработчиком с широким кругозором, уметь с нуля реализовывать архитектуру проекта и выбирать подходящий стек технологий.
Можно также освоить бэкенд и стать fullstack-разработчиком, чтобы вести проекты самостоятельно и получать более крупный доход.
Что должен знать frontend-разработчик
К frontend developer достаточно высокие требования в плане базовых умений, в разработку в принципе нельзя прийти совсем «нулевым». От начинающих фронтендеров без опыта обычно ждут этот набор:
- HTML,
- CSS,
- JavaScript.
Когда-то этого было достаточно, чтобы начать работу. Сейчас фронтенд оброс целой экосистемой инструментов. С одной стороны, они облегчают и ускоряют работу разработчика. С другой — начинающего фронтендера порой пугает количество технологий, в которых нужно ориентироваться.
Базовые навыки
Помимо базового набора, работодатели ждут, что фронтендер будет соответствовать ещё ряду минимальных требований. Итак, что должен знать фронтенд разработчик.
- HTML;
- CSS;
- JavaScript;
- фреймворки на выбор — Vue, React или Angular (+ дополнительные библиотеки, под каждый фреймворк они свои);
- препроцессоры Sass (SCSS), Less, Stylus (хотя бы два из перечисленных);
- знание адаптивного дизайна, кроссбраузерной/кроссплатформенной совместимости сайтов и приложений;
- опыт работы в одной из популярных CMS;
- понимание того, как работает бэкенд, и принципов взаимодействия с бэкендом (REST, SOAP);
- опыт работы с Git;
- знание графических редакторов (Figma, Photoshop, Illustrator и прочие).
Список можно продолжать и дальше, но важно понимать, что всё знать нереально. Главное — постоянно прокачивать навыки.
Основы HTML и CSS
HTML и CSS — «хлеб» фронтендера. Навыки вёрстки и оформления веб-страниц обязательны, это база веб-разработки.
Как раз HTML и CSS отвечают за то, как сайт будет выглядеть в браузере. Можно освоить их самостоятельно, заручившись поддержкой Google и Яндекса. Очень важно сразу применять всё на практике, например, создавая подобия сайтов.
На начальном этапе важно не выучить всё, а получить представление о языках, атрибутах и возможностях. Когда вы в принципе понимаете, что вам нужно, вы можете быстро загуглить конкретный вопрос.
Git и Github
Git — самая популярная система контроля версий. Её можно использовать для фиксации истории разработки проекта и параллельной разработки разных задач.
GitHub — по сути визуальный интерфейс для работы с Git. Создатели называют его «социальной сетью для разработчиков». Кроме размещения кода, участники могут тут общаться и комментировать правки друг друга.
Эти системы помогают команде совместно работать над одним проектом, сохранять изменения и следить за выполнением задач каждым членом группы.
Развёртывание веб-сайта
Когда вы уже знаете HTML и CSS, можно создавать простые веб-сайты. Но, чтобы пользователи могли найти результаты ваших трудов, нужно разместить сайт в интернете. Раньше это было не так просто сделать, но сейчас в арсенале фронтендера есть такие инструменты, как сервисы хостинга и развёртывания для проектов статичных сайтов вроде GitHub Pages или Netlify.
JavaScript
JavaScript — одна из базовых технологий в арсенале фронтендера. С помощью этого языка можно создавать фронтенд, бэкенд, мобильные приложения и многое другое. Писать код сложнее, чем верстать, но без этого веб-разработчику не обойтись. Хорошее знание JS позволит быстро освоить любой фреймворк или библиотеку.
Результаты исследования популярности языков программирования среди разработчиков. Сайт вопросов и ответов для программистов Stackoverflow, 2020 год
Sass
Sass — отличный инструмент, если приходится много работать с CSS. Он облегчит жизнь и поможет не повторяться в CSS, что сэкономит время разработки. С помощью Sass можно легко стилизовать страницы, используя меньше строк кода.
Пакетные менеджеры и веб-бандлеры
Менеджер пакетов — инструмент для работы с открытым кодом. Есть библиотеки, которые решают часть задач программиста — готовый код можно скачать с помощью пакетного менеджера, чтобы не писать его ещё раз.
Бандлеры или сборщики модулей (такие как Webpack или Parcel) нужны, чтобы собрать проект из декомпозированных «кусков» в готовый для продакшена файл.
Фреймворки
Фреймворки ускоряют разработку и предусматривают чётко структурированную организацию кода, повышая его качество.
Самыми популярными фреймворками для фронтенд-разработки можно назвать:
- Vue.js,
- React,
- Angular.
Лучше постараться хорошо изучить один фреймворк, но рекомендуем знать особенности и сферу применения их всех. Какой фреймворк выбрать? Сейчас наибольшей популярностью пользуется React. Причина в хорошей поддержке TypeScript, плюс он сбалансирован с точки зрения сложности и богатства функционала.
Согласно исследованию State of Frontend 2020, React использует больше людей, чем Angular и Vue.js вместе взятые, и React приобрёл такую прочную репутацию, что, вероятно, в ближайшем будущем уже никуда не денется.
Серверный рендеринг и статические генераторы
Серверный рендеринг — технология для рендеринга страниц на стороне сервера, которая позволяет уменьшить значение задержки к нулю. Страница рендерится на стороне сервера. На стороне клиента рендеринг не происходит.
Два наиболее популярных решения, обеспечивающих серверный рендеринг для React:
Тестирование приложений
Навыки или хотя бы понимание процесса тестирования будет большим преимуществом для начинающего фронтендера. С помощью тестирования можно избежать многих ошибок. Изучайте, что такое тестирование и какие виды бывают, учитесь писать модульные тесты, используя одну из библиотек для тестирования.
Типичный день frontend-разработчика
Наш друг-фронтендер рассказал, как примерно проходит его стандартный рабочий день.
Курсы
Логичный путь, чтобы быстро освоить базовые навыки фронтендера — пройти курсы по frontend-разработке для начинающих. Учиться придётся от полугода до двух лет. Зато на курсах дадут структурированные знания, заботливо отобранные кураторами, и не придётся искать с фонарём адекватную информацию в бездонных недрах Google.
Сколько требуется на обучение с нуля
Сроки обучения у каждого свои. Кто-то ударными темпами за год осваивает всю базу, устраивается стажёром и дальше учится на практике. Кто-то неторопливо подходит к вопросу как стать frontend разработчиком, учится кодить годами, подступаясь к профессии после тридцати лет. Одно можно сказать точно — за месяц профессию разработчика не получить. Остальное зависит от мотивации, усидчивости и того, сколько времени вы готовы потратить на учёбу.
Как найти первую работу
Разработчику-новичку вполне реально найти работу. Он может устроиться стажёром или джуниором в небольшую студию, получить опыт на практике. Это оптимальный путь. Конечно, идеально будет обзавестись ментором — опытным разработчиком, который ответит на все сложные вопросы.
Небольшие компании обычно с радостью берут тех, кто быстро учится, имеет базовые навыки и ответственно относится к задачам.
Если вы любите программировать и создавать удобные интерфейсы — эта специальность для вас. Работа фронтендера требует не только практической подготовки по веб-программированию, но и творческих способностей. Frontend-разработчик должен уметь верстать, понимать логику работы клиентской и серверной части. Чтобы освоить такой обширный стек технологий, нужны терпение, время и упорство.
