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

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

• Кто такие фронтенд- и бэкенд-разработчики 
• Как работает
• На каких языках пишут коды
• На заметку будущему программисту 
• Итоги

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

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

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

Как работает 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

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

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