Фронтенд и бэкенд простыми словами: из чего состоит сайт или сервис и что это значит для заказчика

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

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

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

В сайте или сервисе это выглядит так:

• Фронтенд (клиентская часть) — вёрстка страниц, адаптив под телефон, формы, фильтры каталога, корзина на экране, анимации. Работает в браузере посетителя или в мобильном приложении. Обычные технологии — HTML, CSS, JavaScript и фреймворки поверх них.
• Бэкенд (серверная часть) — программа на сервере. Она получает данные из формы, проверяет их, записывает в базу, считает цену или остаток, отправляет письмо, уведомление или заказ в CRM и отдаёт фронтенду ответ.
• Фулстек — когда один разработчик или одна команда делают обе части. Для заказчика это значит одного ответственного за весь путь заявки: от кнопки до записи в базе.

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

Где здесь база данных и API?

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

Полная схема типичного сервиса выглядит как цепочка:

1. Посетитель нажимает «Оформить заказ» — работает фронтенд.
2. Фронтенд отправляет данные заказа на сервер через API.
3. Бэкенд проверяет данные: есть ли товар, верна ли цена, не подделан ли запрос.
4. Бэкенд записывает заказ в базу данных и создаёт платёж в платёжном сервисе.
5. Бэкенд передаёт заказ в CRM или 1С и отправляет уведомление менеджеру.
6. Фронтенд получает ответ и показывает покупателю «Заказ принят».

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

Пример из наших работ — сайт проката LENCAR. Фронтенд — витрина парка с фильтрами по классам и страницы автомобилей с галереей. Бэкенд на Node.js собирает страницы на сервере, принимает заявки на бронирование и хранит парк, заявки и настройки в базе SQLite. Владелец заводит машины в админке, а карта сайта и разметка для поисковиков строятся из той же базы: добавили автомобиль — он появился и на сайте, и в sitemap. В каталоге 12 автомобилей, и весь парк ведётся из админки без разработчика.

Почему одна правка дешёвая, а похожая — дорогая?

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

Что увеличивает объём правки, даже если на экране она выглядит мелкой:

• Новые данные. Если появляется то, чего раньше не хранили (город клиента, дата доставки, статус), меняется структура базы, а старые записи нужно чем-то заполнить.
• Новое правило. «Скидка постоянным», «бесплатная доставка от суммы», «менеджер видит только своих клиентов» — это логика на сервере. Во фронтенде её делать нельзя: всё, что считается в браузере, пользователь может подменить.
• Связи с другими системами. Любое новое поле, которое должно попасть в CRM или 1С, требует правки обмена и проверки на реальных данных.
• Права и роли. Новая кнопка в кабинете — это ещё и вопрос, кому её показывать и кто может нажать. Скрыть кнопку во фронтенде мало, запрет должен стоять на сервере.
• Проверка после выкладки. Правку фронтенда видно сразу. Правку бэкенда проверяют сценарием: отправить заявку, оплатить, дождаться письма, посмотреть запись в CRM.

Когда подрядчик называет цену правки, честный вопрос к нему — не «почему так дорого», а «какие части это затронет». Хороший ответ звучит конкретно: «форма, проверка на сервере, таблица заявок, шаблон письма, обмен с CRM».

Просьба заказчика	Где меняется	Почему объём такой
Поменять цвет кнопки «Заказать»	Только фронтенд	Одно правило оформления, проверка на телефоне и компьютере
Добавить в форму поле «Город»	Фронтенд и бэкенд	Поле нужно показать, проверить, сохранить в базе, передать в CRM и письмо
Показывать цену со скидкой для постоянных клиентов	Бэкенд, база, фронтенд	Нужно знать, кто постоянный: вход, история заказов, правило расчёта и защита от подмены
Переставить блоки на главной	Фронтенд	Вёрстка и адаптив; если блоки правятся из админки — ещё и её форма
Сделать, чтобы заявка уходила ещё и в Telegram	Бэкенд	Подключение бота, обработка сбоев отправки, проверка на реальной заявке
Выгружать заказы в Excel	Бэкенд и админка	Запрос к базе, фильтры по датам, права: кто может выгружать

Нужен ли сайту-визитке бэкенд?

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

Так устроены, например, наши проекты «Бытполимер» и «Юнит-1»: страницы на HTML, CSS и JavaScript без тяжёлого фреймворка, свой домен с HTTPS и форма заявки. Такой сайт быстро грузится, почти не требует обновлений и дёшев в хостинге.

Бэкенд и база нужны, если на сайте есть хотя бы одно из перечисленного:

• владелец хочет сам менять тексты, цены и фото без разработчика — нужна админка;
• каталог больше нескольких десятков позиций, с фильтрами и поиском;
• вход для клиентов, личный кабинет, история заказов;
• онлайн-оплата, расчёт доставки, остатки со склада;
• заявки должны храниться на сайте, а не только приходить на почту;
• обмен данными с CRM, 1С, маркетплейсами.

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

Как устройство проекта влияет на оценку и цену?

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

Ориентиры по нашему прайсу (все цены — «от», точная сумма после брифа):

• Лендинг — от 24 000 ₽, 2 дня. Одна страница, адаптив, форма заявки с отправкой в Telegram или на почту, аналитика. Бэкенда в привычном смысле нет.
• Корпоративный сайт — от 56 000 ₽, 3–4 дня. До 6–8 страниц, админка для обновления контента, формы с передачей заявок в CRM.
• Интернет-магазин — от 104 000 ₽, от 5 дней. Каталог, корзина, оплата, кабинеты покупателей и роли, админка для товаров и заказов, одна связка с CRM, складом или 1С.
• Веб-приложение или SaaS — от 160 000 ₽, от 10 дней. Кабинеты и роли, база данных и REST API под ваши сущности, дашборды, оплата, 1–2 внешние интеграции, выкладка на сервер.

