Языки программирования frontend backend

Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они взаимодействуют

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

Давайте начнем с определений.

Фронтенд — все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript.

HTML (HyperText Markup Language) говорит браузеру, каково содержание страницы, например, «заголовок», «параграф», «список», «элемент списка».

Senior/ Middle FrontEnd (React) Developer Центр HR TECH (Проект Атомкор) АО «Гринатом» , , можно удалённо , По итогам собеседования

CSS (Cascading Style Sheets) говорит браузеру, как отображать элементы, например, «после первого параграфа отступ в 20 пикселей» или «весь текст в элементе body должен быть темно-серым и написан шрифтом Verdana».

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

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

Прим. ред. Профессия бэкенд-разработчика вошла в топ наиболее сложных IT-профессий.

Для бэкенда вы можете использовать любые инструменты, доступные на вашем сервере (который, по сути, является просто компьютером, настроенным для ответов на сообщения). Это означает, что вы можете использовать любой универсальный язык программирования: Ruby, PHP, Python, Java, JavaScript / Node, bash. Это также означает, что вы можете использовать системы управления базами данных, такие как MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached.

Структура взаимодействия бэкенда и фронтенда

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

Серверные приложения

В этом случае HTTP-запросы отправляются напрямую на сервер приложения, а сервер отвечает HTML-страницей.

Между получением запроса и ответом сервер обычно ищет по запросу информацию в базе данных и встраивает ее в шаблон (ERB, Blade, EJS, Handlebars).

Когда страница загружена в браузере, HTML определяет, что будет показано, CSS — как это будет выглядеть, а JS — всякие особые взаимодействия.

Связь с использованием AJAX

Другой тип архитектуры использует для связи AJAX (Asynchronous JavaScript and XML). Это означает, что JavaScript, загруженный в браузере, отправляет HTTP-запрос (XHR, XML HTTP Request) изнутри страницы и (так сложилось исторически) получает XML-ответ. Сейчас для ответов также можно использовать формат JSON.

Это значит, что у вашего сервера должна быть конечная точка, которая отвечает на запросы JSON- или XML-кодом. Два примера протоколов, используемых для этого — REST и SOAP.

Клиентские (одностраничные) приложения

AJAX позволяет вам загружать данные без обновления страницы. Больше всего это используется в таких фреймворках, как Angular и Ember. После сборки такие приложения отправляются в браузер, и любой последующий рендеринг выполняется на стороне клиента (в браузере).

Такой фронтенд общается с бэкендом через HTTP, используя JSON- или XML-ответы.

Универсальные/изоморфные приложения

Некоторые библиотеки и фреймворки, например, React и Ember, позволяют вам исполнять приложения как на сервере, так и в клиенте.

В этом случае для связи фронтенда с бэкендом приложение использует и AJAX, и обрабатываемый на сервере HTML.

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

Автономный фронтенд

Веб-приложениям, которые вы собираетесь создавать, подключение к Сети будет требоваться всё меньше и меньше.

Прогрессивные веб-приложения загружаются лишь один раз и работают (почти) всегда. Вы можете хранить базу данных в браузере. В некоторых случаях вашим приложениям нужен бэкенд только при первой загрузке, а затем лишь для синхронизации / защиты данных. Такой уровень постоянства означает, что большая часть логики приложения находится непосредственно в клиенте.

Легкий бэкенд

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

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

Размытые границы

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

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

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

Источник

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

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

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

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

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

Как работает

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

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

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

Источник