Статья
Фронтенд и бэкенд: в чём разница простыми словами
Фронтенд — то, что видит и трогает посетитель: страница, кнопки, формы, анимация. Бэкенд — то, что работает за кулисами: принимает заявку, сохраняет заказ, считает цену, проверяет пароль. Разбираем на примере обычного сайта, где заканчивается одно и начинается другое и кто этим занимается.
Простыми словами
Сравните сайт с рестораном. Фронтенд — зал, меню и официант: всё, что видит гость. Бэкенд — кухня, склад и касса: гость их не видит, но без них ужина не будет.
Слова пришли из английского: front end — передняя часть, back end — задняя. Обе части нужны, чтобы сайт работал.
Пример: форма заявки
Вот что происходит, когда человек отправляет заявку:
- Фронтенд показывает поля, подсказывает «укажите телефон», не даёт нажать кнопку дважды и после отправки показывает «Заявка отправлена».
- Бэкенд принимает данные, проверяет их, отсеивает спам, сохраняет согласие на обработку персональных данных и передаёт заявку менеджеру.
Между собой они общаются через API — договорённость о том, какие данные и в каком виде фронтенд отправляет, а бэкенд возвращает.
Чем они отличаются
| Что сравниваем | Фронтенд | Бэкенд |
|---|---|---|
| Где работает | В браузере посетителя | На сервере |
| Что делает | Показывает страницу и реагирует на действия | Хранит и обрабатывает данные |
| Технологии | HTML, CSS, JavaScript, React, Vue | PHP, Python, Node.js, Go, базы данных |
| Что видит посетитель | Всё, что на экране | Только результат: заявка ушла, заказ оформлен |
| Как выглядит поломка | Вёрстка поехала на телефоне | Заявки не доходят, заказы теряются |
JavaScript работает с обеих сторон: в браузере — для интерфейса, на сервере — через Node.js. А фреймворки вроде Next.js объединяют фронтенд и бэкенд в одном проекте.
Всегда ли нужен бэкенд
Не всегда. Простой сайт может быть набором готовых страниц — это статический сайт, о нём статья «Статический сайт». Но даже ему нужен небольшой бэкенд для заявок: форма должна куда-то отправлять данные. Интернет-магазину, личному кабинету и бронированию бэкенд нужен обязательно.
Кто этим занимается
- Дизайнер рисует, как всё будет выглядеть, ещё до кода.
- Фронтенд-разработчик верстает страницы и программирует поведение интерфейса. Что такое вёрстка, разобрано в статье «Вёрстка сайта».
- Бэкенд-разработчик пишет серверную логику: базы данных, оплату, связь с CRM и 1С.
- Фулстек-разработчик делает и то и другое — на небольших проектах так бывает чаще всего.
Что важно знать заказчику
- Красивый фронтенд без надёжного бэкенда — это сайт, где заявки иногда пропадают. Перед запуском проверьте путь заявки до конца — об этом статья «Тестирование сайта».
- Конструкторы и CMS берут бэкенд на себя: сервера вы не видите, но он есть. О системах управления — статья «Что такое CMS».
- Безопасность — в основном забота бэкенда: проверка данных, защита форм, обновления. Подробнее — в статье «Защита сайта».
Как это делаем мы
У нас дизайн, тексты и код — в одной команде, поэтому фронтенд и бэкенд не нужно сводить между собой и объяснять каждому одно и то же. Наш собственный сайт сделан на Next.js: страницы и серверная часть живут в одном проекте.
В лендинге форма заявки и кнопки мессенджеров работают с первого дня, заявки приходят в Telegram или на почту. Вёрстка — на коде, поэтому страница быстро открывается и на телефоне с медленным интернетом.