Чтобы оценка была точной, в брифе полезно описать не экраны, а данные и правила: какие сущности есть (клиент, заказ, объект), кто что может делать, что считается автоматически, с какими системами обмен. Это и есть техническое задание на бэкенд — даже если вы не знаете этого слова. Как ещё складывается цена сайта — в статье «Из чего складывается цена разработки сайта».

Тип проекта	Фронтенд	Бэкенд и база данных
Лендинг, сайт-визитка	Одна или несколько страниц, адаптив, форма	Чаще всего только обработчик формы, базы нет
Корпоративный сайт с блогом	Страницы услуг, кейсов, статей	Админка или CMS, где хранятся тексты и статьи
Сайт с каталогом и заявками	Витрина, фильтры, карточки	База товаров, заявок и настроек, админка для владельца
Интернет-магазин	Каталог, корзина, оформление заказа, кабинет покупателя	Заказы, оплата, остатки, доставка, связка с CRM или 1С
Веб-приложение, личный кабинет, CRM	Экраны под каждую роль, таблицы, дашборды	Роли и права, своя логика расчётов, API, журналы, интеграции
Мобильное приложение	Приложение в App Store и Google Play	Сервер с API, аккаунты, push-уведомления, оплаты

Как это влияет на хостинг и поддержку?

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

Что меняется с появлением бэкенда:

• Хостинг. Нужен сервер или облачная площадка, где запущена программа, а не просто место под файлы. Домен и хостинг вы оплачиваете напрямую у регистратора и провайдера, их нет в цене разработки.
• Резервные копии. Страницы можно восстановить из исходников, а заявки, заказы и пользователей — только из копии базы. Спросите, как часто она делается и где хранится.
• Обновления. Серверные библиотеки и система получают исправления безопасности; их нужно ставить и проверять, что ничего не сломалось.
• Внешние изменения. Если платёжный сервис, CRM или маркетплейс меняет свой API, обмен нужно поправить, даже когда в вашем проекте ничего не трогали.
• Мониторинг. Ошибка в бэкенде не всегда видна на экране: форма показывает «Спасибо», а заявка не записалась. Нужны журналы и уведомления о сбоях.

По нашим тарифам после запуска идёт бесплатная поддержка, отдельная от гарантии: 7 дней у лендинга, 14 дней у магазина и веб-приложения, 1 месяц у корпоративного сайта. Ошибки по нашей вине исправляем бесплатно 30 календарных дней с даты акта. Дальше — поддержка и развитие по подписке от 7 900 ₽ в месяц или разовые задачи. Что обычно входит в такую подписку — в статье «Сколько стоит поддержка сайта в месяц».

Какие ошибки делают заказчики?

Главная ошибка — судить о сложности по экрану. Красивая страница может быть простой, а скромная форма в кабинете — сложной из-за правил и интеграций. Остальные ошибки вытекают из этой.

• Заказывают дизайн отдельно от логики. Макет утверждён, а потом выясняется, что для половины экранов нет данных или правил расчёта. Экраны проектируют вместе с тем, откуда они берут данные.
• Нанимают разных исполнителей на фронтенд и бэкенд без технического руководителя. Когда заявка теряется, каждый уверен, что проблема на другой стороне.
• Просят «сделать как у крупного сервиса». За внешне простым интерфейсом большого сервиса стоят годы работы над бэкендом. Сначала стоит собрать минимальную версию с главным сценарием.
• Не получают доступы к серверу и базе. Фронтенд виден всем, а бэкенд живёт на сервере. Если доступ к нему только у подрядчика, сменить подрядчика будет трудно.
• Экономят на проверке. Отправить тестовую заявку, оплату и выгрузку при приёмке — 20 минут. Найти потерянные заявки через месяц — намного дольше.

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

Что спросить у подрядчика про устройство проекта?

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

1. Есть ли в проекте бэкенд и база данных? Если да, что в ней хранится?
2. Как владелец будет менять тексты, цены и фото: через админку, CMS или через разработчика?
3. Куда попадают заявки и заказы и что будет, если почта или CRM временно недоступны?
4. На каких технологиях написаны фронтенд и бэкенд и насколько они распространены — смогут ли с ними работать другие разработчики?
5. Какой хостинг нужен, сколько он стоит у провайдера и на кого оформлен?
6. Как делаются резервные копии базы и как из них восстановиться?
7. Где будет исходный код обеих частей и какие доступы вы получите после сдачи?
8. Что входит в поддержку: обновления сервера, мониторинг сбоев, правки обмена при изменении внешних API?

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

Короткие ответы на частые вопросы

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

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

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

Это часть, которая работает на сервере и не видна посетителю: принимает заявки, хранит данные в базе, считает цены, проверяет права доступа, отправляет письма и обменивается данными с CRM, 1С и платёжными сервисами.

В чём главная разница между фронтендом и бэкендом?

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

Админка — это фронтенд или бэкенд?

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

Нужно ли заказчику нанимать отдельно фронтендера и бэкендера?

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

Сколько стоит сайт с бэкендом в Roboweb?

По прайсу лендинг с формой заявки — от 24 000 ₽, интернет-магазин с заказами и админкой — от 104 000 ₽, веб-приложение с базой данных и API — от 160 000 ₽. Точную сумму называем после брифа и фиксируем в договоре.

Услуги и кейсы по теме: поддержка сайта от 7 900 ₽/мес · заказная разработка · кейс LENCAR · цены и сроки