Найти в Дзене
Совкомблог

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

Кто такие фронтенд- и бэкенд-разработчики Frontend переводится с английского языка как «внешний интерфейс», backend — «серверная часть». Фронтенд — «лицо» системы; инструменты и компоненты, которые позволяют пользователю взаимодействовать с сайтом. Бэкенд — внутренняя «начинка»; законы, по которым система работает. В зависимости от специализации различают и разработчиков. Как работает Рассмотрим термины на бытовом примере. Допустим, мы листаем каталог магазина одежды в интернете: задаем критерии поиска с помощью фильтра, видим фотографии товаров, нажимаем на кнопку «Добавить в корзину», чтобы позже купить понравившийся вариант. Все, на что мы кликаем мышкой и что наблюдаем — результат стараний frontend-разработчика. Легко убедиться, что каждый компонент на сайте существует благодаря коду, который написал специалист: щелкаем правой кнопкой мыши на странице и выбираем строку «Просмотреть код». Появится несколько окон с большим количеством непонятных не программистам символов и слов — это
Оглавление
  • Кто такие фронтенд- и бэкенд-разработчики
  • Как работает
  • На каких языках пишут коды
  • На заметку будущему программисту
  • Итоги
   Фронтенд- и бэкенд-разработчики — востребованные специалисты в сфере IT
Фронтенд- и бэкенд-разработчики — востребованные специалисты в сфере IT

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

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

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

Как работает

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

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

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