Netflix在QCon London 2024分享的服务驱动UI技术

在QCon London 2024上，Christopher Luu介绍了Netflix如何利用服务驱动UI（Server-Driven UI）技术来丰富通知功能。这一技术通过跨平台复用和更好的测试节省了开发时间，但也增加了维护向后兼容性的成本。

主要观点

1. 服务驱动UI的优势：

   • Netflix通过服务驱动UI技术，可以在不更新应用的情况下从服务器端更新通知界面。
   • 该技术支持跨平台逻辑共享，并有效进行A/B测试。
   • 开发者可以在不了解具体平台和编程语言的情况下，在任何平台上创建通知。

2. 技术实现：

   • Netflix的通知系统称为UMA（Universal Messaging Alert），运行在电视、网页、iOS和Android平台上。
   • UMA使用CLCS（Customer Lifecycle Component System）组件，开发者通过在JavaScript中嵌入CLCS组件来编写通知，类似于React UI嵌入HTML的方式。
   • CLCS是对Hawkins视觉设计系统的封装，Hawkins是Netflix电视剧《怪奇物语》中霍金斯镇的命名。

3. 挑战与不足：

   • 创建通知框架的前期成本较高，且需要保持与旧版Netflix应用的兼容性。
   • 支持离线应用和调试通知较为困难。
   • 部分开发者不喜欢非原生开发。

4. 兼容性与离线支持：

   • Netflix需要支持永远不会更新的旧版应用，特别是运行不再支持的OS版本的手机、平板和电视。
   • GraphQL用于从服务器请求UMA，允许引入新功能，旧客户端可以忽略这些新功能。
   • 新组件指定了回退方法，使用CLCS基线组件构建替代版本。

5. 测试策略：

   • UMA使用基于演示的测试进行自动化测试，演示服务器提供硬编码的UMA。
   • 测试人员可以截取客户端应用的截图或运行更具体的集成测试。
   • Netflix还运行后端模板快照测试和传统的端到端测试。

关键细节

• CLCS示例：

  export function showBox(): Screen {
    return (
      <Modal>
        <VerticalStack>
          <Text typography='title' content='Come back next week' />
          <Text typography='body' content='Please tune in next week to hear
                  Statler & Waldorf say: What do you call 
                  an offline phone? - Notflix!' />
        </VerticalStack>
      </Modal>
    );
  }

• 布局与设备信息：

  • Netflix应用负责通知的布局，如横屏与竖屏、定位和大小。
  • 应用在请求头中发送应用版本和设备信息，以便UMA利用这些信息。

• 未来展望：

  • Netflix可能会在未来的应用版本中将一些UMA作为JSON捆绑，以便在离线时显示部分通知。

反思与改进

Luu回顾了项目的几个未完成的方面，包括基线组件、正式的测试策略、与设计系统合作伙伴的更好协调，以及与平台在模板上的协调。

通过服务驱动UI技术，Netflix在通知系统的开发和维护上取得了显著进展，尽管面临一些挑战，但这一技术为跨平台开发和快速迭代提供了强大支持。