Фронтенд и бэкенд разработка: какие навыки нужны и какое направление выбрать

Фронтенд-разработчик делает часть приложения, которая выполняется у пользователя: интерфейс в браузере или клиентском приложении. Бэкенд-разработчик делает серверную часть: бизнес-логику, API, работу с базой данных, права доступа. Они встречаются на границе — в API: фронтенд отправляет HTTP-запрос, бэкенд отвечает данными. Fullstack-разработчик ведет задачу через обе стороны этой границы.

Ниже — сравнение задач и стека, один маленький пример, где видно, какой код чей, актуальные навыки на 2026 год и способ выбрать направление не «по ощущениям», а по результату пробного проекта.

Короткий словарь, чтобы не путаться дальше:

• клиент — то, где работает фронтенд-код (браузер, мобильное приложение);
• сервер — машина или контейнер, где работает бэкенд-код;
• API — договоренность о запросах и ответах между ними (адреса, методы, формат JSON, коды ошибок);
• fullstack — не третья технология, а роль: один человек отвечает за обе стороны API.

Чем отличаются фронтенд и бэкенд

Последняя строка — главное различие ролей. Фронтенд может проверить форму для удобства, но пользователь способен отправить запрос в обход интерфейса. Поэтому окончательная проверка данных и прав — всегда задача бэкенда.

Граница не везде проходит так чисто. При серверном рендеринге (SSR, например в Next.js) часть фронтенд-кода выполняется на сервере, а небольшие компании нередко поручают одному человеку и то, и другое.

Как фронтенд и бэкенд работают вместе: пример

Минимальное приложение «список задач» на Node.js без сторонних пакетов. Серверная часть отдает страницу и JSON API, а скрипт внутри страницы — это фронтенд, он выполняется уже в браузере. Проверено на Node.js 24.21 (образ node:24-alpine), 24.09.2026.

// server.mjs - бэкенд: отдает страницу и JSON API
import { createServer } from 'node:http';

const tasks = [{ id: 1, title: 'Сверстать форму' }];
const MAX_BODY = 1024; // байт

const page = `<!doctype html>
<meta charset="utf-8">
<title>Задачи</title>
<ul id="list"></ul>
<form id="f">
  <input name="title" required maxlength="100">
  <button>Добавить</button>
</form>
<p id="err"></p>
<script>
  // фронтенд: выполняется в браузере пользователя
  const list = document.getElementById('list');
  const err = document.getElementById('err');
  async function load() {
    const res = await fetch('/api/tasks');
    const data = await res.json();
    list.replaceChildren(...data.map(t => {
      const li = document.createElement('li');
      li.textContent = t.title; // textContent, а не innerHTML
      return li;
    }));
  }
  document.getElementById('f').addEventListener('submit', async (e) => {
    e.preventDefault();
    const title = new FormData(e.target).get('title');
    const res = await fetch('/api/tasks', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title }),
    });
    err.textContent = res.ok ? '' : (await res.json()).error;
    if (res.ok) { e.target.reset(); load(); }
  });
  load();
</script>`;

function send(res, status, obj) {
  res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8' });
  res.end(JSON.stringify(obj));
}

createServer((req, res) => {
  if (req.method === 'GET' && req.url === '/') {
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    return res.end(page);
  }
  if (req.url !== '/api/tasks') return send(res, 404, { error: 'not found' });
  if (req.method === 'GET') return send(res, 200, tasks);
  if (req.method !== 'POST') {
    res.setHeader('Allow', 'GET, POST');
    return send(res, 405, { error: 'method not allowed' });
  }
  let body = '';
  let size = 0;
  req.setEncoding('utf8');
  req.on('data', (chunk) => {
    size += Buffer.byteLength(chunk);
    if (size > MAX_BODY) {
      res.setHeader('Connection', 'close');
      send(res, 413, { error: 'body too large' });
      req.destroy();
    } else body += chunk;
  });
  req.on('end', () => {
    let data;
    try { data = JSON.parse(body); } catch { return send(res, 400, { error: 'invalid JSON' }); }
    const title = typeof data?.title === 'string' ? data.title.trim() : null;
    if (!title || title.length > 100) {
      return send(res, 400, { error: 'title: строка от 1 до 100 символов' });
    }
    const task = { id: tasks.length + 1, title };
    tasks.push(task);
    send(res, 201, task);
  });
}).listen(3000, () => console.log('http://localhost:3000'));

Запуск: node server.mjs, затем открыть http://localhost:3000 — появится список с одной задачей и форма. Новая задача добавляется без перезагрузки страницы. Задачи хранятся в памяти процесса и пропадают при перезапуске — в реальном проекте на этом месте стоит база данных.

Как это делится по ролям:

• фронтенд — разметка, форма с maxlength, fetch к API и вывод через textContent: строка вида <img onerror=...> покажется как текст, а не выполнится как HTML;
• бэкенд — маршруты, коды ответов, лимит размера тела, проверка типа и длины title независимо от того, что проверил браузер.

Проверка, что бэкенд не доверяет фронтенду: отправим запрос мимо формы, где maxlength не действует.

curl -s -w '\n' -X POST localhost:3000/api/tasks -d '{"title":42}'
curl -s -w '\n' -X POST localhost:3000/api/tasks -d '{"title":"   "}'
curl -s -w '\n' -X POST localhost:3000/api/tasks -d '{title:'
curl -s -i -X DELETE localhost:3000/api/tasks | head -2

{"error":"title: строка от 1 до 100 символов"}
{"error":"title: строка от 1 до 100 символов"}
{"error":"invalid JSON"}
HTTP/1.1 405 Method Not Allowed
Allow: GET, POST

Число вместо строки, строка из пробелов, битый JSON и чужой метод отклоняются. Заголовок длиннее 100 символов получает тот же 400, тело больше 1024 байт — код 413. Это учебный пример: в нем нет авторизации, защиты от CSRF, постоянного хранилища, журналирования и ограничения частоты запросов — все это тоже работа бэкенда в продакшене.

Навыки фронтенд-разработчика в 2026 году

Подробно о самой профессии — в статье кто такой фронтенд-разработчик и что он делает. Здесь — только стек, который чаще всего встречается в требованиях вакансий.

• HTML с семантической разметкой и CSS (Flexbox, Grid, адаптивная верстка, медиазапросы).
• JavaScript уверенно: асинхронность (fetch, async/await), работа с DOM, модули. TypeScript в коммерческих проектах сейчас скорее норма, чем плюс.
• Один фреймворк на хорошем уровне: React, Vue или Angular. Речь о современном Angular — его предшественник AngularJS (1.x) больше не поддерживается, в старом тексте статьи их не различали.
• Сборка и пакеты: npm, Vite. Gulp и LESS встречаются в поддержке старых проектов, Sass по-прежнему в ходу.
• Доступность (клавиатура, контраст, подписи полей), производительность страниц, тесты компонентов, Git и код-ревью.

Навыки бэкенд-разработчика в 2026 году

• Один язык и его основной фреймворк: например, Python и Django/FastAPI, Java или Kotlin и Spring, Go, C# и ASP.NET Core, PHP и Laravel/Symfony, JavaScript/TypeScript и Node.js.
• SQL и одна реляционная СУБД (чаще PostgreSQL): схема, индексы, транзакции, план запроса. Плюс понимание, когда нужен кэш (Redis) или очередь.
• HTTP и проектирование API: методы, коды ответов, версионирование, документация.
• Безопасность: параметризованные запросы, хранение паролей, авторизация, работа с секретами.
• Linux на уровне пользователя, Docker, CI/CD, логи и метрики, чтобы разбираться в проблемах на проде.

Где fullstack и кому он подходит

Fullstack-разработчик закрывает фичу целиком: от таблицы в базе до кнопки. Чаще всего это стек на одном языке — TypeScript на клиенте и Node.js на сервере, как в примере выше. Такая роль востребована в стартапах и небольших командах, где важна скорость, а не глубокая специализация.

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

Спрос и зарплаты: как сравнивать самому

Цифры по вакансиям и зарплатам быстро устаревают, поэтому надежнее сравнивать самостоятельно на агрегаторе вакансий по одной схеме:

1. Зафиксировать город или удаленку и грейд (junior, middle, senior) — разница между грейдами почти всегда больше, чем между фронтендом и бэкендом.
2. Искать по стеку, а не по слову «бэкенд»: «Python-разработчик», «React-разработчик».
3. Смотреть медиану вилок, а не максимум, и отдельно число вакансий для junior.

Ориентир на дату обновления: по отчету Хабр Карьеры за первое полугодие 2026 года медиана зарплат разработчиков в целом — 270 тыс. руб. в Москве, 247 тыс. в Санкт-Петербурге и 200 тыс. в регионах; зарплаты и бэкенд-, и фронтенд-разработчиков за полугодие выросли примерно на 3%. Разница между фронтендом и бэкендом на одном грейде обычно меньше, чем разница между грейдами, и зависит от стека и компании.

Какое направление выбрать: пробный проект

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

1. Фронтенд-проба: адаптивная страница с формой, которая берет данные из открытого API и корректно работает с клавиатуры и на телефоне.
2. Бэкенд-проба: API на выбранном языке с одной таблицей в базе, проверкой входных данных и кодами ошибок, как в примере выше.
3. Сравнить: какую задачу хотелось доделать и улучшить, а какую — просто закрыть.

Если не получилось:

• страница не видит данные, в консоли браузера ошибка CORS — запрос идет на другой домен, а сервер не разрешил его; на старте проще отдавать страницу и API с одного сервера;
• сервер отвечает 400 на любые данные — тело ушло не в JSON (например, body: title вместо JSON.stringify({ title })); во фреймворках вроде Express с express.json() к тому же тело без заголовка Content-Type: application/json вообще не разбирается (наш учебный сервер заголовок не проверяет); запрос и ответ видно на вкладке Network в DevTools;
• непонятно, что нравится — это нормально; начать с fullstack-проекта на одном языке и через пару месяцев посмотреть, какая часть давалась с интересом.

Выводы

• Фронтенд работает на устройстве пользователя и отвечает за интерфейс, бэкенд — на сервере и отвечает за данные, логику и безопасность; встречаются они в API.
• Проверка на фронтенде — удобство, проверка на бэкенде — защита: запрос можно отправить в обход интерфейса.
• В 2026 году базой фронтенда считаются HTML, CSS, TypeScript и один фреймворк, бэкенда — язык с фреймворком, SQL, HTTP и Docker.
• Fullstack — роль на обе стороны API, чаще всего на стеке JavaScript/TypeScript.
• Направление надежнее выбирать по двум пробным проектам, а зарплаты сравнивать при одном грейде и городе.

Где применяется / связь с практикой

FAQ

Нужно ли фронтенд-разработчику знать SQL?
Для большинства задач нет: фронтенд получает данные через API. Базовое понимание SQL помогает обсуждать с бэкендом, почему запрос медленный или каких полей не хватает.

Можно ли писать бэкенд на JavaScript?
Да, на Node.js (а также Deno и Bun). Поэтому стек JavaScript/TypeScript — самый частый вход во fullstack.

Куда относится мобильная разработка?
Мобильное приложение — это клиент, то есть аналог фронтенда, но со своим стеком (Kotlin, Swift, Flutter). Серверная часть для него — тот же бэкенд с API.