Фронтенд-разработчик: кто это такой и как им стать с нуля

Все, что помогает пользователям управлять девайсами и приложениями с помощью голоса, нажатий, жестов, через командную строку — создает фронтенд-разработчик. Его сравнивают с верстальщиком, думая, что он просто создает визуальный контент. Но это не так. Фронтенд-разработчик — это дизайнер, верстальщик, инженер и тестировщик в одном лице.

Кто такой фронтенд-разработчик и какие задачи решает

Frontend-разработчик — это специалист, который создает пользовательский интерфейс сайта, приложения или программы и наполняет их контентом. Всё, что помогает пользователям управлять девайсами и приложениями с помощью голоса, нажатий, жестов, через командную строку.

Фронтендер пишет js-код, понимает, как работает HTML и CSS. Разбирается в адаптивности — способности сайта подстраиваться под разные экраны девайсов пользователей. Через систему контроля версий отслеживает изменения исходного кода.

Отличия от верстальщика

Любая страница в интернете состоит из разметки элементов — HTML-кода, и CSS-стилей — внешнего вида элементов. Код и стили любой страницы видны в консоли разработчика в браузере. Для этого кликните в любом месте страницы правой кнопкой мыши и выберите в выпадающем меню «Посмотреть код».

Откроется панель, где код разметки и стилей любого элемента. Например, логотипа Яндекс.

Верстальщик по макету дизайнера создает код страницы — ее внешний вид в интернете: прописывает структуру, вставляет картинки с помощью тегов. А после работает над стилями, например: цветом, шрифтом, тенями, отступами от полей.

Страница, которую создал верстальщик, статичная. Задача фронтендера — «оживить» ее. Сделать так, чтобы раскрывались меню, работали ссылки, подгружался контент, инпуты реагировали на клики мыши.

Какими инструментами и технологиями должен владеть

HTML и CSS

Фронтенд-разработчик не занимается версткой страницы и созданием стилей, но умеет добавлять на страницу новый элемент или изменять стиль существующего. При работе с HTML-кодом или CSS-стилями чаще используют препроцессоры — надстройки, которые сокращают синтаксис кода и упрощают его.

Например, препроцессор HTML меняет длинный классический код:

<a href="#">Ссылка</a>

На:

a(href="#") Ссылка

Препроцессоры делают код читабельным и производительным. Он становится коротким и тратит меньше ресурсов браузера при его обработке.

Популярные препроцессоры:

• HTML — Haml, Jade, Slim;
• CSS — Less, Sass, Stylus.

Фронтендеру достаточно изучить один препроцессор, а освоить остальные будет уже легче.

JavaScript и TypeScript

JavaScript — язык программирования, с помощью которого фронтендер придает динамику странице. Вместо чистого кода JavaScript-разработчики пользуются библиотеками.

Разработчик должен понимать, как работают структуры данных, как применяются функции, что такое прототипы, методы объекта и другие базовые понятия. Если начать пользоваться библиотеками без изучения JavaScript, это будет просто копированием частей кода без понимания, что и как работает.

Важно уметь работать и на TypeScript — расширенной версии JavaScript, в которой исправлены некоторые его недостатки: например, динамическая типизация. В TypeScript она заменена на статическую.

jQuery

Разработчики используют библиотеку jQuery, чтобы не писать длинный код на чистом JavaScript или TypeScript. Она содержит упрощенные конструкции кода, которые набирать на клавиатуре быстрее, и готовые плагины. Если разработчик не хочет писать фотогалерею с нуля, тултип или слайд-шоу, он просто использует готовый плагин.

Вот как выглядит код на JavaScript:

document.getElementById('id').innerHTML = 'Тише едешь, дальше будешь';

И вот как в сокращенном виде на jQuery:

 $('#id').html('Тише едешь, дальше будешь');

Gulp и WebPack

Когда над проектом работают несколько фронтендеров, и каждый пишет свою часть js-кода, css-стилей, сохраняет картинки в папку, то потом собрать все данные в один проект сложно — файлов много, а изображения имеют разный вес.

