Backend vs Frontend

Настоящие «боевые» программные продукты никогда не состоят из одного файла и не делают всё сразу, их делят на части. Некоторая часть занимается выводом информации пользователю и сбором данных, которые пользователь может ввести: тексты в формах, загружаемые файлы, клики и движение указателем мыши, звук с микрофона, изображение с камеры. Это называется фронтенд (front-end). Затем всё это передаётся в ту часть программной системы, которая может это сохранить в базу данных, изменить, передать в другую программу. Эту невидимую часть программных систем называют бакенд (back-end).

В приложениях может быть много слоёв, каждый из которых либо занимается построением интерфейса пользователя, либо готовит данные для него и собирает данные от пользователя. Каждый из слоёв будет включать в себя front end и back end.

В веб-приложениях условно считается, что front-end — это всё, что пришло с веб-сервера в браузер (ещё называют «клиентская сторона»), а то, что работает на сервере, считается back-end. Могу сказать, что деление это очень условное, потому что и на стороне сервера, и в браузере может быть как front-end, так и back-end.

Примеры:

1. Онлайн-клиент электронной почты Gmail. Если написать письмо и нажать «Отправить» во время сбоя подключения к Интернет, то письмо не отправится, но и не потеряется. Оно пропадёт с экрана, но где-то внутри программного кода, который сейчас загружен в бразер, есть невидимая часть, которая раз за разом пытается отправить письмо, пока это не удастся. Получается, клиентская часть содержит back-end для фоновой отправки запросов на сервер.
2. Популярный сервис vk.com. Страницы сформированы на сервере. И там разделение на две части, одна из которых нашла запись в базе данных, а другая сделала из этой записи фрагмент HTML, то есть создала фрагмент будущего интерфейса пользователя, который позже отобразится в браузере. На сервере тоже может быть front-end, который формирует данные для непосредственного отображения пользователю после передачи в браузер и back-end, который, например, работает с базой данных.

Такое деление делает веб-разработку проще и быстрее. Двумя частями могут заниматься два программиста. Пример на диаграмме Гантта и доске Канбан.

Разделив две задачи на четыре (Задача 1.1 + Задача 1.2, Задача 2.1 + Задача 2.2), можно делать их так, что части фронтенд и бакенд будут реализованы последовательно в рамках одной задачи (сначала Задача 1.1, потом 1.2, потом 2.1, потом 2.2), но параллельно для двух разных задач (Задача 1.2 и Задача 2.1).

Кроме разделения работы по времени важно также разделение разработчиков по специализациям. Когда-то за весь сайт мог отвечать один человек. Он и страницы в Dreamweaver набросает, и тексты с картинками на сайт выложит и хостингом займётся. А сейчас в веб-технологиях настолько большое разнообразие, что одному человеку стало очень трудно знать всё. Поэтому появились разработчики для front-end и разработчики для back-end. Универсалов, которые знают обе части, называют «комбайны» или «full-stack developer«. Замечу, что фронтенд разработка тоже может быть разделена: на вёрстку и непосредственно программирование.

И есть ещё одно деление на front/back в веб-разработке. Если веб-проект подразумевает разный интерфейс для разных типов пользователей, то front — это всё что доступно обычным пользователям, а back — это то, что доступно администраторам, модераторам и службе поддержки (условно называется «админка» или «панель администратора»). Вот, к примеру, старый, но наглядный пример создания приложения на базе фреймворка Yii с делением на панель администратора и панель пользователя: Способ разделения front-end/back-end-частей в Yii.

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

• панель клиента
  • серверное программирование: node.js, RabbitMQ, memcached, PHP, Python, Ruby, база данных и другое
  • клиентское программирование: JavaScript Ruch Client Application на базе Angular, LESS, SCSS и других технологий
• панель администора
  • серверное программирование: ещё больше, чем в панели клиента
  • клиентское программирование: значительно более простой, чем в панели клиента, например HTML + CSS + jQuery UI

В зависимости от сложности системы и количества задач, любому разработчику, возможно, придётся столкнуться с проблемами, которые возникают как в клиентской, так и в серверной частях. Для решения этих проблем нужно иметь хотя бы общее представление об используемых технологиях. Программисту JavaScript нужно знать, где находятся нужные файлы серверной части, где читать логи об ошибках, от каких серверных процессов зависит работа приложения. Серверному программисту нужно знать, как устроена клиентская часть, и где поставить точку остановки в JavaScript, чтобы в режиме пошаговой отладки увидеть, что именно приложение отправило на сервер и получило обратно через AJAX.

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