Что делает фронтенд-разработчик: задачи от тикета до релиза

Что делает фронтенд-разработчик, если коротко

Фронтенд-разработчик отвечает за всё, что пользователь видит и нажимает в браузере: страницы, формы, фильтры, личный кабинет. Он получает макет от дизайнера и API от бэкенд-разработчика, а сдаёт работающий интерфейс. Тот должен быстро грузиться, одинаково выглядеть на телефоне и ноутбуке и не ломаться, когда сервер ответил ошибкой.

В типичной статье на эту тему обязанности сведены к списку «верстает, добавляет интерактивность, тестирует». Список правильный, но по нему трудно представить реальный рабочий день. Поэтому ниже разобран путь одной обычной задачи от тикета до релиза: так видно, сколько в профессии работы помимо кода разметки.

Стек у профессии устойчивый. По опросу Stack Overflow 2025, JavaScript используют 66% всех респондентов, HTML/CSS 61,9%, TypeScript 43,6%. Среди веб-фреймворков первым идёт React (44,7%), Angular и Vue.js набирают 18,2% и 17,6%.

Путь одной задачи: фильтр по цене в интернет-магазине

Возьмём задачу, которая встречается почти в любом каталоге: добавить фильтр «цена от и до» со слайдером. Пользователь двигает ползунок, список товаров обновляется без перезагрузки, а выбранный диапазон сохраняется в адресе страницы, чтобы ссылкой можно было поделиться. Вот что происходит между тикетом и релизом.

1. Разбор задачи. Разработчик читает тикет и задаёт вопросы до старта. Что показывать, если товаров в диапазоне нет? Нужен ли фильтр в мобильной версии? Учитывать ли скидочную цену или старую?
2. Сверка с макетом. В Figma обычно нарисовано идеальное состояние. Фронтендер ищет недостающие: загрузка, ошибка сервера, пустой результат, очень длинная цена, узкий экран на 320 пикселей.
3. Контракт с бэкендом. Нужно договориться, какие параметры уйдут в запрос и в каком виде придёт ответ. Если бэкенд ещё не готов, фронтенд работает на заглушке с тем же форматом данных.
4. Компонент. Слайдер, два поля ввода, связь с адресной строкой. Здесь же решается, отправлять ли запрос на каждое движение ползунка или подождать, пока пользователь остановится. Первый вариант может создать лишнюю нагрузку на сервер.
5. Доступность. Ползунком должно получаться управлять с клавиатуры, а скринридер должен озвучивать выбранные значения.
6. Тесты. Модульный тест на логику диапазона и, если в команде принято, сквозной сценарий: открыть каталог, выставить цену, проверить список.
7. Код-ревью. Коллега читает изменения и оставляет замечания. На правки иногда уходит столько же времени, сколько на первый вариант кода.
8. Релиз и наблюдение. После выкладки разработчик смотрит на ошибки в мониторинге и метрики скорости: не стал ли каталог грузиться дольше.

Из восьми шагов собственно верстка занимает часть четвёртого. Остальное составляют вопросы, договорённости, проверки и чтение чужого кода. Именно этот разрыв новички замечают на первой работе: учебные проекты обычно заканчиваются на шаге 4.

Неделя фронтендера: код, ревью и созвоны

Планирование спринта, короткий ежедневный созвон, разбор багов от тестировщиков: в продуктовой команде это такая же часть недели фронтенд-разработчика, как написание кода. Сюда же входят планирование спринта, короткие ежедневные встречи, разбор багов от тестировщиков, ревью кода коллег и обсуждение макетов с дизайнером. Доля каждого блока зависит от компании и грейда, но код почти никогда не занимает весь день.

Типичные повторяющиеся занятия выглядят так:

• Новые экраны и компоненты по задачам спринта.
• Баги. Интерфейс поехал в Safari, форма отправляется дважды, после обновления страницы пропали введённые данные, модальное окно не закрывается на iPhone.
• Ревью чужих pull request и ответы на замечания к своим.
• Обновление зависимостей. Новая версия библиотеки может сломать сборку, и разбираться с этим приходится тому, кто её обновил.
• Обсуждения с дизайнером, когда макет нельзя сделать как нарисовано без потери скорости.
• Документация компонентов для коллег.

