Что такое backend и frontend: ᐈ Front end(Фронтенд) — что это? 💻 Все что нужно знать

Содержание

Backend-for-Frontend: когда простого API не хватает

В одной из предыдущих статей мы писали про использование SDK и API для интеграции продуктов с бэкендом. Продолжаем тему – теперь речь пойдёт про технологию Backend-for-Frontend. Она упрощает разработку сервисов, с которыми одновременно работают множество разных клиентов: компьютеры, смартфоны и планшеты со всеми возможными ОС.

Подход Backend-for-Frontend (BFF) разработали в компании SoundCloud. Pуководитель департамента разработки SoundCloud Фил Калсадо (Phil Calçado) ещё в 2015 году описывал BFF как закономерный этап эволюции, которую прошли современные ИТ-продукты.

В прошлом, аналоговом мире корпоративными системами пользовались только сами компании. Чем больше развивалась цифровизация и омниканальность, тем больше фокус перемещался из корпоративной инфраструктуры вовне.

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

Разработчики начали создавать API, чтобы сторонние ИТ-сервисы могли подключиться к инфраструктуре. Недостаток этой технологии в том, что она предлагает всем один и тот же набор возможностей. Если вам нужно ограничить объём трафика на смартфонах, а пользователям планшетов предложить собственный метод ввода данных, могут начаться трудности.

Ещё сложнее была задача SoundCloud – компании нужно было интегрироваться со сторонними разработчикам, чтобы те могли встраивать плеер в свои площадки. Для этого API из коробки должно взаимодействовать с любыми платформами, а при каждом обновлении команде нужно убедиться, что доработка не сломает все эти интеграции. На практике этого добиться нереально.

Так и родилась концепция Backend-for-Frontend – легковесного сервиса, который лежит ближе к фронтенду, чем к бэку.

Возможности BFF

Ключевое слово – «легковесный», список возможностей у BFF гораздо меньше, чем у API:

  • Работать с микросервисами продукта и получать от них данные.
  • Форматировать эти данные, чтобы они корректно обрабатывались на фронтенде.
  • Отправлять данные фронтенду.

Компания может параллельно поддерживать несколько BFF: для пользователей на ПК, для Android, для iOS и т.д. А с точки зрения разработчиков главные преимущества – это избавление от многих технических ограничений бэкенда и ускорение выпуска фич:

  • Можно строить бэкенд и API от выстроенного клиентского пути и продукта, а не наоборот.
  • Можно уже на ранней стадии разработки согласовать контракт взаимодействия и сделать мокап, чтобы строить приложение, вызывая API.
  • Становится проще управлять доступом мобильного приложения к бэкенду.

Сейчас BFF в своей практике используют многие крупнейшие технологические компании – например, Netflix и Flickr. Его рекомендуют Microsoft и IBM. Мы поделимся своим опытом из одного из недавних проектов.

Как мы используем BFF

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

У сайта есть API, но для мобильного приложения его функций не всегда хватало. Не углубляясь в детали, скажем, что это примерно те же трудности, о которых мы писали выше. Поэтому, когда мы запускали в приложении продажу нового продукта, мы построили собственный BFF, чтобы обрабатывать его запросы. В итоге мы можем сами отправлять сообщения Rabbit-у и читать его ответы.

Такая архитектура ускоряет обновление данных в нашем продукте, которые периодически возникали при работе через API. Раньше наш продукт получал данные из собственной БД интернет-магазина, и при работе напрямую с Rabbit просто так обновить данные было невозможно. С внедрением BFF мы запустили новый модуль Data Provider, которая позволяет не ходить в ИМ за обновлениями информации. 

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

О чём нужно помнить, создавая BFF

BFF-сервис должен быть лёгким – в этом его главное отличие от API. Не надо прописывать в коде сложную бизнес-логику, строить БД и т.д. Приоритетом должен быть простой обмен данными.

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

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

Ещё по этой теме

Как работают SDK и API

В принципе Model-View-Controller, что такое Frontend и что такое Backend?



Википедия говорит:

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

Я до сих пор не вижу связи между принципом model-view-controller и идеей front — and backend. Может ли модель с ее доступом к базе данных рассматриваться как бэкэнд, а представление-как фронтэнд?

model-view-controller
Поделиться Источник Kirinriki     16 июня 2012 в 20:53

5 ответов


  • Model View Presenter (MVP) что такое модель?

    Я просто не могу понять, что именно такое MODEL в MVP.

    Если у меня есть многоуровневая архитектура PRESENTATION / APPLICATION / DOMAIN / INFRASTRUCTURE, что именно такое MODEL? DOMAIN объекты, доступные через нижние слои? Отдельный объект, определенный в слое PRESENTATION, который сопоставляется с…

  • Model View Controller

    Может ли кто-нибудь помочь мне понять метод Model-View-Controller, который будет реализован на WebForms? Я запутался в нескольких вещах: Если у нас есть файлы ABC.ASPX и ABC.CS, что такое просмотр? это только ABC.ASPX файл? или комбинация файла .ASPX + .CS? рассматриваем ли мы файл ABC.CS как…



46

Хорошо … сначала условия:

  • Frontend — это части, которые видны пользователям: HTML, CSS, на стороне клиента Javascript. Все это в основном «frontend». В интерфейсе настольного приложения будет GUI.
  • Бэкэнд — это невидимая часть. В веб-приложениях это ваш код java, ruby, php или любой другой серверный код. Он может быть либо интерпретирован, либо скомпилирован, потому что «how» он работает, не влияет на «what».

