Фронтенд и бэкенд: в чём разница и кто нужен вашему сайту

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

Представьте ресторан. Зал, меню, официант, подача блюда — это фронтенд. Кухня, склад продуктов, рецепты и касса, которая считает чек, — это бэкенд. Гость не видит кухню, но без неё ему принесут красивую тарелку без еды.

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

Чем серверное программирование отличается от клиентского, хорошо объясняет курс MDN о серверной части сайтов: сервер берёт данные из базы и формирует страницу под конкретного пользователя, а браузер её показывает. Общая схема «браузер — сервер» описана в статье MDN как работает веб.

Несколько терминов, которые встретятся в смете и переписке с разработчиком:

• Вёрстка — перевод макета дизайнера в код страницы. Это часть фронтенда.
• База данных — хранилище на сервере: заявки, товары, пользователи, заказы.
• API — способ, которым программы обмениваются данными. Например, сайт передаёт заявку в CRM через её API.
• Интеграция — настроенная связь сайта с другим сервисом: CRM, 1С, платёжной системой, службой доставки.
• Фулстек-разработчик — специалист, который делает и фронтенд, и бэкенд.

Кто за что отвечает на сайте компании

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

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

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

Фронтенд-разработчик берёт макет дизайнера и превращает его в работающие страницы. Он отвечает за то, чтобы сайт одинаково выглядел в разных браузерах, не ломался на телефоне, быстро грузился и чтобы кнопки реагировали на нажатие. Инструменты: HTML (структура страницы), CSS (оформление), JavaScript (поведение), фреймворки вроде React или Vue.

Бэкенд-разработчик пишет то, что работает на сервере: логику, базы данных, интеграции, защиту от взломов и спама. Он выбирает, где и как хранить данные, как сайт обменивается информацией с CRM и 1С, что произойдёт, если в момент оплаты пропадёт связь. Инструменты: PHP, Python, Node.js, Go и другие языки, базы данных вроде MySQL или PostgreSQL.

Рядом работают ещё несколько ролей, которых заказчики часто путают с разработчиками:

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

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

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

Когда сайту нужен собственный бэкенд

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

1. Личный кабинет. Клиенты или партнёры входят по паролю и видят свои заказы, документы, бонусы.
2. Сложный расчёт. Цена зависит от десятка параметров и вашего прайса, который меняется каждую неделю.
3. Обмен с учётной системой. Остатки и цены подтягиваются из 1С или складской программы, заказы уходят обратно.
4. Нестандартная оплата. Предоплата частями, подписка, расчёт с несколькими юрлицами.
5. Большой каталог. Тысячи товаров с фильтрами, поиском и регулярной выгрузкой.
6. Хранение личных данных пользователей. Анкеты, медицинские данные, документы.
7. Сервисные функции. Онлайн-запись с расписанием специалистов, бронирование, расчёт доставки по адресу.

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

Когда хватит конструктора или CMS

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

CMS (система управления сайтом, например WordPress или 1С-Битрикс) — промежуточный вариант. Серверная часть готова, но работает на вашем хостинге, и её можно дописывать под свои задачи. Чем CMS отличаются друг от друга и какую выбрать, мы подробно разобрали в статье CMS простыми словами, а сравнение популярных конструкторов — в материале какой конструктор сайтов выбрать.

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

Как читать смету разработчика

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

Типовые строки и что за ними стоит:

Обратите внимание на две вещи. Первая: если в смете много бэкенда, а по вашей задаче он не нужен, вам продают лишнее. Вторая: если в задаче есть кабинет или интеграция с 1С, а в смете только вёрстка, исполнитель недооценил объём, и цена вырастет по ходу работы. Чтобы смета была точной, сначала опишите задачу: как это сделать за вечер, мы показали в статье про техническое задание на сайт. Общие ориентиры по ценам разных типов сайтов собраны в материале из чего складывается цена сайта.

Условный пример: две сметы на один сайт

Пример условный, не кейс студии. Компания по установке окон в Казани хочет сайт: 8 страниц, калькулятор стоимости, форма заявки с передачей в CRM. Запросила две сметы, ставка у исполнителей примерно одинаковая, 2 000 ₽ в час.

Смета А, заказная разработка: вёрстка 8 страниц — 40 часов, калькулятор на сервере с базой цен — 30 часов, своя система приёма заявок — 20 часов, интеграция с CRM — 12 часов, админка для правки текстов — 25 часов, тестирование и запуск — 13 часов. Итого 140 часов, 280 000 ₽.

Смета Б, CMS или конструктор: сборка и настройка 8 страниц — 30 часов, калькулятор на стороне браузера с формулой — 12 часов, формы и передача заявок в CRM через готовую интеграцию — 6 часов, тестирование и запуск — 8 часов. Итого 56 часов, 112 000 ₽.

Разница — 168 000 ₽. Почти вся она приходится на серверную часть, которую в варианте Б заменили готовые инструменты. Если прайс компании меняется раз в квартал и в калькуляторе пять параметров, смета Б решает задачу полностью. Если цены зависят от остатков на складе и меняются ежедневно, у сметы А появляется смысл. Вопрос не «какая смета дешевле», а «какую задачу решает каждая строка».

Что спросить у разработчика до старта

Эти вопросы помогают понять, не продают ли вам лишнюю сложность и не забыли ли важное:

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

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

Частые ошибки заказчика

• Заказывать свой бэкенд для сайта-визитки. Платите за серверную разработку, а потом за её поддержку, хотя задачу решил бы конструктор.
• Выбирать конструктор под сервис с кабинетом. Через полгода упираетесь в ограничения платформы и переделываете всё с нуля.
• Не спрашивать, кто будет вносить правки. Если тексты меняет только программист, каждая замена телефона в шапке превращается в счёт.
• Принимать смету без разбивки. Строка «программирование» может скрывать и 30 часов, и 300.
• Забывать про доступы. Код, сервер и база должны быть оформлены на компанию, иначе при смене подрядчика вы теряете сайт.
• Считать, что красивый фронтенд гарантирует заявки. Сайт может отлично выглядеть и при этом терять заявки из-за сломанной передачи в CRM на стороне сервера.

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