BFF(Backend For Frontend)

Posted on

BFF，既 Backend For Frontend。 中文翻译过来的意思是前端的后端。

介绍

前端后端 (BFF) 是一种架构模式，涉及为每个客户端应用程序创建单独的后端。这可以更好地分离关注点，因为可以根据客户端应用程序的需求专门定制后端。BFF 还可以通过减少客户端和服务器之间需要传输的数据量来提高性能和可扩展性。

比喻

前端后端（BFF）架构可以类比为一套量身定制的套装。正如西装是根据穿着者的具体尺寸和偏好量身定制的一样，BFF 也是根据客户端应用程序的特定需求和要求量身定制的。这可以更好地分离关注点并提高性能，类似于合身的西装如何增强穿着者的舒适度和外观。

何时使用 BFF 模式？

1.微服务架构

BFF 在微服务架构中特别有用，其中每个微服务都可以有自己的 BFF。这使得微服务之间具有更大的灵活性和独立性，因为每个微服务都可以为其特定的客户端应用程序拥有自己定制的后端。

2. 架构解耦

与其他架构模式（例如微前端）结合使用，它创建了一个更具凝聚力和模块化的系统

3. 跨平台开发

当构建多个客户端应用程序时，需要不同的后端来保持更好的关注点分离。

4. 敏捷开发

BFF 还可以在不影响后端的情况下更轻松地维护和更新客户端应用程序，从而帮助简化开发过程。

5.性能优势

使用 BFF 可以通过减少客户端和服务器之间传输的数据量来提高性能和可扩展性

6. 构建微前端

在构建微前端时，将前端分解为更小、更易于管理的部分，以便可以独立开发和部署。每个微前端都可以有自己的 BFF，这可以提高关注点分离和灵活性

何时不使用 BFF 模式？

1.小团队

BFF 可能会带来额外的复杂性和维护开销，因为每个客户端应用程序都有自己的后端需要维护。对于资源有限的小型团队和初创公司来说，这尤其具有挑战性。

2. 产品可行性

当构建不需要复杂客户端应用程序的产品时，不需要根据特定客户端应用程序的需求定制后端

3.Rest 足够了

在构建需要传统 RESTful API 架构（这是 Web API 最常见的架构）的应用程序时。

4. 编排延迟

在构建需要直接客户端到微服务通信的应用程序时，这样做是为了减少解耦微服务之间的附加通信层带来的延迟。

代码示例

以下是使用 React.js 的 BFF（前端后端）代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { useState, useEffect } from "react";

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("/api")
      .then((response) => response.json())

      .then((data) => setData(data));
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <h2>{item.title}</h2>

          <p>{item.body}</p>
        </div>
      ))}
    </div>
  );
};

此代码设置一个 React 组件，该组件从 BFF API 端点获取数据并将其呈现在页面上。useEffect 挂钩用于在组件安装后立即获取数据。使用 useState 挂钩将获取的数据存储在组件的状态中，然后进行映射以显示数据数组中的每个项目。

BFF 模式的替代方案

BFF 并不是唯一支持复杂 Web 开发的架构模式。还有其他流行的模式可以独立使用或与 BFF 一起使用：

API 网关模式

在此模式中，单个 API 网关负责处理所有客户端请求并与适当的微服务和后端进行通信。这可以简化架构并减少维护开销，因为客户端和后端之间只有一个接触点。但是，在处理 API 网关和微服务/后端之间的路由和通信时，它也可能会带来额外的延迟和复杂性。

无服务器架构

该架构基于按需运行代码的概念，而不是始终运行专用服务器或服务器集群。这有助于降低成本并简化架构。

GraphQL

GraphQL 是 RESTful API 的替代方案，允许客户端指定他们需要的确切数据并仅接收该数据。这可以减少客户端和服务器之间传输的数据量并提高性能。

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

微前端

这种架构模式涉及将前端分解为更小、更易于管理的部分，这些部分可以独立开发和部署。每个微前端都可以有自己的 BFF，这可以提高关注点分离和灵活性。

服务网格架构

在此架构中，添加了专用基础设施层来处理服务到服务的通信。这可以简化架构并降低处理服务之间通信的复杂性。

API 成分

这涉及将多个 API 聚合到单个 API 中，这可以简化架构并减少检索数据所需的请求数量。

客户端到微服务的直接通信

在此架构中，客户端直接与微服务通信，而不是通过 BFF 或 API 网关。这可以减少额外通信层带来的复杂性和延迟。然而，这也会降低灵活性和关注点分离。
事件驱动架构
这种架构涉及使用事件来触发系统中的操作，这可以提高可扩展性和模块化性。

SOA（面向服务的架构）

这涉及将系统分解为可以独立开发和部署的单独服务。每个服务都可以有自己的 BFF 或 API 网关。这可以提高可扩展性和灵活性。

传统 RESTful API

这是 Web API 最常见的架构，客户端通过 RESTful API 与服务器进行通信。

引用

BFF Pattern: The Good, the Bad, and the Alternatives. - LinkedIn