Фронтенд и бэкенд: из чего состоит веб-проект

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

Фронтенд

Всё, что происходит в браузере пользователя:

• Вёрстка страниц по макету: HTML и CSS
• Интерактивность на JavaScript: фильтры, корзина, формы, всплывающие окна
• Адаптация под телефоны, планшеты и компьютеры
• Скорость отображения и плавность интерфейса
• Доступность: работа с клавиатуры, контраст, подписи для экранных читалок

Фронтенд-разработчики работают с библиотеками и фреймворками вроде React, Vue или Angular, но простые сайты делают и без них.

Бэкенд

Всё, что происходит на сервере:

• Хранение данных в базе: товары, заказы, клиенты, пользователи
• Бизнес-логика: расчёт стоимости, проверка остатков, статусы заказов
• Авторизация и права доступа
• Интеграции с внешними системами: учёт, оплата, доставка, мессенджеры
• Отправка писем, SMS и уведомлений
• Административная панель для сотрудников

Языки бэкенда — PHP, Python, JavaScript на Node.js, Go, Java, C# и другие. Выбор зависит от задач и команды.

Как части общаются

Фронтенд отправляет запросы на сервер через API: «дай список товаров категории», «создай заказ», «проверь промокод». Бэкенд отвечает данными, обычно в формате JSON. Чем аккуратнее описан API, тем меньше недопониманий между фронтенд- и бэкенд-разработчиками и тем проще подключить позже мобильное приложение или бота.

Пример: оформление заказа

1. Пользователь нажимает «Оформить» — фронтенд проверяет, что поля заполнены
2. Фронтенд отправляет данные заказа на сервер
3. Бэкенд проверяет наличие товаров, считает итог, создаёт заказ в базе
4. Бэкенд формирует ссылку на оплату через платёжный сервис
5. Фронтенд перенаправляет пользователя на оплату
6. После оплаты платёжный сервис сообщает бэкенду результат, заказ меняет статус
7. Бэкенд отправляет заказ в учётную систему и уведомление менеджеру

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

Fullstack-разработчик

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

Что ещё входит в веб-проект

• Дизайн интерфейса
• Тестирование
• Инфраструктура: серверы, домен, сертификаты, резервные копии, мониторинг
• Аналитика и поисковая оптимизация

Что это значит для заказчика

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

Кто ещё нужен в команде

• Дизайнер интерфейсов — макеты и логика экранов
• Тестировщик — проверка сценариев и поиск ошибок до пользователей
• DevOps-инженер — серверы, развёртывание, мониторинг
• Менеджер проекта — сроки, согласования, связь с заказчиком

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

Как отличить проблему фронтенда от проблемы бэкенда

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