Фронтенд и бэкенд: в чём разница
Основы3 минРедакция Innovialabs
Коротко
Фронтенд — это всё, что пользователь видит и нажимает в браузере или приложении; бэкенд — серверная логика, данные и интеграции. Связываются они через API.
Коротко о разнице
- Фронтенд (frontend) — клиентская часть: интерфейс, который работает в браузере или мобильном приложении. Кнопки, формы, анимации, адаптация под экран.
- Бэкенд (backend) — серверная часть: бизнес-логика, база данных, авторизация, платежи, интеграции с внешними сервисами.
Простая аналогия — ресторан. Фронтенд — это зал и меню: то, с чем взаимодействует гость. Бэкенд — кухня и склад: там готовят заказ, но гость их не видит. Официант между ними — это API.
Пример: сервис доставки еды
Посмотрим, кто за что отвечает, когда вы заказываете обед:
| Действие пользователя | Фронтенд | Бэкенд |
|---|---|---|
| Открыл приложение | Показывает список ресторанов, карточки, фильтры | Отдаёт рестораны поблизости из базы |
| Добавил блюдо в корзину | Обновляет счётчик и сумму на экране | Может сохранить корзину, проверить наличие |
| Ввёл промокод | Показывает поле и сообщение об ошибке | Проверяет, действует ли код, пересчитывает цену |
| Оплатил | Открывает форму оплаты | Создаёт заказ, общается с платёжной системой |
| Следит за курьером | Рисует карту и статус | Получает координаты и рассылает обновления |
Обратите внимание: проверки, от которых зависят деньги и данные (цена, скидка, права доступа), всегда делаются на бэкенде. Фронтенд может их дублировать для удобства, но доверять ему нельзя — код в браузере пользователь может изменить.
Типичные технологии
Фронтенд:
- HTML, CSS, JavaScript и TypeScript;
- фреймворки и библиотеки: React, Vue, Angular, Svelte, а также Next.js и Nuxt поверх них;
- для мобильных приложений — Swift, Kotlin, Flutter, React Native.
Бэкенд:
- языки: JavaScript/TypeScript (Node.js), Python, PHP, Go, Java, C# и другие;
- фреймворки: Express, NestJS, Django, FastAPI, Laravel, Spring;
- базы данных: PostgreSQL, MySQL, MongoDB, Redis;
- инфраструктура: серверы, Docker, очереди, хранилища файлов.
Выбор стека зависит от задачи, команды и требований к нагрузке, а не от «модности» технологии.
Как они общаются: API
API — договорённость о том, какие запросы фронтенд может отправлять и какие ответы получит. Чаще всего это REST или GraphQL поверх HTTP, данные передаются в формате JSON.
Пример запроса фронтенда за списком ресторанов:
GET /api/restaurants?lat=41.31&lng=69.24
И ответ бэкенда:
[
{ "id": 12, "name": "Plov Center", "deliveryMinutes": 35 },
{ "id": 47, "name": "Green Bowl", "deliveryMinutes": 25 }
]
Хороший API документирован и стабилен: фронтенд и бэкенд могут разрабатывать параллельно, договорившись о формате заранее.
Кто такой fullstack
Fullstack-разработчик работает с обеими сторонами. Это удобно для небольших проектов и MVP. В крупных продуктах чаще разделяют роли: фронтенд-разработчики глубже разбираются в интерфейсах, производительности браузера и доступности, а бэкенд-разработчики — в архитектуре, базах данных и безопасности.
Частые ошибки заказчиков
- Оценивать проект по макетам. Красивый интерфейс — это часть работы. Логика заказов, роли, интеграции и админка часто требуют больше усилий, чем экраны.
- Хранить важную логику только во фронтенде. Например, расчёт скидки в браузере легко подделать.
- Не договориться об API заранее. Команды начинают ждать друг друга, сроки растут.
- Забыть про админку. Кто-то должен управлять контентом, заказами и пользователями — это тоже бэкенд и интерфейс.