背景
什么是 SDUI？
为什么要用 SDUI？
- 优点 1：利于 A/B 实验和快速迭代
- 优点 2：利于多端对齐
- 优点 3：避免客户端重复开发业务逻辑
SDUI 的缺点和局限
- 缺点1：服务端返回数据庞大，传输时间长
- 缺点 2：开发和测试难度增加
谁在用 SDUI？
- Spotify
- 爱彼迎
- Lyft
小结

背景

最近参与了公司的一个项目，要把公司的网站和 APP 彻底重写一遍（我只参与其中 Web 的部分），并且新的系统是基于 SDUI（Server-Driven UI，服务端驱动 UI）的。

在内部文档中，新架构被称为 Widget Architecture，但我查了一下，发现 SDUI 才是真正准确的概念。

什么是 SDUI？

在传统架构下，UI 逻辑完全由客户端负责。客户端向服务端请求的只有业务数据，不会包含 UI 呈现的相关逻辑。

在 SDUI 架构下，服务端同时也决定了如何呈现 UI。比如，服务端返回的数据会包含以下信息：

当前页面包含多少个组件（称作 component 或者 widget），每个组件是什么类型；
这些组件如何排列，如何嵌套，样式如何；
组件中填充什么数据；

小到一个按钮，大到一个结果列表，都是组件。客户端会基于收到的这些组件数据来渲染 UI。

可以看到，这里的关键就是要建立一个客户端和服务端公认的组件库，包含用来构造 UI 的所有“标准组件”（当然，每个客户端的实现方式不同）。也难怪公司内部文档称这种架构为“Widget Architecture”！

这种架构之所以成立，是因为大部分 UI 的改动都是对现有 UI 元素的重新排列，很少会引入新元素。因此，通过把 UI 中重复出现的元素提炼为“组件”，就可以通过组件的重新排列来实现大部分 UI 改动需求了。

为什么要用 SDUI？

优点 1：利于 A/B 实验和快速迭代

使用 SDUI 的理由很多，但我最认可，同时也是所有资料都不约而同提到的一点是：

在传统架构（即 Client-Driven UI，客户端驱动 UI）中，APP 需要发版才能实现 UI 逻辑的改动，这非常不利于 A/B 实验和快速迭代。

SDUI 可以很好地解决这个问题。如上所述，大部分 UI 逻辑的改动都是对现有元素的重新排列，所以在 SDUI 架构下，只需要更新服务端的返回数据，就可以实现 APP UI 逻辑的改动了。

换句话说，就是让 APP 开发多多少少具备了 Web 开发的优点。（当然，在 APP 中嵌入网页也具有类似的优点，但这里是用原生方式进行 UI 渲染。）

优点 2：利于多端对齐

对于客户端（web、安卓、ios、各种 tv 等）来说，只要完成了架构和组件库的搭建，那么之后的改动几乎就可以同时发布在全部客户端上，不会出现不同客户端之间功能相差很大的情况（我们的旧架构就存在这个问题）。

优点 3：避免客户端重复开发业务逻辑

SDUI 架构的特性决定了它通常和 BFF（Back-end For Front-end）架构结合在一起。简单来说就是，之前本来由客户端完成的一些业务逻辑，现在都转移到后端了。这样就避免了在各种不同客户端上重复开发同样业务逻辑的问题（我们的旧架构也存在这个问题）。

SDUI 的缺点和局限

当然，SDUI 也有它的缺点和局限：

缺点1：服务端返回数据庞大，传输时间长

典型的 SDUI 服务端返回数据是一串非常长的 JSON，其中包含层层嵌套的 UI 数据和业务数据。这导致传输时间长了不少。

有一种优化方式是让客户端对 UI 逻辑进行缓存，这样服务端就不必每次都传输大段大段的 UI 逻辑了。我们公司貌似没有采用这种方法，我是在这篇文章中看到的。

缺点 2：开发和测试难度增加

SDUI 极大增加了系统复杂度，让开发和测试困难了不少。我目前很明显感到，传统开发中非常简单的一件事，在这个架构下就费尽周折才能做成，可能会涉及很多 repo 的改动、很多方面的协调。

