Что такое фронтенд и бэкенд — простыми словами, и где живёт твой секретный ключ

Смотри, штука, которая экономит новичку часы паники: когда приложение ломается, беда почти всегда в одной из двух половин. И если ты сходу понимаешь, в какой, — чинишь в разы быстрее. Эти половины — фронтенд и бэкенд. А заодно узнаешь, почему секретный ключ, брошенный «на фронт», утекает за минуту.

Две половины любого приложения

Любой сайт или приложение делится надвое.

Фронтенд — то, что ты видишь и трогаешь. Кнопки, тексты, картинки, поля ввода. Он работает прямо в твоём браузере или на телефоне. Всё, что на экране, — это фронтенд.

Бэкенд — то, что спрятано на сервере, где-то далеко. Он хранит данные, проверяет пароли, считает, ходит в базу. Ты его не видишь никогда — но именно он делает «настоящую» работу.

Аналогия — ресторан. Зал с меню, столиками и официантом — это фронтенд: красиво, понятно, для гостя. Кухня — бэкенд: там готовят, там холодильник с продуктами, гостя туда не пускают. Официант, что бегает между ними, — это API.

Как они разговаривают

Фронтенд сам почти ничего не знает. Нужны данные — он идёт и спрашивает бэкенд через API.

Пример на пальцах: открыл ленту. Фронтенд рисует пустой экран и тут же шлёт бэкенду запрос: «дай последние 20 постов». Бэкенд лезет в базу данных, достаёт посты, отдаёт их — фронтенд раскладывает по карточкам. Тебе кажется, что всё случилось мгновенно и в одном месте. На деле — два разных мира и разговор между ними.

Главный сюрприз: где живут секреты

Вот ради чего стоит дочитать. Всё, что попадает на фронтенд, видно любому. Открой в браузере DevTools (F12) — и увидишь весь код страницы, все запросы, все данные. Фронтенд честно отдаётся тебе целиком, потому что работает на твоём устройстве.

Отсюда железное правило: секретный ключ, пароль от базы, токен оплаты — никогда не на фронтенде. Бросишь API-ключ в код страницы — его за минуту найдёт кто угодно и потратит твои деньги. Секреты живут только на бэкенде, куда чужой не заглянет. Об этом подробнее — как безопасно хранить ключи.

Зачем это тебе, когда что-то сломалось

Практический навык. Приложение ведёт себя не так — сначала спроси: это фронт или бэк?

• Страница кривая, кнопка не нажимается, текст налез — фронтенд. Смотри код страницы, стили, разметку.
• Данные неправильные, ничего не грузится, вылезла ошибка 500 — бэкенд. Смотри сервер, запрос, базу.

Половина отладки — это правильно угадать половину. Дальше искать в разы легче.

А где во всём этом ИИ и вайб-кодинг

Когда ты вайб-кодишь, ИИ пишет обе половины: и красивый фронтенд, и логику на бэкенде. Полезно чувствовать границу — тогда ты можешь сказать агенту точнее: «это на фронте, поправь стиль» или «добавь на бэкенд проверку». Кстати, «задеплоить» приложение — это как раз выложить обе половины на живой сервер, чтобы их увидел не только твой ноутбук.

Вопрос: можно ли обойтись только фронтендом?

Иногда да. Простой лендинг, калькулятор, игра без сохранений — живут целиком на фронтенде. Бэкенд нужен, когда появляются аккаунты, сохранение данных, оплата или секреты. Как только надо что-то спрятать или сохранить между визитами — нужен бэкенд.

Вопрос: фронтенд и бэкенд — это разные языки?

Часто да, но не обязательно. Фронтенд обычно на HTML/CSS/JavaScript (то, что понимает браузер). Бэкенд — на чём угодно: Python, JavaScript, Go. Есть подходы, где обе половины на одном языке, — новичку так даже проще.

Вопрос: а «фулстек» — это что?

Фулстек — человек (или ИИ), который делает обе половины сразу. Когда ты вайб-кодишь в одиночку, ты и есть фулстек: и витрина, и кухня на тебе. ИИ просто берёт на себя большую часть рутины.