使用 API 发送 UI

本文翻译自 Sending UI over APIs，主要介绍了通过 API 来渲染 UI 页面的方案，这种方案常用于客户端的动态渲染以及一些运营活动页面的渲染。这篇文章主要从服务器拿到 UI 的结构，但是对渲染之后的交互事件介绍得不多，从视频上看，事件是在客户端解析实现。

通过 API 发送 UI 是一种改变我们对 UI 思考方式的技术，该技术也被称之为服务器驱动的 UI。与传统的 UI 开发范式相比，这种开发方式更加灵活，也正在影响和改变着传统的 UI 开发方式。

服务器驱动的 UI 不仅仅是一个理论概念；一些科技行业的公司已经开始实施这种方法。例如 Instagram、Lyft 和 Airbnb 利用服务器驱动的 UI 向全球数百万用户提供动态内容和更新。

那么，什么是服务器驱动的 UI？它们是如何工作的，为什么它们在现代 JavaScript 开发中变得如此重要？本文旨在回答这些问题，并深入介绍服务器驱动的 UI，它们的优劣势，以及如何在自己的项目中实现它们。

了解服务器驱动的 UI

服务器驱动的 UI 代表了一种新的 UI 开发方法。它们通过 API 在服务器端动态生成 UI，并将其发送到客户端。这种方法可以提供更快的迭代速度和更个性化的用户体验。

尽管需要面临着一些挑战，例如应用商店指南和离线用户体验，但服务器驱动的 UI 为 UI 开发的未来提供了另外的方向。

相比之下，服务器驱动的 UI 是在服务器上动态生成并通过 API 发送到客户端的。服务器发送 UI 用 JSON 来表示，然后在客户端进行渲染。这意味着可以在服务器端更新 UI，而无需对客户端进行任何更改。

UI 变得动态且灵活，可以根据用户行为、A/B 测试结果或新功能发布等各种因素实时更改。例如，Builder.io 在其框架 SDK 中使用这种方法，通过提供可接受 JSON 输入并渲染基于视觉构建的设计的组件：

javascript 复制代码

import { BuilderComponent } from "@builder.io/react";

export default async function MyPage({ params }) {
  const builderJSON = await builder
    // 使用URL中指定的页面路径获取 Builder 中的页面内容 JSON
    .get("page", {
      userAttributes: {
        urlPath: "/" + (params?.page?.join("/") || ""),
      },
    })
 return (
   <>
     <YourHeader />
      <BuilderComponent content={builderJSON} model="page" />
     <YourFooter />
   </>
 );
}

这种方法相比传统的 UI 开发具有几个优点。首先，它允许更快的迭代，因为可以在服务器端进行更改，并立即在客户端上反映出来。它还使后端开发人员能够参与前端开发，因为他们可以在服务器上定义 UI 结构和行为。

然而，服务器驱动的 UI 也面临一些挑战。它们需要以不同的方式思考 UI 开发，并需要考虑如何处理操作并保持流畅的用户体验。但是通过仔细的规划和实施，这些挑战是可以克服的。

服务器驱动的 UI 在 Instagram 中的作用

Instagram 对服务器驱动的 UI 的采用为这种创新方法提供了一个引人注目的案例研究。这家社交媒体巨头开发了一种名为 "blocks" 的技术，利用服务器驱动的 UI 的概念向用户提供动态内容和更新。

Steve Sewell（Builder.io的首席执行官）和 Yaser Alkayale（Instagram/Meta的工程师）就通过 API 发送 UI 进行了一次对话。

在 Instagram 的实现中，服务器向客户端发送一个树状结构的 blocks。每个 block 表示 UI 的一部分，并包含有关应该渲染哪个组件以及将哪些 props 传递给该组件的信息。然后客户端遍历此树形结构，按照 blocks 所指定的方式渲染组件。

这种方法使 Instagram 能够立即更新 UI，而无需推送新版本的应用程序。例如，如果在特定的UI组件中发现一个错误，服务器可以简单地停止发送渲染该组件的 blocks，从而立即修复所有用户的错误。

此外，服务器驱动的 UI 使 Instagram 能够更快地迭代其产品。产品团队不再需要等待发布新的应用程序版本，而是可以在服务器上对 UI 进行更改，并立即在应用程序中看到这些变化。这导致了更加敏捷和响应性的产品开发过程。

服务器驱动的 UI 的好处

采用服务器驱动的 UI 带来了许多优势，可以显著提升开发过程和最终用户体验。

即时修复错误和更快的迭代：正如 Instagram 的案例所示，其中最重要的优势之一是能够立即修复错误并进行更快的迭代。可以在服务器端对 UI 进行更改，并立即在客户端反映出来，无需用户更新应用程序或开发人员经历冗长的应用商店审核流程。
后端开发人员参与前端开发：服务器驱动的 UI也模糊了前端和后端开发之间的界限。后端开发人员可以在服务器上定义 UI 结构和行为，从而更直接地参与前端开发过程。这可以更有效地利用资源，形成更具凝聚力的开发团队。
动态和个性化的用户体验：通过服务器驱动的 UI，用户体验可以根据各种因素进行动态定制。例如，服务器可以基于用户的行为、偏好甚至 A/B 测试结果发送不同的 UI。这可以带来更加个性化和引人入胜的用户体验。
减少客户端复杂性：通过将大部分 UI 逻辑移到服务器端，服务器驱动的 UI 可以减少客户端的复杂性。这可以使客户端更轻、更快，从而提高性能和用户体验的流畅性。