Чтобы не заниматься сборкой вручную, фронтендеры используют специальные программы-сборщики. Они автоматически собирают в один файл все css-стили, в другой — скрипты, в третью — картинки. В итоге фронтендер получает цельный оптимизированный проект, который можно отправлять на сервер.

React, Vue.js или Angular

Это фреймворки JavaScript. С ними разработка идет быстрее. У фронтендера есть выбор — использовать шаблон из репозитория с настроенным сборщиком, стартовой страницей или начать проект с нуля и самостоятельно установить необходимые инструменты.

Строгих требований, какой фреймворк обязательно должен знать разработчик, нет. Специалист выбирает любой, а остальные осваивает по мере необходимости.

Git

Это система контроля версий. Ее используют для больших проектов, чтобы навести в файлах порядок, защититься от случайных удалений и потерь кода, откатить изменения, если они оказались ненужными.

Часто Git нужен при совместной работе над проектом. Если код пишут два фронтендера, каждый создает свою ветку проекта в Git. В результате нет риска повредить или перезаписать изменения другого разработчика.

Линтеры

Это анализаторы качества JavaScript-кода. Они проверяют, соответствует ли код стандарту ES — стандарту, который понимает большинство веб-браузеров.

Задачи линтеров:

• найти ошибки в коде;
• избежать опечаток в коде;
• избежать бесконечных циклов;
• проверить недоступный код;
• проверить другие ошибки.

Один из популярных линтеров — ESLint.

Требования к frontend-разработчику

Профессиональные навыки

💪Кодирование. Основная задача фронтендера — писать и разбираться в js-коде, понимать, как работает HTML и CSS.

💪Адаптивный дизайн. Пользователи открывают сайт и приложения с разных устройств. Поэтому разработчик должен разбираться в адаптивности — способности сайта «подстраиваться» под различные экраны пользователей. Чтобы сайты на смартфонах и планшетах выглядели так же хорошо, как и на экранах компьютеров.

💪Семантическая верстка. Разработчик прописывает семантические теги, для того чтобы поисковые роботы проиндексировали страницы.

💪Контроль версий. Через систему контроля версий фронтендер отслеживает и контролирует изменения исходного кода. Если вдруг в коде появится ошибка, не нужно писать его заново — возвращайтесь к моменту, когда код был еще в порядке.

💪Визуальный дизайн. Фронтендер не занимается дизайном сайта и приложений, но ему могут пригодиться базовые знания основных принципов дизайна. Например, если дизайнер нарисует макет, который нельзя запрограммировать на JavaScript технически, разработчик внесет правки в дизайн так, что сайт будет по-прежнему выглядеть хорошо.

По уровням

Фронтенд-разработчик начинает путь в профессии в качестве верстальщика или сразу с позиции джуна. Затем растет до мидла, сеньора и в итоге занимает позицию тимлида — руководителя команды разработчиков. На каждой позиции выше зарплата, но нужно больше знаний.

🔸 Junior

• HTML;
• CMS вроде WordPress и хотя бы один графический редактор;
• CSS, опыт работы с CSS-фреймворками и CSS препроцессорами;
• начальные знания JavaScript;
• умение работать хотя бы с одним фреймворком JS, например, ReactJS;
• понимание, как работать в Git.

🔸 Middle

• понимание ООП, паттернов и структур данных;
• уверенное владение JavaScript, практический опыт;
• знания React, Angular, Vue;
• понимание технологий Webpack, State managers, SSR, FrontOps;
• использование в работы Agile-, Scrum-подходов;
• опыт работы с Git;
• английский не ниже Upper-Intermediate.

🔸 Senior

• умение писать чистый расширяемый код: JavaScript + TypeScript;
• навыки составления архитектура проекта;
• применение принципов SOLID, DRY, DIE и других;
• знания HTTP, WS;
• опыт работы с тест-фреймворками;
• знание Docker, Kubernetes;
• понимание работы бэкенд-разработчика;
• умение распределять задачи, обучать новичков.

Примеры вакансий для джуна, мидла и сеньора фронтенд-разработчиков

Личные качества