Если вы прочитаете архитектуру графического интерфейса и изучите шаблон MVC в целом, вы поймете, что MVC -это не разделение бэкенда и интерфейса

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

Цель MVC и связанных с ним шаблонов состоит в том, чтобы отделить представление от бизнес-логики домена.

Вот основные обязанности MVC частей:

  • Модель — бизнес-логика
  • Логика представления представления
  • Контроллер — изменение состояния модели и представления (на основе пользовательского ввода)

Давайте возьмем пример:

  • альтернативное клиентское приложение для twitter
  • использует OAuth для аутентификации
  • пользователь может вводить различные поисковые фразы
  • принимает информацию через Twitter REST API
  • проверяет данные
  • анализирует ответы JSON
  • манипулирует DOM для представления информации

Все это можно сделать с помощью JavaScript на стороне клиента. У вас может быть MVC триада, работающая «frontend» ! В то же время «backend», который обеспечивает REST API, является структурой, подобной MVC. Только на этот раз представление генерирует JSON ответ вместо HTML.

*Conclusion: Вы можете использовать шаблон MVC как на бэкэнде, так и на интерфейсе.**

Постскриптум

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

Я называю его «anemic», потому что они использовали как представление (это должен быть пассивный объект в MVP, а не простой шаблон) , так и слой модели (да, это должен быть сложный слой, а не коллекция экземпляров ORM) .

Я бы рекомендовал вам прочитать две публикации, чтобы лучше понять эту тему:

Второй вариант максимально близок к первоначальному определению паттерна. Это, вместе со статьей «GUI Architectures», должно обеспечить вам прочную основу по этому вопросу. И книга PoEAA (трудно читаемая, кстати) даст вам контекст, в котором ее можно расширить.

Поделиться tereško     17 июня 2012 в 00:01



14

Возможно, вам поможет приведенная ниже цифра..

MVC               Human language    backend/frontend
---------------   ---------------   ---------------
model          -> data           -> backend
controllers    -> actions        -> backend/frontend (depends on implementation)
views          -> GUI            -> frontend

Поделиться Pithikos     02 июня 2015 в 11:02



2

  • просмотры = внешний интерфейс
  • модели = бэкэнд
  • контроллеры = клей между интерфейсом и бэкендом

Поделиться jopke     16 июня 2012 в 20:58


  • Model View Controller. Что такое модель?

    Что такое модель ? Я разработчик ASP.Net WebForms. Я изучал MVC в течение нескольких дней. Я могу понять концепцию контроллера и представления, но что такое модель ? Это данные ? Обязательно ли это должно быть с LINQ или мы можем использовать традиционные хранимые процедуры ?

  • Что такое «page controller» и «контроллер просмотра страниц»?

    Я новичок в ios, я хочу знать, что такое почтение между page controller и page view controller и как использовать его с UIImage и UIImageView?? Пожалуйста, приведите любой пример и ссылку для того же самого… Заранее благодарю вас !!



1

Передний конец-это то, что видит пользователь, которые являются представлениями. Задняя часть — это контроллеры и модель.

Поделиться Daniel A. White     16 июня 2012 в 20:56



1

В этом случае backend традиционно означает более глубокий код OS или даже ваш код, который не виден/не контролируется пользователем.

Внешний интерфейс — это фактический вид, который видит пользователь.

Поделиться dgund     16 июня 2012 в 20:59


Похожие вопросы:


Что такое MVC (Model View Controller)?

Я слышал, что термин MVC (Model View Controller) в последнее время бросается с тонной шума, но что это на самом деле?


Java Model View Controller для чтения файлов

У меня возникли большие проблемы с разработкой небольшой программы, которая читает текстовый документ и записывает статистику в текстовый файл. Мы должны использовать формат model-view-controller,…


Что такое Model View Presenter?

Может ли кто-нибудь объяснить как можно проще, что такое шаблон представления модели? В чем разница с Model View Controller ? Что лучше или для какой цели ?


Model View Presenter (MVP) что такое модель?

Я просто не могу понять, что именно такое MODEL в MVP. Если у меня есть многоуровневая архитектура PRESENTATION / APPLICATION / DOMAIN / INFRASTRUCTURE, что именно такое MODEL? DOMAIN объекты,…


Model View Controller

Может ли кто-нибудь помочь мне понять метод Model-View-Controller, который будет реализован на WebForms? Я запутался в нескольких вещах: Если у нас есть файлы ABC.ASPX и ABC.CS, что такое просмотр?…


Model View Controller. Что такое модель?

Что такое модель ? Я разработчик ASP.Net WebForms. Я изучал MVC в течение нескольких дней. Я могу понять концепцию контроллера и представления, но что такое модель ? Это данные ? Обязательно ли это…


Что такое «page controller» и «контроллер просмотра страниц»?

Я новичок в ios, я хочу знать, что такое почтение между page controller и page view controller и как использовать его с UIImage и UIImageView?? Пожалуйста, приведите любой пример и ссылку для того…


Что такое шаблон дизайна mvcl в open-cart?

Что такое шаблон дизайна MVCL в open-cart, я слышал о mvc (model , view, controller), но не понимаю, что такое MVCL и что это такое.


Yii2 связи между Frontend и Backend

как я могу переключиться с frontend на backend, используя ссылки в приложении yii2? На самом деле я могу устанавливать связи только между frontend или backend, а не между frontend и backend. Я…


что такое backend и frontend в traefik.toml

Читая документы Traefik я был сбит с толку когда столкнулся с конфигурационным скелетом который был упомянут в документации : traefik.toml: defaultEntryPoints = [http, https] [entryPoints]…

Frontend и backend разница – Тарифы на сотовую связь