新的后端渲染：服务器驱动UI


通过API发送UI是一种彻底的新方法，将改变传统的UI开发。

一项正在改变我们对用户界面 (UI) 的看法的技术是通过 API 发送 UI，也称为服务器驱动UI。这种方法提供了新水平的活力和灵活性，正在改变 UI 开发的传统范例。

服务器驱动 UI 不仅仅是一个理论概念；它也是一个概念。它们正在由科技行业的一些知名人士实施。例如，Instagram、Lyft和Airbnb就参与了这一运动，利用服务器驱动的 UI 向全球数百万用户提供动态内容和更新。

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

什么是服务器驱动UI（Server-driven UI）？
服务器驱动UI是用户界面开发的一种新方法。它们提供了一种动态、灵活的方式，可在服务器上生成用户界面，并通过API将其发送到客户端。这种方法可以提供更快的迭代速度和更个性化的用户体验。

虽然需要考虑应用程序商店指南和离线用户体验管理等挑战，但服务器驱动UI为未来的用户界面开发提供了一个令人兴奋的方向。

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

用户界面变得动态而灵活，能够根据用户行为、A/B 测试结果或新功能推出等各种因素实时变化。

例如，Builder.io 在其框架 SDK 中使用了这种方法，提供了一个组件，该组件可以接受 JSON 作为输入，并以可视化方式呈现构建的设计：

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

export default async function MyPage({ params }) {
  const builderJSON = await builder
    // Get the page content JSON from Builder with the specified options
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/" + (params?.page?.join("/") || ""),
      },
    })
 return (
   <>
     <YourHeader />
     <BuilderComponent content={builderJSON} model="page" />
     <YourFooter />
   </>
 );
}

与传统的用户界面开发相比，这种方法有几个优点。

  • 首先，它可以加快迭代速度，因为在服务器端做出的更改可以立即反映在客户端上。
  • 它还能让后端开发人员为前端开发做出贡献，因为他们可以在服务器上定义用户界面结构和行为。

然而，服务器驱动的用户界面并非没有挑战：
它们需要一种不同的用户界面开发思维方式，还需要考虑一些技术问题，如如何处理操作和保持流畅的用户体验。但是，只要认真规划和实施，这些挑战都是可以克服的。

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

在 Instagram 的实现中，服务器会向客户端发送一个树状结构的"块block"。每个区块代表用户界面的一部分，并包含要呈现的组件和要传递给该组件的道具的信息。然后，客户端会遍历这个树状结构，按照"块"指定的方式呈现组件。

这种方法允许 Instagram 对用户界面进行即时更新，而无需推送新版本的应用程序。例如，如果发现某个用户界面组件存在错误，服务器只需停止发送渲染该组件的"块"，就能立即有效地修复所有用户的错误。

此外，服务器驱动的用户界面使 Instagram 能够更快地迭代产品。产品团队无需等待新的应用程序版本发布，而是可以在服务器上对用户界面进行修改，并立即在应用程序中看到这些修改。这使得产品开发过程更加敏捷，响应速度更快。

服务器驱动用户界面UI的好处
采用服务器驱动的用户界面有很多好处，可以显著改善开发流程和终端用户体验。

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

构建服务器驱动的用户界面：实用指南
一开始，构建服务器驱动的用户界面可能会让人望而生畏，但只要清楚地了解整个过程和一些实用的步骤，就能将其变为一项易于管理且回报丰厚的工作。以下是如何构建服务器驱动用户界面的分步指南：

  • 创建树形结构：创建服务器驱动用户界面的第一步是创建一个树状结构来表示用户界面。树状结构中的每个节点都对应一个用户界面组件，并包含有关要呈现的组件以及要传递给该组件的道具的信息。
  • 处理操作：在服务器驱动的用户界面中，需要处理用户交互等操作。这可以通过在向服务器发送请求的组件中加入动作处理程序来实现。然后，服务器可根据动作响应新的用户界面树。
  • 使用 JSON 格式：用户界面树通常以 JSON 格式表示，可以通过 API 轻松发送并由客户端解析。
  • 实现呈现引擎：在客户端，你需要一个呈现引擎，它可以遍历用户界面树并呈现树中指定的组件。
  • 测试和迭代：与任何开发过程一样，测试和迭代是关键。一定要彻底测试服务器驱动的用户界面，并根据测试结果进行改进。

请记住，构建服务器驱动的用户界面需要改变传统的用户界面开发思维。这不仅关系到编码，还关系到以一种可以从服务器动态生成和更新的方式构建用户界面。

应对服务器驱动用户界面的挑战
服务器驱动的用户界面为用户界面开发提供了新的可能性，但同时也带来了开发人员需要注意的新问题：

  • App商店指南：应用程序商店有需要遵守的指导原则。确保服务器驱动用户界面的使用符合这些指导原则非常重要。在提交应用程序进行审核时，如果能将用户界面方法透明化，将有助于避免任何潜在问题。
  • 离线用户体验：由于服务器驱动的用户界面依赖于服务器通信，因此离线时的用户体验管理可能是一个挑战。实施缓存等策略有助于在没有网络连接的情况下保持一致的用户体验。
  • 性能考虑因素：虽然服务器驱动的用户界面具有动态功能，但也有一些性能方面的考虑因素需要注意。高效的网络请求和优化的渲染技术有助于保持流畅的用户体验。
  • 复杂性增加：实施服务器驱动的用户界面会给开发过程增加一层复杂性，因为用户界面管理同时发生在服务器和客户端。不过，通过结构合理的方法和明确的职责分工，可以有效地管理这种复杂性。

这些考虑因素在带来挑战的同时，也为解决问题和创新提供了机会。通过深思熟虑的规划和执行，服务器驱动的用户界面可以成为开发工具包中的宝贵补充。

结论
通过应用程序接口发送用户界面或服务器驱动的用户界面代表了用户界面开发领域的重大转变。通过将大部分用户界面逻辑移至服务器，这种方法提供了重塑行业的动态性和灵活性。

从即时修复错误和加快迭代速度，到让后端开发人员为前端开发做出贡献，服务器驱动的用户界面带来了一系列好处。它们还能带来更个性化、更吸引人的用户体验，并能降低客户端的复杂性，从而提高性能。

虽然在应用商店指南和离线体验管理等方面会遇到一些挑战，但通过精心规划和战略方法，这些问题都可以得到有效解决。

在高级 JavaScript 开发领域，服务器驱动用户界面已不仅仅是一个理论概念，而是一种实用方法，Instagram 等大型平台都采用了这种方法。随着我们不断突破用户界面开发的极限，服务器驱动的用户界面为未来提供了一个令人兴奋的方向。