Что это простыми словами
Frontend-разработчик (или просто «фронтендер») отвечает за всё, что вы видите и трогаете на сайте или в приложении: кнопки, картинки, меню, формы, корзину в интернет-магазине.
Аналогия: представьте магазин. Есть торговый зал с витринами и кассами, куда заходит покупатель, и склад с бухгалтерией за стеной. Фронтенд — это торговый зал: то, с чем человек реально взаимодействует. А тем, что «за стеной» (сервер, база данных), занимается другой специалист — бэкенд-разработчик.
Официальное определение
Теперь, когда суть понятна, вот как эту роль описывают в вакансиях. Такую формулировку вы будете получать от заказчика и видеть в резюме.
«Frontend-разработчик — специалист, реализующий клиентскую часть веб-приложения: пользовательский интерфейс, его вёрстку и логику взаимодействия, исполняемую в браузере».
Разберём по словам. «Клиентская часть» — то, что работает у пользователя в браузере, на его экране (в противоположность серверу). «Интерфейс» — внешний вид и то, как с ним взаимодействуют. «Вёрстка» — расстановка элементов по своим местам, чтобы страница выглядела как на макете.
Что делает за обычный день
Берёт макет от дизайнера — это картинка будущей страницы, нарисованная заранее, как чертёж для строителя — и превращает его в живую рабочую страницу. Чтобы при нажатии на кнопку что-то происходило: открывалось меню, добавлялся товар в корзину, отправлялась форма.
А ещё делает адаптивную вёрстку — это когда страница одинаково удобно выглядит и на большом мониторе, и на маленьком экране телефона. Слово «адаптивная» вы часто увидите в вакансиях.
Из чего состоит направление
У любого фронтендера есть три базовые технологии, которые знают все:
HTML — каркас страницы: что и где расположено. Как скелет у человека.
CSS — оформление: цвета, шрифты, отступы. «Одежда» страницы.
JavaScript (часто пишут просто «JS») — язык программирования, который оживляет страницу: заставляет её реагировать на действия. «Мышцы», которые приводят всё в движение.
Поверх этой базы почти всегда используют фреймворк. Главных таких решений во фронтенде три, и человек обычно работает с одним из них: React (самый популярный), Vue (дружелюбный, попроще на старте) и Angular (строгий и тяжёлый, чаще в крупных компаниях).
Важно: код, написанный под React, не переносится на Vue или Angular — это разные технологии.
Инструменты простыми словами
Инструменты фронтендера удобно разложить по четырём слоям — от самого важного при отборе к наименее важному.
Слой 1. Язык — фундамент, без него никуда.
JavaScript — язык, на котором «разговаривают» все сайты. Знает любой фронтендер.
TypeScript — надстройка над JavaScript, которая заранее ловит ошибки. Как подписанные коробки, в которые нельзя положить не то. На уровне middle и выше ждут почти всегда.
Слой 2. Фреймворк — «школа», в которой человек работает. Это самое важное при отборе.
React, Vue, Angular — рекрутеру важно понять одно: с каким из них человек работал.
Next.js — надстройка над React: сайт быстрее открывается и лучше находится в поиске. Часто указывают в вакансиях на React.
Слой 3. Библиотеки — детали внутри фреймворка. Взаимозаменяемы, отбраковывать по ним не нужно.
Redux, Zustand, Effector, MobX — «склады данных», чтобы разные части страницы не путались, у кого какая версия информации (например, чтобы число товаров в корзине совпадало вверху и внизу).
React Router, TanStack Query, React Hook Form — помощники для переходов между страницами, загрузки данных и работы с формами.
MUI, Ant Design, Tailwind CSS — готовые наборы кнопок и стилей, чтобы не рисовать всё с нуля.
Слой 4. Инструменты — не привязаны к фреймворку, осваиваются быстро.
Vite, Webpack — «сборщики»: превращают код разработчика в файлы, которые понимает браузер. Vite — современный, Webpack — постарше.
Jest, Vitest, Playwright — инструменты автоматической проверки, что ничего не сломалось.
FSD (Feature-Sliced Design) — способ раскладывать код по понятной структуре. Российская методология, её часто спрашивают.
Что взаимозаменяемо, а что путать нельзя
React-разработчик и Vue-разработчик — по сути разные специалисты: опыт между фреймворками почти не переносится, и предлагать одного на вакансию другого нельзя.
А вот библиотеки внутри фреймворка (Redux, Zustand, Effector) взаимозаменяемы — кто работал с одним, второй освоит за считаные дни. За разницу между ними отбраковывать не нужно, это частая ошибка.
Уровни: junior / middle / senior
Уровень (его ещё называют грейд, от англ. grade) — это не столько годы, сколько самостоятельность.
Junior (джуниор, «джун») — делает простые задачи под присмотром старших, нужен контроль.
Middle (мидл) — берёт задачу целиком и доводит до конца сам. Основная рабочая сила команды.
Senior (сеньор) — решает, как устроить проект, выбирает технологии и помогает младшим.
Это общий ориентир. В разных компаниях требования отличаются, поэтому всегда сверяйтесь с текстом конкретной вакансии.
Как узнать роль в резюме
В резюме обычно есть раздел «стек» или «навыки» — это список технологий, которыми человек владеет. Ищите там название фреймворка (React, Vue или Angular) рядом с JavaScript или TypeScript. Хороший признак — понятные проекты: интернет-магазин, личный кабинет, панель управления. Если в стеке только HTML и CSS без JavaScript — это, скорее, верстальщик, а не полноценный frontend-разработчик.
Что спросить на первичном скрининге
С каким фреймворком работали (React, Vue, Angular) и сколько именно с ним?
Нормальный ответ: «Три года на React, до этого год на Vue». Насторожить должно, если человек одинаково уверенно называет сразу все три за короткий срок.
Используете TypeScript?
Нормальный ответ: «Да, весь проект на TypeScript» или «Пишем на JavaScript, постепенно переходим». Для джуна «нет» — нормально, на middle и выше — реже.
Расскажите про последний проект и вашу роль в нём.
Нормальный ответ: человек понятно говорит, что делал именно он — «отвечал за корзину и оплату», а не размыто «участвовал в разработке».
Делали адаптивную вёрстку и код-ревью?
Адаптивная вёрстка — когда страницу подгоняют и под телефон, и под компьютер. Код-ревью — когда коллега проверяет твою работу перед выпуском, как редактор вычитывает текст. Признак аккуратной командной работы.
Это общий ориентир. В разных компаниях требования отличаются, поэтому всегда сверяйтесь с текстом конкретной вакансии.
Частые путаницы и красные флаги
Frontend ≠ Backend ≠ Fullstack. Фронтенд — внешняя часть, бэкенд — внутренняя «за стеной», фуллстак — и то, и другое сразу.
Верстальщик ≠ frontend-разработчик. Верстальщик собирает только внешний вид (HTML и CSS), а фронтендер ещё и «оживляет» страницу через JavaScript.
JavaScript ≠ Java — два совершенно разных языка, они не связаны. Похожее название — частая ловушка.
Next.js ≠ NestJS: звучат почти одинаково, но Next.js построен на React и живёт во фронтенде, а NestJS — это бэкенд.
Красный флаг: «React, Vue и Angular на уровне senior за один год» — так не бывает.