Ошибки в интерфейсе видит каждый пользователь, поэтому баг-репорт нередко попадает сначала к фронтенду, даже когда причина на сервере. Отсюда навык, о котором редко пишут в описаниях профессии: быстро понять по вкладке Network в DevTools, чья это проблема, и прийти к бэкендеру с конкретным запросом и ответом, а не со словами «что-то не работает».

Невидимая часть работы: скорость, доступность, состояния

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

Скорость измеряют по метрикам Core Web Vitals. Google в описании метрик на web.dev задаёт пороги хорошего результата:

• LCP (отрисовка крупнейшего элемента) не дольше 2,5 секунды;
• INP (отклик на действие пользователя) не больше 200 миллисекунд, то есть после клика по фильтру интерфейс должен отреагировать почти мгновенно, даже если данные ещё грузятся;
• CLS (сдвиг макета) не больше 0,1.

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

Доступность (a11y) означает, что интерфейсом могут пользоваться люди со скринридером, с клавиатурой вместо мыши, со слабым зрением. На практике это правильные HTML-теги вместо кнопок из div, подписи у полей формы, достаточный контраст и видимый фокус.

Состояния интерфейса легче всего пропустить. У каждого блока с данными есть минимум четыре варианта: загрузка, успех, пусто, ошибка. Начинающий разработчик делает только успех, опытный продумывает все четыре до того, как его об этом попросит тестировщик.

Чем фронтендер отличается от верстальщика, дизайнера и бэкендера

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

Зарплатная динамика у соседних ролей разная. По отчёту Хабр Карьеры о зарплатах во второй половине 2025 года, зарплаты фронтенд-разработчиков выросли за полугодие на 5%, у бэкенда рост составил 3%, у HTML-верстальщиков 7%.

Отдельно про фулстек. Фулстек-разработчик закрывает обе стороны задачи с фильтром сам. Такой формат встречается в небольших командах и стартапах, но и отвечает он сразу за обе стороны. О второй стороне задачи подробно написано в статье о том, кто такой backend-разработчик.

Как меняются задачи фронтенд-разработчика от junior к senior

Список технологий у junior и senior почти одинаковый, разница в масштабе решений. Junior получает задачу, где уже понятно, что делать, и отвечает за качественную реализацию. Middle сам разбивает фичу на задачи и отвечает за неё целиком. Senior решает, как устроен весь фронтенд, и отвечает за то, чтобы другие разработчики могли в нём работать.

Вилки взяты из статьи hh.ru о профессии (апрель 2025), общий диапазон там указан от 70 000 до 400 000 ₽. Разрыв между middle и senior в этих данных большой, и средняя колонка таблицы его объясняет: senior получает деньги за решения, ошибка в которых стоит команде месяцев переделки.

Та же задача с фильтром показывает разницу наглядно. Junior получает тикет с готовым макетом и описанием API и делает компонент. Middle сам замечает, что фильтр по цене конфликтует с уже существующей сортировкой, и предлагает, как их совместить. Senior задаёт вопрос раньше: не пора ли вынести все фильтры каталога в общий модуль, чтобы следующий фильтр делался за день, а не за неделю.

Отсюда практический вывод для новичка. Первые полгода на работе почти не про новые технологии. Они про то, чтобы научиться задавать вопросы на шаге 1 и закрывать шаги 5-8 без напоминаний: именно это отличает junior, которого готовы повышать. В каталоге SkillEdge короткие курсы по React и TypeScript рассчитаны как раз на этот этап: они не учат профессии с нуля, а добавляют инструмент тому, кто уже работает.

Инструменты, с которыми фронтендер работает каждый день

Задача не попадёт в продакшн без набора инструментов вокруг языка и фреймворка: редактора кода, Git, менеджера пакетов, сборщика, браузерных DevTools и сервисов для тестов и мониторинга. Новички часто учат только язык, а на собеседовании спрашивают и про инструменты.

Менеджер пакетов npm, по опросу Stack Overflow 2025, используют 56,8% всех респондентов, сборщик Vite 25,4%. Через npm в проект подключаются библиотеки, а сборщик превращает исходный код в файлы, которые браузер скачает быстро.

