Кухня и зал: как устроен сайт изнутри (бэкенд и фронтенд)
Вы обсуждаете сайт с разработчиком, и он говорит: «Фронт готов, осталось прикрутить бэк». Что это значит и почему «невидимая» часть занимает половину сметы? Разбираемся на самой понятной аналогии — ресторане.
Это статья из серии «Просто об IT», где мы объясняем базовые понятия владельцам бизнеса. Поняв разницу фронтенда и бэкенда, вы будете точнее ставить задачи и лучше понимать, за что платите.
Ресторан: зал и кухня
Представьте ресторан. Гость видит зал: интерьер, меню, официанта. Это фронтенд — «лицевая» часть (front — перед). На сайте это всё, что вы видите и трогаете: дизайн, тексты, кнопки, формы, анимации.
Но еда готовится на кухне, которую гость не видит. Это бэкенд — «задняя» часть (back — зад). На сайте это программы на сервере: они принимают заказ, считают цену со скидкой, проверяют наличие на складе, списывают оплату, отправляют письмо. Гость их не видит — но без кухни ресторан просто декорация.
Заказ — это диалог зала и кухни: официант (фронтенд) принимает пожелания гостя и передаёт их на кухню (бэкенд), кухня готовит и отдаёт блюдо обратно в зал. На сайте так же: форма отправляет данные на сервер, сервер обрабатывает и возвращает результат — «заказ оформлен, ждите доставку».
Почему бэкенд не видно, но он дороже
Владельцы часто удивляются смете: «Дизайн уже готов — за что ещё половина суммы?» За кухню. Посчитайте, что должно произойти после нажатия кнопки «Оформить заказ» в интернет-магазине: проверить наличие товара, применить промокод, рассчитать доставку по адресу, создать заказ в базе, отправить данные в платёжную систему, дождаться подтверждения оплаты, уведомить менеджера, отправить чек клиенту. Восемь операций за одну секунду — и каждая должна работать безошибочно, включая случаи «оплата не прошла» и «товар кончился, пока клиент думал».
Фронтенд без бэкенда — красивый муляж: кнопки есть, но нажатия ни к чему не приводят. Бэкенд без фронтенда — работающая, но недоступная людям машина. Продукт получается только вместе.
Отсюда и специализации разработчиков: фронтенд-разработчик, бэкенд-разработчик и фулстек (full stack) — тот, кто делает обе части. Для небольших проектов один фулстек-разработчик часто эффективнее команды.
Где что живёт: в браузере и на сервере
Техническая деталь, которая многое объясняет: фронтенд выполняется на устройстве клиента — в его браузере, на его телефоне. Бэкенд — на вашем сервере. Поэтому фронтенд у всех работает чуть по-разному (старый телефон, другой браузер, медленный интернет), а бэкенд — одинаково для всех.
Из этого следуют практические вещи. Сайт медленно открывается у конкретного клиента — возможно, дело в его устройстве или сети. Медленно у всех — смотрим на сервер и бэкенд. Изменить цвет кнопки — работа фронтенда, обычно быстрая. Изменить логику скидок — работа бэкенда, и «просто поменять цифру» там бывает совсем не просто, если логика завязана на другие части системы.
Как это знание использовать на практике
Когда вы ставите задачу подрядчику, полезно понимать, какую «половину» она затрагивает — от этого зависят сроки и цена. «Поправить текст на главной» — фронтенд, минуты. «Сделать, чтобы заказы падали в нашу CRM» — бэкенд-интеграция, дни. «Добавить личный кабинет с историей заказов» — обе части сразу, недели.
И наоборот: если подрядчик оценивает «поменять цвет кнопки» в неделю работы — либо у проекта проблемы с кодом, либо вам стоит спросить, что именно там занимает столько времени. Здоровый проект позволяет делать мелкие правки быстро.
Частые вопросы
Что такое API? Разработчики постоянно это слово используют.
API — это «окошко выдачи» между кухней и залом: строгий список команд, которые фронтенд (или другая система) может попросить у бэкенда: «дай список товаров», «создай заказ». Через API же ваш сайт общается с внешними сервисами: платёжками, СМС-шлюзами, CRM.
Фулстек-разработчик — это лучше или хуже двух специалистов?
Для малого и среднего проекта один фулстек часто лучше: нет потерь на коммуникацию, один ответственный. На крупных продуктах с большой нагрузкой выигрывают специализированные команды. Это вопрос масштаба, а не качества.
Почему «простая» доработка может стоить дорого?
Видимая простота обманчива: за маленькой кнопкой может стоять большая логика на бэкенде. Классика — «добавьте оплату частями»: на фронтенде это одна кнопка, на бэкенде — интеграция с банком, графики платежей, обработка просрочек.