服务器驱动UI客户端设计

使用组件注册表和设计系统和标记来简化客户端逻辑

客户端服务器驱动UI

在服务器驱动UI（SDUI）中，客户端的目标是处理像素，而不是数据。客户端应简单地接收API提供的内容并在适当的位置呈现。

当采用SDUI增量方式时，通常从文本和图像等基本UI元素开始。随着将更多逻辑，例如组件布局，转移到服务器，客户端可以有一组UI组件类型映射到特定平台。这允许客户端根据其平台呈现定制内容。

💡 提示

有关SDUI的一般信息，请参阅服务器驱动UI基础。

组件注册表

一旦您的API对应用程序应渲染哪些组件有更多的控制，您需要定义从GraphQL类型到UI等效组件的映射（例如React、SwiftUI、Jetpack等）。此映射称为组件注册表。

以下代码片段包含一个简化的React组件注册器版本。

1
const {data} = useQuery(FeaturedProductsCollection);
2

3
// Maps GraphQL __typename to UI component
4
const TYPE_COMPONENTS = {
5
  ProductList: ListComponent,
6
  ProductCarousel: CarouselComponent,
7
  ProductError: ErrorComponent
8
};
9

10
const component = TYPE_COMPONENTS[data.featuredProducts.__typename];
11
if (!component) {
12
  throw new Error('Unknown Type Returned!');
13
}
14

15
renderComponent(component, data);

此代码片段使用（TYPE_COMPONENTS）注册器根据API响应的__typename动态渲染适当的UI组件。生成该响应的请求可能基于客户端输入，包括头部信息、用户信息，甚至前一次服务器响应的信息。

设计系统和令牌

客户端库也可能实现设计系统。虽然选择使用哪种网格格式或间距应保留在客户端，但API应控制其他选择，例如，根据用户状态或数据，徽章是红色还是绿色。

与在请求中返回徽章颜色之类的十六进制代码相比，最好使用基于令牌的设计系统，这样您可以更容易地更改颜色选择的业务逻辑。

消费此类响应的客户端不需要知道每个徽章的用途或其颜色；它只需要渲染徽章列表。

1
{
2
  "badges": [
3
    {
4
      "text": "Loyalty members get a discount",
5
      "theme": "brand-color:primary"
6
    },
7
    {
8
      "text": "Inventory is low, buy now!",
9
      "theme": "brand-color:warning"
10
    }
11
  ]
12
}

下一个

首页