UI 分叉的第二个平台

为一个系统做原生 UI,第二个平台就开始分叉:它自己的组件、它自己的间距规则、它自己的一套布局 bug。让两套界面看起来一致,等于维护两份真相来源,而其中一份一旦被改就立刻漂移。

小程序运行时随附一套组件库,宿主通过统一契约渲染它,于是同样的按钮、列表、弹层在每个宿主上都长得一模一样。

共享组件库是什么

运行时暴露一组固定的原语——微信的 WeUI、支付宝的 Ant Design Mini 都是例子——宿主以原生保真度绘制它们。你的布局描述意图(一张卡片、一个 tab 栏)而非像素,运行时在每个平台上把它解析出来。Material Design 与 W3C 设计令牌工作亦是开放 Web 上同样的理念。

差距在哪里体现

环节原生(逐平台)小程序运行时(共享库)
组件每个系统重建一套库
布局规则会分叉同一契约
视觉 bug逐平台共享,修一次
设计系统重复单一来源
新宿主新分叉复用库

结果是一个界面,无论出现在哪里都表示同一件事。

为什么共享胜过分叉

共享库意味着一次视觉修复落到一处、触达每个宿主,而不是在三个地方打补丁却仍然对不齐。它也意味着新宿主继承既有设计系统,而不是再起第三套分叉。

Cross Mini App 如何落地

Cross Mini App 把程序跑在一个带共享组件契约的运行时上,让你的设计系统在各宿主间渲染一致。你建一次界面;运行时替你保持一致性。你不再维护三套 UI,而是拥有同一套。

这就是会分叉的界面与稳得住的界面之间的区别。

参考来源