构建服务器驱动的 UI：实用指南

一开始，构建服务器驱动的 UI 可能会令人望而生畏，但通过对过程的清晰理解和一些实践步骤，会逐步解决对这些问题。以下是构建服务器驱动的 UI 的步骤：

创建树状结构：构建服务器驱动的UI的第一步是创建一个类似树状的结构，代表您的 UI。树中的每个节点对应一个 UI 组件，并包含有关渲染哪个组件以及将哪些 props 传递给该组件的信息。
处理操作：在服务器驱动的 UI 中，需要处理操作，例如用户交互。可以通过在组件中包含操作处理程序来完成，这些处理程序向服务器发送请求。然后，服务器可以根据操作响应一个新的 UI 树。
使用 JSON 格式：通常使用 JSON 格式表示 UI 树，可以通过 API 轻松发送并由客户端解析。
实现渲染引擎：在客户端，您需要一个渲染引擎，它可以遍历UI树并按照树所指定的方式渲染组件。
测试和迭代：与任何开发过程一样，测试和迭代至关重要。务必对您的服务器驱动的UI进行全面测试，并根据您的发现进行改进。

服务器驱动 UI 的角色

Instagram 采用服务器驱动 UI 的方法提供了一个引人注目的案例研究，展示了这种创新方法在实践中的应用。这家社交媒体巨头开发了一项名为 "blocks" 的技术，利用服务器驱动UI的概念向用户提供动态内容和更新。

Builder.io 首席执行官 Steve Sewell 与 Instagram/Meta 工程师 Yaser Alkayale 就通过 API 发送 UI 进行了讨论：

在 Instagram 的实现中，服务器向客户端发送一个类似树形结构的 blocks。每个 block 代表 UI 的一部分，并包含有关要渲染哪个组件以及将哪些属性传递给该组件的信息。然后客户端遍历这个树结构，按照 blocks 指定的方式渲染组件。

这种方法使 Instagram 能够立即更新 UI，而无需推送新版本的应用程序。例如，如果在特定的 UI 组件中发现错误，服务器可以简单地停止发送渲染该组件的 blocks，从而立即为所有用户修复该错误。

此外，服务器驱动 UI 使 Instagram 能够更快地迭代其产品。产品团队无需等待发布新版本的应用程序，而是可以在服务器上对 UI 进行更改，立即在应用程序中看到这些变化。这导致了更加敏捷和具有响应性的产品开发过程。

应对服务器驱动 UI 的挑战

尽管服务器驱动 UI 为 UI 开发带来了新的可能性，但也引入了开发人员需要意识到的新考虑因素：

应用商店准则：应用商店有一些需要遵循的准则。确保您使用的服务器驱动 UI 符合这些准则非常重要。在提交应用程序进行审核时，透明地说明您的 UI 方法可以帮助避免潜在问题。
离线用户体验：由于服务器驱动 UI 依赖于服务器通信，保障离线情况下的用户体验可能会有挑战。实施缓存等策略可以确保即使没有网络连接，也能维持一致的用户体验。
性能考虑：虽然服务器驱动 UI 提供了动态功能，但还需要考虑性能问题。高效的网络请求和优化的渲染技术可以帮助保持流畅的用户体验。
增加的复杂性：实施服务器驱动 UI 可能会给开发过程增加一层复杂性，因为 UI 管理发生在服务器端和客户端。然而，通过良好结构化的方法和明确的责任分工，可以有效管理这种复杂性。

尽管这些考虑因素存在其自身的挑战，但它们也为问题解决和创新提供了机会。通过深思熟虑的规划和执行，服务器驱动 UI 可以成为您开发工具包中宝贵的补充。

结论

通过 API 发送UI或服务器驱动 UI 代表了 UI 开发领域的重大转变。通过将大部分 UI 逻辑移到服务器上，这种方法提供了一种动态性和灵活性，正在重新塑造行业。

从即时错误修复和更快的迭代到使后端开发人员能够参与前端开发，服务器驱动 UI 带来了许多优势。它们还可以实现更个性化和引人入胜的用户体验，并减少客户端的复杂性以提高性能。

尽管存在应用商店准则和管理离线体验等挑战，但通过仔细规划和战略性方法，可以有效解决这些问题。

在先进的 JavaScript 开发世界中，服务器驱动 UI 不仅是一个理论概念，而且是 Instagram 等主要平台正在采用的实际方法。随着我们不断突破 UI 开发的可能性，服务器驱动 UI 为未来提供了令人兴奋的方向。