Что где живёт

Теперь разложим по полочкам: что относится к фронтенду, а что к бэкенду. Граница проходит по одному простому признаку - видит это пользователь или нет.

Что живёт на фронтенде

• HTML и CSS - структура страницы и её оформление: где заголовок, где кнопка, какого она цвета.
• Интерфейс - всё, что пользователь видит и трогает: меню, формы, картинки, анимации.
• Место работы - браузер пользователя. Код фронта скачивается к вам и выполняется на вашем устройстве.
• Языки - JavaScript и его строгий вариант TypeScript.
• Фреймворки - готовые наборы инструментов: React, Vue, Angular. Они упрощают сборку интерфейса.

Что живёт на бэкенде

• Логика - что делать с данными: посчитать сумму заказа, проверить скидку, решить, можно ли пускать пользователя.
• База данных - где хранятся товары, заказы, пользователи. Бэк ходит туда за данными.
• Авторизация - проверка, кто вы и можно ли вам сюда. Пароли проверяются именно на сервере.
• Секреты и ключи - пароли к базе, ключи к платёжным системам и внешним сервисам.
• Место работы - сервер, удалённый компьютер. Языки - Python, Node.js, Go и другие.

Почему секреты живут только на бэке

Это важный момент, который часто упускают новички. Всё, что попадает на фронтенд, скачивается в браузер пользователя. А значит, любой человек может открыть инструменты разработчика и посмотреть этот код. Никакого секрета там не спрячешь.

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

Всё, что на фронте, видно пользователю. Поэтому секреты живут только на бэке.

Простой пример: чтобы списать оплату, нужен секретный ключ платёжной системы. Если положить его на фронт, его украдут в первый же день. Поэтому фронт просто говорит бэку «проведи оплату», а сам ключ остаётся на сервере и наружу не выходит.