Фронтенд (UI), бэкенд (логика), база данных — обзор ролей
Фронтенд, бэкенд, база данных — обзор ролей
Введение
Когда разработчик говорит "это баг бэкенда" или "проблема в базе", тебе нужно понимать, о чём речь. В этом уроке разберёмся, что делает каждый из трёх слоёв веб-приложения и как они связаны между собой.
Фронтенд (Frontend)
Фронтенд — это то, что видит и с чем взаимодействует пользователь прямо в браузере.
Технологии: HTML, CSS, JavaScript. Современные фронтенд-приложения чаще всего написаны на фреймворках: React, Vue, Angular.
Что делает фронтенд:
- Отрисовывает страницы и компоненты (кнопки, формы, таблицы)
- Реагирует на действия пользователя
- Отправляет запросы к бэкенду через API
- Отображает полученные данные
Где выполняется: в браузере пользователя, на его устройстве.
Пример: Когда ты видишь список товаров в интернет-магазине — это фронтенд отрисовал HTML на основе данных, которые получил от бэкенда.
Бэкенд (Backend)
Бэкенд — это серверная часть, "мозг" приложения. Пользователь его не видит, но именно здесь происходит вся важная работа.
Технологии: Node.js, Python (Django/FastAPI), Java (Spring), Go, Ruby on Rails и многие другие.
Что делает бэкенд:
- Принимает запросы от фронтенда
- Проверяет, кто делает запрос (аутентификация)
- Проверяет, имеет ли он право (авторизация)
- Выполняет бизнес-логику (считает скидки, формирует заказы, отправляет письма)
- Обращается к базе данных за данными или для их сохранения
- Возвращает ответ фронтенду
Где выполняется: на сервере в дата-центре (или облаке).
База данных (Database)
База данных — это место постоянного хранения данных. Когда сервер перезагружается, данные в базе сохраняются.
Типы баз данных:
- Реляционные (SQL): PostgreSQL, MySQL, SQLite — данные в таблицах, строгая структура
- Документные (NoSQL): MongoDB — данные в виде JSON-документов
- Ключ-значение: Redis — сверхбыстрое хранилище для кешей и сессий
Что хранится в базе: пользователи, заказы, товары, статьи, комментарии — всё, что должно переживать перезапуск сервера.
Как они общаются
Пользователь
↕
[ Фронтенд ] — React-приложение в браузере
↕ (HTTP/API запросы)
[ Бэкенд ] — Node.js / Python сервер
↕ (SQL / ORM запросы)
[ База данных ] — PostgreSQL
Каждая стрелка — это чёткий интерфейс:
- Фронтенд ↔ Бэкенд: API (обычно REST или GraphQL)
- Бэкенд ↔ База: SQL запросы или ORM (например, Prisma, SQLAlchemy)
Взгляд тестировщика: баги по слоям
Знание слоёв помогает изолировать дефекты:
| Симптом | Вероятный слой |
|---|---|
| Кнопка не активна, хотя должна быть | Фронтенд |
| Данные отображаются неверно (но API вернул правильно) | Фронтенд |
| API вернул неверные данные | Бэкенд |
| Данные не сохраняются между сессиями | Бэкенд или база данных |
| Очень медленные запросы к большим спискам | Бэкенд (логика) или база данных (индексы) |
| После перезапуска сервера данные исчезли | Бэкенд сохранял в памяти, а не в базу |
Практический пример
Сценарий: Пользователь регистрируется, но потом не может войти.
Что проверить:
- Фронтенд: правильно ли форма отправляет данные? Нет ли ошибок в консоли?
- Бэкенд: вернул ли API успешный ответ при регистрации? Какой статус-код?
- База данных: создалась ли запись пользователя? (спросить разработчика или проверить через API)
Что мы запомним
- Фронтенд = то, что видит пользователь; работает в браузере
- Бэкенд = серверная логика, обрабатывает запросы и данные
- База данных = постоянное хранилище данных
- Все три слоя общаются через чёткие интерфейсы: API и SQL
- Понимание слоёв помогает быстро локализовать дефект при написании баг-репорта