Фронтенд и бэкенд: из каких частей состоит сайт и кто за что отвечает

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

Что такое фронтенд и бэкенд простыми словами

Сайт похож на ресторан. Зал с меню, столами и официантом — это фронтенд: клиент его видит и с ним взаимодействует. Кухня, склад и бухгалтерия — бэкенд: клиент туда не заходит, но от них зависит, получит ли он заказ.

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

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

Фронтенд отвечает за то, как сайт выглядит и ведёт себя в браузере. Бэкенд отвечает за то, что сайт знает и делает за кадром.

Что относится к фронтенду?

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

На практике во фронтенд входят:

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

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

Фронтенд виден поисковикам и людям сразу: заголовки, тексты, ссылки и скорость отклика лежат именно здесь. О том, как вёрстка влияет на позиции, мы писали в статье про скорость загрузки сайта.

Что относится к бэкенду?

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

Что делает бэкенд:

• Хранит данные — товары, цены, заказы, клиентов, статьи. Для этого используют базу данных: по определению MDN, это хранилище организованных данных, в котором их удобно искать и расширять.
• Собирает страницы — подставляет данные из базы в шаблоны, поэтому карточки тысячи товаров не рисуют вручную по одной.
• Обрабатывает формы — проверяет заявку, сохраняет её, отправляет письмо менеджеру и в CRM.
• Считает — корзину, скидки, доставку, права доступа к личному кабинету.
• Связывает сайт с другими системами — 1С, платёжными сервисами, службами доставки.
• Следит за безопасностью — решает, кого пустить в админку, какие данные принять, какие отклонить.

Код бэкенда пишут на языках вроде PHP, Python или JavaScript (Node.js), и почти всегда не с нуля, а на готовом фреймворке или CMS. По словам MDN, писать серверную часть без фреймворка почти никто не станет. Для сайтов на 1С-Битрикс или WordPress значительная часть бэкенда уже готова: разработчик настраивает и расширяет её, а не создаёт заново.

Как фронтенд и бэкенд общаются между собой

Две части связаны запросами. Когда посетитель открывает страницу, нажимает ссылку или отправляет форму, браузер отправляет запрос на сервер. Сервер обрабатывает его и возвращает ответ: страницу, картинку или сообщение об ошибке. Фронтенд показывает ответ, бэкенд его готовит.

От того, как устроен бэкенд, зависит тип сайта. Статический сайт, по определению MDN, возвращает одно и то же жёстко заданное содержимое при каждом обращении к странице. Динамический собирает страницы налету: HTML создаётся подстановкой данных из базы в шаблоны. Большинство сайтов бизнеса — динамические: каталог, новости, личный кабинет, заявки.

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

Факт. Динамический сайт хранит информацию в базе данных и собирает страницы налету, подставляя данные в HTML-шаблоны, — это и есть работа бэкенда.

Сравнение фронтенда и бэкенда по критериям

Чтобы увидеть разницу целиком, сравним части по одним и тем же признакам:

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

Где проходит граница на конкретных примерах

Одну и ту же функцию часто делают обе части вместе. Разберём три типичные ситуации на сайте.

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

Каталог с фильтрами. Фронтенд показывает фильтры и обновляет список. Бэкенд хранит товары, считает остатки и отдаёт подходящие позиции. Если фильтр «тормозит», причина бывает в любой части: тяжёлый скрипт на странице или медленный запрос к базе.

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

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

Кто за что отвечает в проекте?

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

Менеджер проекта следит, чтобы специалисты не расходились в деталях. Подробнее об этапах мы писали в статье про этапы разработки сайта.

Когда студия маленькая, обе части ведёт один человек — иногда его называют fullstack-разработчиком. Это нормально для простого сайта. Для проекта со сложной логикой и интеграциями лучше, чтобы за каждую часть отвечал отдельный человек, а общую картину держал руководитель проекта.

Что учесть заказчику в процессе разработки сайта

Разделение на фронтенд и бэкенд влияет на то, как вы ставите задачу и принимаете результат. Несколько практических правил:

Если вам нужен сайт целиком, начните с услуги разработка корпоративного сайта: мы ведём проект от макета до запуска, фронтенд и бэкенд вместе.

Источники

• Introduction to the server side — MDN Web Docs
• Client-side form validation — MDN Web Docs
• How the web works — MDN Web Docs
• Server — Glossary — MDN Web Docs
• Database — Glossary — MDN Web Docs
• HTML — Glossary — MDN Web Docs