👉Коммуникация. Фронтендеру нужно уметь общаться с другими участниками команды, договариваться о разделение обязанностей, обсуждать технические решения. Возможно, придется брифовать клиента. Хорошо развитые коммуникационные навыки помогут определить, что именно нужно заказчику.

👉Внимательность к деталям. Важно замечать даже небольшие изменения кода, так как они могут повлиять на весь проект.

👉Организация. Отслеживание сроков, задач проекта, рабочего процесса и бюджетов — полезные навыки для фронтендера. Они пригодятся тем, кто хочет претендовать на роль тимлида.

👉Терпение. Ситуации, когда что-то перестает работать на сайте, неизбежны. Ошибку в коде можно искать часами, а потом несколько дней думать, как исправить.

👉Английский язык. Большая часть документации к различным библиотекам, фреймворкам и системам — на английском языке.

Карьерный путь и зарплата фронтенд-разработчика

У фронтенд-разработчика есть три варианта развития:

📌Горизонтальный: постоянно учиться новому, чтобы претендовать на высокооплачиваемые вакансии.

📌Вертикальный: расти по карьерной лестнице в одной компании.

📌Диверсификационный: осваивать дополнительные специализации. Например, изучать серверные языки программирования, принципы работы с базами данных и серверов, чтобы стать фулстек-разработчиком.

Зарплата фронтендеров, по данным на Хабр за второе полугодие 2022 года, выросла на 3%, и составляет 155 000 ₽.

Уровень заработной платы зависит и от города. В Москве получают больше:

А вот так выглядит статистика заработной платы для сеньора и тимлида:

Обзор зарплат фронтендеров с Zarplan

Как стать frontend-разработчиком

Начните изучать верстку, CSS-стили и JavaScript самостоятельно. В интернете много бесплатного обучающего контента — видео, онлайн-тренажеры, книги. Например, на code.mu есть и обучающие материалы, и практические задания.

Онлайн-тренажер HTML-академии, который помогает изучать верстку

Дополнительно найдите ментора — специалиста, который будет направлять в обучении. Он подскажет, что и в каком порядке проходить, поможет решить сложную задачу. Но ментор не будет обучать всему подряд, учиться придется самостоятельно.

Чтобы стать полноценным специалистом уровня джуна необходимо много практиковаться, читать книги, смотреть вебинары, изучать спецификации и чужой код. Четкий план обучения дают на онлайн-курсах.

В онлайн-университете Skypro учат веб-разработке с нуля. В программе обучения: HTML, CSS, JavaScript, React (самый популярный фреймворк в веб-разработке), Git и линтеры. Вас ждут девять месяцев только полезной теории и практики, разбор сложных тем с преподавателем онлайн, командная и личная работа над проектами. А еще — проекты для портфолио и диплом государственного образца. Понадобится до 15 часов в неделю.

Предложения о стажировке и первую работу ищите на HH.ru, SuperJob, career.habr.com, headz.io, geekjob.ru, телеграм-каналах вроде Job for Junior.

Трудоустройство — это тоже навык. И в Skypro этому обучают: готовят к собеседованиям, помогают составить резюме и портфолио.

Плюсы и минусы профессии 

Коротко: чем занимается frontend-разработчик

• Frontend разработка — это создание пользовательского интерфейса сайта. Результат работы фронтендера помогает пользователям управлять девайсами и приложениями с помощью голоса, нажатий, жестов, через командную строку.
• Основной список инструментов фронтендера: знания JavaScript и TypeScript, препроцессоров HTML и CSS, библиотеки jQuery, сборщиков проектов Gulp или WebPack, фреймворков React, Vue.js или Angular, Git, линтеров.
• Помимо профессиональных навыков, разработчик должен обладать определенными личными качествами. Например, внимательностью, чтобы проверять написанный код и находить в нем ошибки. Владеть коммуникативными навыками, уметь организовывать свое время и рабочий процесс, быть терпеливым, чтобы успешно работать и развиваться в профессии
• В России средняя зарплата фронтенд-разработчика — от 155 000 ₽ рублей в месяц, в Москве — 200 000 ₽.