Каждый, кто интересуется вопросами веб разработки, часто слышал эти модные нынче слова — «фронтенд» и «бэкенд». Многие знают, что верстальщик начинает с работы в нише frontend, а далее, получив определённые базовые навыки и выучив хотя бы один язык программирования, переходит на более функциональный бэкенд и становится веб-программистом. Так можно объяснить разницу между этими двумя вариантами архитектуры ПО простыми словами. Как происходит взаимодействие инструментов фронтенд и бэкенд с браузером и в чём между ними разница, более профессионально пояснит данный материал.

Особенности frontend-разработки

Фронтенд – означает всё то, что браузер читает (декодирует) и выводит на экран. Если использовать более простую формулировку, frontend-разработчик создаёт пользовательский интерфейс и основной функционал сайта.

Фронтенд-разработка отвечает за:

  • создание дизайна веб-приложений;
  • создание интерфейса сайтов;
  • юзабилити и подачу информации.

Фактически frontend означает профессиональную верстку и немного программирования. Для того чтобы понять, чем занимается frontend-разработчик, можно посмотреть исходный код страницы любого браузера.

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

Инструменты frontend-разработки:

  1. HTML – формирует архитектуру каждой страницы. Язык гипертекстовой разметки говорит браузеру, как отображать позиционирование элементов – абзацы, списки, заголовки.
  2. CSS – таблица стилей хорошо дополняет HTML, делая некоторые манипуляции более удобными. Благодаря CSS можно более гибко настраивать внешний вид элементов сайта, включая вариативность шрифтов и цветовой заливки.
  3. JavaScript – делает страницу более живой и интерактивной. JS также используется в бэкенде и фактически является языком программирования.

Особенности backend-разработки

Бэкенд – означает все то, что работает вне зрения пользователя. Это прямая противоположность frontend, поскольку бэкенд разработка – это система применения программно-аппаратных инструментов и средств, благодаря которым реализуется логика веб-сайта.

Говоря простыми словами, backend – это незримое для обычного пользователя серверное выполнение, которое нельзя увидеть посредством браузера и вообще на компьютере, просто подключённом к сети WWW.

Бэкенд разработчик – эту уже не верстальщик, а полноценный веб-программист. Его мало интересует оформление веб-сайта. Основная задача бэкенда – качественная связь между браузером и сервером, с которого работает сайт.

Среди наиболее распространённых инструментов бэкенда — языки программирования и различные СУБД:

  • основные — PHP, Python и Ruby, вспомогательные- Java и JavaScript;
  • MySQL (чаще всего), намного реже PostgreSQL, SQLite, MongoDB.

Отличительной чертой бэкенда является использование базы данных. Именно благодаря им клиент интернет-магазина или читатель блога может зарегистрироваться на сайте или отправить запрос по форме обратной связи посредством браузера. Боле подробно можно почитать на tproger.

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

Система связи frontend и бэкенд работает по кругу. Фронтенд принимает пользовательское инфо на уровне браузера и передаёт на сервер в бэкенд. Там информация программно обрабатывается и возвращается в привычном для клиента виде.

Можно выбирать из нескольких вариантов систематизации работы frontend и бэкенд:

  • серверные инструменты – когда HTTP-запрос уходит прямо на сервер, который предоставляет HTML-ответ;
  • AJAX – когда внедрённый в браузер JS передаёт HTTP-запрос и получает XML-ответ или ответ в формате JSON (протоколы SOAP и REST).
  • универсальные приложения – посредством JS-инструментов Ember и React, когда AJAX используется и в HTML на сервере, и в клиенте.

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