← Назад ко всем вопросам

В чём преимущества и недостатки BFF по сравнению с прямым доступом к нескольким backend-сервисам с фронта?

1️⃣ Как кратко ответить

BFF (Backend for Frontend) предоставляет единый интерфейс для взаимодействия с несколькими backend-сервисами, что упрощает управление логикой, улучшает производительность и безопасность. Однако это добавляет дополнительный слой, который может усложнить архитектуру и увеличить время разработки.

2️⃣ Подробное объяснение темы

BFF (Backend for Frontend) — это архитектурный паттерн, который предполагает создание отдельного backend-слоя для каждого типа клиента (например, веб-приложение, мобильное приложение). Этот слой служит посредником между фронтендом и множеством backend-сервисов.

Преимущества BFF:

  1. Упрощение клиентской логики: BFF позволяет переместить сложную логику обработки данных с клиента на сервер. Это упрощает код фронтенда, делая его более чистым и поддерживаемым.

  2. Оптимизация запросов: BFF может агрегировать данные из нескольких сервисов в один ответ, что уменьшает количество сетевых запросов и улучшает производительность приложения.

  3. Адаптация под клиента: BFF может предоставлять данные в формате, оптимизированном для конкретного клиента, что позволяет учитывать особенности различных платформ (например, мобильных и веб-приложений).

  4. Повышение безопасности: BFF может служить дополнительным уровнем безопасности, скрывая внутренние API и обеспечивая контроль доступа на уровне сервера.

Недостатки BFF:

  1. Усложнение архитектуры: Введение BFF добавляет дополнительный слой в архитектуру приложения, что может усложнить её понимание и поддержку.

  2. Увеличение времени разработки: Разработка и поддержка BFF требует дополнительных ресурсов и времени, так как необходимо разрабатывать и поддерживать отдельный backend для каждого типа клиента.

  3. Потенциальные проблемы с производительностью: Если BFF не оптимизирован, он может стать узким местом в системе, увеличивая задержки при обработке запросов.

Пример использования BFF:

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

Без BFF, фронтенд должен сделать два отдельных запроса:

// Запрос на получение данных о пользователе
fetch('/api/user')
  .then(response => response.json())
  .then(userData => {
    // Обработка данных о пользователе
  });
​
// Запрос на получение данных о заказах
fetch('/api/orders')
  .then(response => response.json())
  .then(orderData => {
    // Обработка данных о заказах
  });

С использованием BFF, фронтенд делает один запрос:

// Запрос к BFF для получения данных о пользователе и заказах
fetch('/bff/user-and-orders')
  .then(response => response.json())
  .then(data => {
    const userData = data.user;
    const orderData = data.orders;
    // Обработка данных о пользователе и заказах
  });

Комментарии к коду:

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

BFF — это мощный инструмент для оптимизации взаимодействия между фронтендом и множеством backend-сервисов, но его использование должно быть обосновано архитектурными потребностями и ресурсами команды.

Тема: Архитектура, FSD и микрофронтенды
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки