Что такое Frontend и Backend
У вас появляется идея сайта.
Вы проектируете его в деталях: т меню, карточки товаров, кнопка Купить.
Вы описываете, как пользователь нажимает на кнопку и получает свой заказ.
А потом вы лезете разбираться, как это устроено, и понимаете: сайт это не один кусок кода.
Это две части, которые работают вместе. Одна отвечает за то, что видит человек. Другая за то, что происходит после нажатия на кнопку.
И тут появляется разделение на Frontend и Backend.
Frontend это всё, что видит пользователь.
Кнопки, картинки, формы, анимации. Когда вы заходите на сайт и думаете «красиво сделали» или «ничего не понятно», вы оцениваете frontend.
Backend это всё, что происходит за кулисами. Ввели пароль и кто-то должен проверить, правильный ли он. Оформили заказ и кто-то должен его сохранить. Этот кто-то и есть backend.
Как они работают вместе
Вы нажимаете Добавить в корзину.
Это frontend, он отреагировал на клик. Но сам по себе frontend ничего не помнит.
Он не знает, сколько товара на складе. Не знает, что вы положили в корзину минуту назад. Вся эта информация живёт на сервере.
Поэтому frontend отправляет запрос: пользователь хочет добавить вот этот товар. Запрос улетает на сервер.
Backend его принимает. Лезет в базу данных, проверяет наличие, добавляет товар в корзину, пересчитывает сумму. И отвечает: готово, в корзине три позиции.
Frontend получает ответ и обновляет экран. Появляется цифра 3 на иконке корзины.
Пользователь видит только кнопку и результат. Всё остальное скрыто.
Из чего они состоят
Frontend это три вещи:
структура страницы,
её внешний вид
поведение при кликах и скроллах.
Весь этот код работает прямо в браузере, на устройстве пользователя.
Backend это сервер и база данных.
Сервер принимает запросы и отвечает на них.
База хранит всё: пользователей, товары, заказы. Это работает где-то далеко, в дата-центре.