Я искренне люблю простые и понятные аналогии, поскольку данный метод дает четкое понимание и хорошо откладывается в памяти, не важно о какой сфере деятельности идет речь. В данном блоге буду придерживаться правилу раскладывать все по полочкам так, чтобы понятно было даже ребенку. Буду использовать визуальный контент.
В этой статье поговорим о важном: что же такое бэкенд и фронтенд и в чем разница. Давайте разбираться.
Всякий раз, когда разрабатывается компьютерная программа, будь то веб-сайт, компьютерное приложение или мобильное приложение, она состоит из двух основных частей: бэкенда и фронтенда.
Фронтенд- то, что пользователь может видеть, заходя на любой сайт, с чем может взаимодействовать: кнопочки, выпадающие списки, различные иконки, картинки и тд. То есть весь интерфейс. Фронтенд реализуется с помощью верстки: HTML, CSS и языка программирования JavaScript. Приводя параллель с автомобилем, это то, как он выглядит: цвет, дизайн, ручки.
HTML (HyperText Markup Language) говорит браузеру, каково содержание страницы, что там должно располагаться и где, например, «заголовок», «параграф», «список», «элемент списка».
Приведем наглядный пример:
Создадим файлик в любой из папок с расширением html, к примеру, example.html и наполним его следующим содержимым:
Все, что вы видите не так страшно, на самом деле. <> - это тег или элемент. HTML-элементы — основа языка HTML. Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) <> и конечным (закрывающим) </> тегом. Открывающий и закрывающий теги содержат имя элемента (например, <body>...</body>). Все теги подробно можно посмотреть в документации по html.
С помощью тегов вы можете разделять содержимое страницы на блоки, выделять параграфы, заголовки и подзаголовки. Содержимое браузер воспринимает сверху вниз, сейчас нас будет интересовать то, что находится в теге body.
Если мы откроем этот файл в браузере (просто кликнув по файлу, позже подробней остановимся на том, как быстро и легко это сделать в IDE), то увидим на странице в браузере, в левом верхнем углу следующее:
Так как указали "Hello" в body в файлике html. Попробуем поменять цвет надписи и фона, выравнять текст по центру c помощью css.
CSS (Cascading Style Sheets) говорит браузеру, как отображать элементы, например, «после первого параграфа отступ в 20 пикселей» или «весь текст в элементе body должен быть темно-серым и написан шрифтом Verdana». Также можно менять стили шрифтов, фон и многое другое.
Добавим в html файл, в тег <style>...</style> следующее:
В теге стиля мы говорим, что задний фон всего, что находится в теге body должно быть светло-голубого цвета, а в теге p (параграф) цвет должен быть белым и текст будет располагаться по центру сверху.
Поясню заранее, что хорошей практикой является разделять html от css, то есть то, что мы сейчас добавили должно храниться в отдельном файлике с расширением .css и подключаться к html.
Для простоты мы будем пока работать в одном. Итак, вот, что у нас получилось:
Фронтендер, как правило, не придумывает дизайн, а пользуется готовым шаблоном, который сделал дизайнер до этого, предварительно согласовав с заказчиком.
JavaScript отвечает за динамику. Говорит браузеру, как реагировать на некоторые взаимодействия. Это могут быть анимированные изображения, всплывающие списки при наведении на какую-то иконку, либо всплывающее диалоговое окно, интерактивные карты и вообще любой периодически обновляемый контент.
Сайт с хорошим js можно посмотреть здесь. Обратите внимание на динамику. JavaScript- полноценный язык программирования со своим синтаксисом. Он пишется также в отдельном файле и подключается к html. (Подробно останавливаться на этом в рамках данной статьи мы не будем).
Когда страница загружена в браузере, HTML определяет, что будет показано, CSS — как это будет выглядеть, а JS — всякие особые взаимодействия.
Бэкенд- все, что работает на сервере (другом компьютере), то есть не в браузере или на компьютере, подсоединенном к сети (обычно к Интернету), который отвечает на сообщения от других компьютеров. То есть это вся логика бизнес продукта (сайта или веб-приложения). Это то, что скрыто от глаз пользователя и происходит вне его браузера и компьютера. Бэкенд отвечает за взаимодействие пользователя с внутренними данными, которые потом отображает фронтенд. Бэкенд может быть реализован на таких языках как: Java, Python, Ruby, Elixir, JavaScript и т.д.
Как же взаимодействуют Бэкенд и Фронтенд?
1.Серверные приложения
Сервер- компьютер(обслуживающее устройство, на котором работает ваше приложение в непрерывном режиме.
В этом случае HTTP-запросы (мы до них еще доберемся) отправляются напрямую на сервер приложения, а сервер отвечает HTML-страницей.
Между получением запроса и ответом сервер обычно ищет по запросу информацию в базе данных и встраивает ее в некий шаблон.
2.Связь с использованием AJAX
Другой тип архитектуры использует для связи AJAX (Asynchronous JavaScript and XML). Это означает, что JavaScript, загруженный в браузере, отправляет HTTP-запрос (XHR, XML HTTP Request) изнутри страницы и получает XML-ответ. Сейчас для ответов также можно использовать формат JSON.
Это значит, что у вашего сервера должна быть конечная точка, которая отвечает на запросы JSON- или XML-кодом. Два примера протоколов, используемых для этого — REST и SOAP.
3.Клиентские (одностраничные) приложения
AJAX позволяет вам загружать данные без обновления страницы. Больше всего это используется в таких фреймворках, как Angular и Ember. После сборки такие приложения отправляются в браузер, и любой последующий рендеринг выполняется на стороне клиента (в браузере).
Такой фронтенд общается с бэкендом через HTTP, используя JSON- или XML-ответы.
4.Универсальные/изоморфные приложения
Некоторые библиотеки и фреймворки, например, React и Ember, позволяют вам исполнять приложения как на сервере, так и в клиенте.
В этом случае для связи фронтенда с бэкендом приложение использует и AJAX, и обрабатываемый на сервере HTML.
Далее будем подробнее разбирать каждый тип взаимодействия.
Спасибо за внимание!