раздел 01

Как они связаны

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

API - это набор правил, по которым фронт обращается к бэку: куда постучаться и что попросить. Подробнее про API есть отдельный курс, здесь хватит общей картины.

Схема всегда одинаковая: фронт отправляет запрос, бэк отвечает данными, фронт показывает результат. Данные в ответе чаще всего приходят в формате JSON - это просто текст, в котором аккуратно разложена информация (имя, цена, список товаров и так далее).

Фронт спрашивает - бэк отвечает - фронт показывает. Так общается любое приложение.

Путь одного нажатия кнопки

Возьмём живой пример. Вы открыли интернет-магазин и нажали кнопку «Показать товары». Вот что происходит за доли секунды.

1
Пользователь нажимает кнопку
Это происходит на фронтенде - в браузере. Фронт понимает: нужно получить список товаров.
2
Фронт отправляет запрос к бэку
По API: «дай мне товары». Запрос уходит на сервер по интернету.
3
Бэк идёт в базу данных
Сервер принимает запрос, обращается к базе данных и достаёт оттуда список товаров.
4
Бэк возвращает данные
Сервер упаковывает товары в JSON и отправляет ответ обратно фронту.
5
Фронт отрисовывает результат
Браузер получает данные и показывает их пользователю - карточки товаров появляются на экране.

Почему так удобно

Такое разделение позволяет менять части независимо. Можно переделать внешний вид страницы (фронт), не трогая логику на сервере. Или поменять расчёты на бэке - и фронт даже не заметит, ведь он просто просит данные и показывает то, что пришло.

Один и тот же бэк может обслуживать сразу несколько фронтов: сайт, мобильное приложение, чужие сервисы. Все они стучатся по одному и тому же API и получают одинаковые данные.

Главное из главы

  • Фронт и бэк общаются через API.
  • Фронт отправляет запрос, бэк отвечает данными (обычно в формате JSON).
  • Типичный путь: нажал кнопку, ушёл запрос, бэк сходил в базу, вернул данные, фронт отрисовал.
  • Подробнее про запросы и ответы - в курсе про API.