当然，如果整个体系架构已经搭建完善，那么其实是能够减轻开发者负担的，只不过我们还在框架搭建阶段。

谁在用 SDUI？

根据我查到的资料，可以确定：

Spotify

早在 2016 年，Spotify 就开始采用 SDUI 架构了。作为一个音乐流媒体服务，Spotify 需要经常围绕歌单做一些 UI 上的尝试，因此非常适合 SDUI 这种架构，可以基于歌单相关的一系列 UI 组件快速改版。

Spotify 时任安卓开发负责人有一个非常棒的关于 SDUI 的演讲：链接

爱彼迎

在网上可以找到很多关于爱彼迎 SDUI 架构的信息，比如这篇文章和这个帖子。

Lyft

参见这个帖子。

小结

在我目前看到的 SDUI 相关文章和讨论中，实践了 SDUI 架构的开发者大都还是表示 SDUI 利大于弊的。当然，目前我也只是刚刚接触。之后有时间再更新这个系列吧！

后续文章：SDUI（服务器驱动 UI）开发感受

初识 SDUI（Server-Driven UI，服务端驱动 UI）相关推荐

银河麒麟V10 SP2 server 搭建 ntp服务端
目录前言一.Ntp 二.使用步骤 1.矫正本机时区/时间 2.配置主配置文件 3.重启ntp服务三.客户端配置前言 ntp服务作为内网常用的时钟同步服务,在集群的搭建中有比较常见的使用一.N ...
在Linux上搭建VisualSVN Server（svn服务端）
一.检查是否安装了低版本的SVN # rpm -qa | grep subversion 如果已安装SVN,则会返回版本信息.这时需要卸载旧版本的SVN. 卸载旧版本SVN # yum remove ...
[2018 CS:GO Server]2018 Old CSGO 服务端，回忆逝去的青春！
简介: 2018 CSGO作为最后一代老UI,成为了许多老玩家逝去的青春,在这一年CSGO正式更新了全景UI等其他地方,本文章提供CSGO 2018服务端下载以及搭建教程,纯原创,欢迎各位的支持! 鸣 ...
华为云IoT智慧物流案例10 | 广和通L610模组FOTA升级（服务端FileZilla Server客户端FileZilla）
华为云IoT智慧物流案例10 | 广和通L610模组FOTA升级(服务端FileZilla Server客户端FileZilla) 第一章使用FileZilla Server搭建FTP服务器第二章 ...
如何让服务端同时支持WebSocket和SSL加密的WebSocket（即同时支持ws和wss）？
自从HTML5出来以后,使用WebSocket通信就变得火热起来,基于WebSocket开发的手机APP和手机游戏也越来越多.我的一些开发APP的朋友,开始使用WebSocket通信,后来觉得通信 ...
web服务端和游戏服务端的区别
最近几天在技术交流群里讨论到游戏服务端的一些技术细节,小说君发现有些做服务端的同学因为没有接触过游戏服务端,所以对游戏服务端产生了一些误解.因此今天的文章就从web服务端和游戏服务端的区别说起,简单介 ...
单页面应用和服务端渲染-引入nuxt.js
SPA Single Page Application 单页面应用 MPA Mulpile Page Application 多页面应用 CSR Client Side Render 客户端渲染 SS ...
服务器ws证书,如何让服务端同时支持WebSocket和SSL加密的WebSocket（即同时支持ws和wss）？...
自从HTML5出来以后,使用WebSocket通信就变得火热起来,基于WebSocket开发的手机APP和手机游戏也越来越多.我的一些开发APP的朋友,开始使用WebSocket通信,后来觉得通信不够 ...
ssl java 客户端_Java SSL生成客户端和服务端crt文件
简述: SSL(百度百科) Secure Socket Layer 安全套接层, 是为网络通信提供安全以及数据完整性的一种安全协议,在传输层对网络连接进行加密 SSL协议分为两层: 1)SSL记录协议 ...

初识 SDUI（Server-Driven UI，服务端驱动 UI）

目录

背景