В DevTools фронтендер смотрит, какой запрос ушёл на сервер и что вернулось, почему элемент съехал, какой скрипт тормозит страницу. Значительная часть отладки происходит именно здесь, а не в редакторе.

Git нужен для совместной работы: каждая задача делается в отдельной ветке, а в общий код попадает только после ревью. Если на курсе вы ни разу не открывали pull request и не получали на него замечаний, этот навык придётся добирать на первой работе. Сравнивая программы на SkillEdge, мы отдельно проверяем, упомянута ли в них командная работа через Git и ревью: в описании курса это пункт, который легко не заметить за списком технологий.

Где работает фронтендер и как от этого меняются задачи

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

Продукт (банк, маркетплейс, SaaS-сервис). Много легаси-кода, строгие процессы ревью и тестов, метрики после релиза. Задача может неделю обсуждаться и день делаться.

Агентство или студия. Лендинги, корпоративные сайты, промостраницы с анимацией. Больше верстки и работы с дизайном, жёсткие дедлайны, меньше архитектуры. Хороший старт для портфолио, хотя сложных интерфейсов с долгой историей там немного.

Аутсорс. Команда работает на заказчика, проекты длятся месяцами. Стек диктует клиент, поэтому за пару лет разработчик успевает поработать с React, Vue и Angular.

Фриланс. Небольшие сайты и доработки. Помимо кода, фронтендер сам оценивает сроки, общается с заказчиком и выставляет счета.

Что поменяли ИИ-ассистенты в работе фронтенда

ИИ-ассистенты стали обычным инструментом: по разделу об ИИ в опросе Stack Overflow 2025, 84% разработчиков используют их или планируют, а около половины профессиональных разработчиков (51%) пользуются ими каждый день. Шаблонный код, типовые компоненты и тесты по образцу генерируются за минуты.

Работы при этом не стало меньше, она сместилась. Главной проблемой 66% опрошенных назвали ответы, которые «почти правильные, но не совсем». 45% говорят, что отладка сгенерированного кода занимает больше времени. Активно не доверяют точности ИИ 46%, доверяют 33%.

Для фронтенда это значит, что ценность сдвигается к шагам 1, 2 и 7 из разбора выше: понять задачу, найти недостающие состояния, прочитать код и заметить ошибку. Ассистент быстро пишет слайдер. Подумать, что будет на экране в 320 пикселей и при ответе сервера с ошибкой, по-прежнему должен человек.

Какие из этих задач реально тренируют курсы

Сейчас в каталоге SkillEdge по фронтенд-разработке 33 курса от 6 школ, минимальная цена 495 ₽, медианная 61 982 ₽. Цены сильно расходятся, потому что под словом «фронтенд» школы продают очень разные вещи: от одного инструмента до профессии на год.

При сравнении программ на SkillEdge видно, как курсы раскладываются по шагам из разбора задачи выше:

• Короткие курсы по инструменту (React, TypeScript, верстка) покрывают в основном шаг 4. Например, онлайн-курс Merion по TypeScript стоит 9 680 ₽. Это разумный выбор, если база уже есть и нужен конкретный навык.
• Программы-профессии добавляют командные проекты, работу с API и Git. Фронтенд-разработчик у Нетологии длится 11 мес., у Хекслета 10 мес.
• Узкие курсы под смежные задачи закрывают то, чего нет в профессиях: например, «Nginx для фронтенд-разработчика» от Skillbox за 30 000 ₽.

Наш вывод после сверки программ: смотреть стоит не на список технологий, он почти везде одинаковый. Смотреть стоит на то, есть ли в программе код-ревью от живого человека, работа с реальным API и тесты. Это шаги 3, 6 и 7, без которых первая задача на работе окажется непохожей на учёбу.

Итог простой: выбирайте курс по тому, сколько шагов реальной задачи он заставляет пройти руками. Программы удобно сопоставить по цене и сроку в каталоге курсов фронтенд-разработки или открыть две-три рядом в сравнении курсов. Сколько обучение будет стоить в месяц с рассрочкой, покажет калькулятор. Если вы ещё выбираете, с чего начать, загляните в план, как стать фронтенд-разработчиком с нуля, а список технологий по грейдам собран в статье о навыках фронтенд-разработчика. Зарплаты и требования рынка сведены на странице профессии.