Фронтенд (Front-End) и бэкенд (Back-End) представляют собой два вида инструментальной поддержки серьезного веб-проекта. Фронтенд является инфраструктурой или пользовательским «слоем», а бэкенд – «слоем» технической поддержки. С фронтендом взаимодействует лишь пользователь. С бэкендом на уровне запросов взаимодействует уже сам фронтенд. Оба ориентированы на интерфейсное совершенство при обработке данных. Пользователь же должен действовать по своим потребительским целям, потребностям обработки и визуализации данных.
Фронтенд объединяет все, что читаемо, выводимо на экран или запускаемо браузером, в частности, такие элементы и блоки интерфейса, как «заголовок», «параграф», «список» и др. Например, средствами CSS (Cascading Style Sheets) сообщает браузеру форму, шрифт и последовательность элементов типа «текст в мета-теге body отображать красным, шрифтом Tahoma». Бэкенд работает на сервере, сетевом компьютере, отвечая на сообщения других компьютеров.
Разработчик фронтенда или фронтендер
Фронтендер занят пользовательским интерфейсом или всем тем, что пользователь видит, щёлкает и извлекает на сайте с помощью приложений: картинки, меню, кнопки, блоки и др. На каждой странице пользователь видит результат разработки, а код страницы или блока визуализируется щелчком правой кнопкой и выбором опции «Просмотр кода».
Фронтендер проекта, дизайнер, аналитик и программист участвуют в кодировании внешнего интерфейса или фактического дизайна. Они связывают системные преимущества серверной части с интерфейсными преимуществами пользовательской части проекта. Дизайн-макет преобразуется в коды. Необходимы творческий подход и компетенции, опыт разработки.
В компетенции разработчика входят:
• учет пользовательского подхода с расстановкой приоритетов;
• понимание и учет возможностей кодирующих систем HTML, CSS, JS и др.;
• улучшение навигации или юзабилити;
• обеспечение кросс-браузерности, переносимости;
• обеспечение мобильного, адаптивного дизайна;
• тестирование и верификация приложения.
Важно обеспечить релевантность применяемого разработчиком инструментария целям самой разработки. Например, это может быть инструментарий графического дизайна или простой редактор кода. Первый полезен для создания прототипов приложений, отработки финишного дизайна. В частности, в качестве инструмента можно взять Balsamiq, PhotoShop, Illustrator, Figma. В качестве редакторов кода используют интегрированные редакторы, в частности, Eclipse, VisualStudio и др. Все зависят от личного выбора фронтендера. Часто используют возможности инструментарий AJAX, который независим от «исходника» или WebAssembly.
Разработчик бэкенда или бэкендер
Бэкенд скрыт от пользователя, но в нем есть все для работы сайта. Визуализация кнопок и «продуктовых» действий типа «обновить», «добавить», «сравнить», «искать», «класть» и других являются базовыми задачами для фронтенда. Код бэкенда невидим в браузере, гаджете. Бэкенд использует как популярные «древние» языки PHP, C#, JS, так и «новейшие» средства Ruby, Python, Java, Go.
Разработки связаны причинно-следственными связями. Например, если пользователь нажал кнопку, то фронтенд отправляет бэкенду данные о нажатой кнопке. Бэкенд обрабатывает их и формирует отклик, например, заносит данные в список товаров («Корзину»). Затем бэкенд возвращает информацию, а фронтенд рисует «Корзину», но уже с измененным содержимым. Бэкендер взаимодействует с аналитиком, менеджером проекта, «продуктовым» менеджером («product-manager»).
Разработчик желает видеть свои результаты в конкретном интерфейсе, готов работать со сложными алгоритмами и программами, любит общаться только с «технарями», не жалует неопределившихся новичков («фулстеков»).
Взаимодействие разработчиков
Есть различные архитектуры взаимодействий бэкендера и фронтендера, которые реализуются посредством:
• серверных приложений, когда запросы напрямую идут серверу, а серверная часть отвечает настройкой шаблона, HTML-страницы и определяет, что и как показать;
• использования AJAX, когда загружаемый в браузер JS-код отправляет изнутри страницы запрос и получает ответ в форме XML-кода;
• одностраничных клиентских приложений, с загрузкой данных без обновления страницы и визуализацией на стороне клиента в браузере;
• универсальные приложения, позволяющие исполнять приложения и на сервере, и у клиента.
Прогрессивные архитектуры, взаимодействия позволяют веб-приложениям загружаться при работе однократно. Можно хранить базу данных в браузере. Приложениям клиента бэкенд необходим при начальной загрузке, для синхронизации взаимодействий. В зависимости от приложения, необходимые вычисления производятся у клиента или на сервере, но последний вариант потребует бесперебойного сетевого подключения.