Баннер
Глоссарий

Что такое фронтенд и бэкенд

Камила Мирзакаримова
/ 18 января 2023 11:00
6.4 тыс.
6 мин.
Текст изменился / 27 июля 2023

У любого сайта или приложения две стороны: явная, которая видна юзерам, — фронтенд, и скрытая — бэкенд. С фронтендом взаимодействуют пользователи, на бэкенде происходят все операции. Разбираемся, как это устроено в мире IT.

фронтенд
Фронтенд- и бэкенд-разработчики — востребованные специалисты в сфере IT

Кто такие фронтенд- и бэкенд-разработчики

Frontend переводится с английского языка как «внешний интерфейс», backend — «серверная часть». Фронтенд — «лицо» системы; инструменты и компоненты, которые позволяют пользователю взаимодействовать с сайтом. 

Бэкенд — внутренняя «начинка»; законы, по которым система работает. В зависимости от специализации различают и разработчиков.

Как работает 

Рассмотрим термины на бытовом примере. Допустим, мы листаем каталог магазина одежды в интернете: задаем критерии поиска с помощью фильтра, видим фотографии товаров, нажимаем на кнопку «Добавить в корзину», чтобы позже купить понравившийся вариант. 

Все, на что мы кликаем мышкой и что наблюдаем — результат стараний frontend-разработчика. 

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

фронтенд
Все, что мы видим на сайте и до чего можем дотянуться мышкой — фронтенд

Бэкенд вне зоны досягаемости пользователей, но именно от него зависит работа сайта. Backend-разработчик пишет механизмы, благодаря которым выполняется выбранное пользователем во фронтенде действие.

Чтобы лучше понять, за что отвечает бэкенд, мысленно вернемся в магазин одежды. Как мы уже поняли, карточка товара и кнопка «Добавить в корзину» — элементы фронтенда. Но сама операция — добавление товара в корзину — происходит за счет бэкенда. 

«За кулисами» обрабатывается информация, формируется корзина, идет подсчет стоимости, включая доставку. Затем информация из бэкенда возвращается во фронтенд и отображается в виде картинок, цифр, текста и прочих визуальных составляющих страницы.

Если фронтенд — скорее результат, то механизмы, с помощью которых он достигается, находятся на бэкенде. Бэкенд располагается на серверах —  высокопроизводительных компьютерах, где хранится приложение или сайт. 

Сервер, подключенный к сети, отправляет код в браузер или гаджет, заставляя страницу или приложение работать. 

Попробуйте продукт, созданный разработчиками Совкомбанка — виртуальный офис. Все необходимое для командной работы собрано в одном интерфейсе. 

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

На каких языках создают коды 

Рабочий инструмент фронтендера —  JavaScript. Он работает в связке с языками разметки HTML и CSS, которые «объясняют» браузеру, что именно должно отображаться на странице: количество и положение блоков, размер и начертание шрифтов, цвета, расположение изображений, аудио и видео. 

HTML и CSS просто описывают облик страницы, но не определяют функции элементов на ней. С помощью JavaScript создаются кнопки взаимодействия («Купить», «Оплатить», «Добавить в избранное») и различные формы — вроде «Связаться с нами»). На этом же языке пишутся алгоритмы, по которым сервер будет обмениваться информацией с браузером.

Языков программирования в бэкенде больше: это Python, Go, PHP,  C#, Rub и другие. С помощью JavaScript бэкенд-разработчик тоже может кодить, но обычно так делают программисты, которые пришли из фронтенд-разработки. 

фронтенд и бэкенд разница
Бэкенд не виден пользователю, но это начинка, благодаря которой работает сайт или приложение

На заметку будущему программисту 

Как иголочка с ниточкой, фронтенд и бэкенд связаны между собой. Если представить эти два компонента в виде айсберга, то вершина, выглядывающая из воды — это фронтенд. Он составляет около 20% от общей работы сайта. А все, что сокрыто под водой — это 80% бэкенда.

В зависимости от склада характера, ума и личных предпочтений вы можете определить, какое направление лучше подойдет, если решите попробовать свои силы в программировании.

Фронтенд-разработчик плоды своего труда может «пощупать»: интерфейс — это вполне «осязаемая» вещь, с которой можно взаимодействовать. 

Учтите, что в роли фронтендера придется много общаться с заказчиками, которые не разбираются в программировании. 

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

Поскольку тренды постоянно меняются, придется следить за всеми тенденциями и регулярно учиться новому. 

Осваивайте перспективные профессии в IT с помощью онлайн-курсов. Оплатить их можно в кредит: Совкомбанк направит деньги сразу на карту.

Не обязательно идти в банк, чтобы получить деньги. Кредит на карту до 5 млн рублей можно быстро оформить в Совкомбанке. Для этого необходимо только заполнить заявку на сайте, и в кратчайшие сроки средства зачислят на ваш счет.

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

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

Факт дня
Самая древняя русская монета называлась «златник», ее чеканили вскоре после Крещения Руси князем Владимиром.

Итоги

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

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

На ниве программирования есть и «универсальные солдаты» — фулстек-разработчики, которые занимаются и фронтендом, и бэкендом. 

Чаще всего с ними работают новички, которые хотят посмотреть на работу программиста с разных сторон, а затем избрать конкретную область и совершенствоваться в одном из направлений. 

Для тех, кто ценит свое время

Подпишитесь на еженедельную email-рассылку и узнавайте о самых интересных публикациях.
Хотите узнавать о новых публикациях не заходя на сайт?
Подписывайтесь на анонсы в ВК и Телеграме
banner image
6.4 тыс.
Камила Мирзакаримова
Камила Мирзакаримова
В мире фактов важно не потеряться! Просто и увлекательно пишу про финансы, ESG и умное потребление.
Баннер