Cube 技术解读 | 支付宝新一代动态化技术架构与选型综述

清疚 2022-09-12 00:59 188阅读 0赞

**简介：** 支付宝客户端的动态化技术经历三个阶段：现阶段也就是第三阶段是实体组件+部分光栅化的hybrid模式，Cube 就是该模式下的产物。

![封面图0917.jpg][0917.jpg]

> 如标题所述，笔者将持续更新《Cube 技术解读》系列文章。本文为Cube系列首篇文章，后续文章笔者会更侧重于技术详解，包括不限于：Cube卡片技术栈一篇，Cube小程序技术栈一篇，质量KITE&工具ACT一篇，性能优化一篇等。

# 背景 #

支付宝客户端的动态化技术经历三个阶段。第一个阶段是native+web的hybrid模式，以webview为基石。第二阶段是实体组件模式，把html描述的组件和css样式信息映射到实体组件，并且把实体组件的事件传递到js层进行处理。第三阶段是实体组件+部分光栅化的hybrid模式，Cube是第三阶段的产物。

Cube起源于native页面的动态化诉求，产品形态表现于Cube卡片。随着小程序概念的出现，Cube融入了支付宝小程序技术栈，产品形态为轻量级的支付宝小程序解决方案（相对于使用浏览作为核心的web小程序）。这篇文章是一个综述，也是Cube系列的首篇文章。

# 技术选型 #

Cube的准确诞生时间很难确定，大致在16和17年之间，比RN（ReactNative）晚上一年。Cube诞生的主要原因是native页面的动态化诉求。钱包改版的频率高，给研发的压力很大，于是想到把高频改版的页面动态化。RN和Flutter的出现，给了我们一个很好的观察视角，即业界优秀的科技公司是如何看待动态化这个话题以及它们的答案。起步阶段，我们达成以下共识：

1.  独立研发，自主可控。我们没有选择基于RN的开源代码来实现我们的动态化解决方案，也没有Flutter公布源码后，切换到Flutter。这么做是考虑到两点，第一点，技术栈的演进要掌握在自己手里，不希望被牵着鼻子走；第二点，开源项目的产品化成本并不低，后期的维护成本也不低；
2.  服务业务，技术克制。首先，我们没有足够能力和资源来支撑一个通用技术产品，服务于钱包业务是第一位的，简单说就是贴着业务走。其次，我们拒绝只求花里胡哨的技术demo，把核心能力做好，把产品成熟度做好，考虑拿到业务价值是第一位的。

基于上面两个共识，我们的技术选型如下：

*  选择Javascript作为逻辑语言；
 *  选择CSS的某个子集作为界面描述语言；
 *  自绘制（text/img/div/scroller）+ 原生组件 （input, animation，map, audio, video …）的混合渲染模式。

阿里在前端的积累比较多，Cube选择拥抱前端，采用javascript和css是自然的事情。默认js引擎是quickjs。没有选择v8，有两个判断：v8太重，内存开销和库加载速度都不理想；Cube的应用场景大概率不需要v8提供的jit能力。我们额外引入了第三方的 [wamr][] 作为webassemby引擎，且在编译构建工具上支持javacript和assemblyscript混合开发。Flutter开源后受到很多人的追捧，在很多文章和ppt上都看到了“Flutter完全独立于平台层的渲染管线的优势”表述，认为比RN映射实体组件的方式要高级很多。我们不认为Flutter的渲染管线的性能优于操作系统的渲染管线，毕竟设备和操作系统可以垂直整合，利用一些设备特性。此外，是否自建渲染管线应该取决于业务诉求，而不应该盲目的追求技术。

Cube的自建渲染管线仅限于自绘制标签，如前所述包括text/img/div/scroller，使用平台层的canvas api直接绘制在系统的view上；如果某颗子树的标签都是自绘制标签，这颗子树会被“拍平”绘制在一个view上。自绘制标签以外的标签都是用映射原生组件的方式，并且封装了统一的实体组件映射这些协议，提供给开发人员。目前Cube的业务场景主要集中在移动端，也简单尝试过往linux/rtos平台移植。如果后续业务逐渐扩展到linux/rtos，我们会考虑进一步完善自绘制，一个是把平台层的canvas api收敛到skia，另一个是内置layer compositor。

# 当前状态 #

在承接业务的过程中，Cube大致沉淀了2种业务形态，分别是Cube卡片和Cube小程序。

Cube卡片的作用是给native页面赋予区域化的动态能力，提高业务迭代和运营效率。钱包接入的卡片也分为两类，一类是没有js能力的简单卡片，支持表达式和vif&vshow这类构建时控制DOM树的操作，追求近似native的速度；另一类是具备js能力的复杂卡片，用来支持一些复杂的业务。Cube卡片在钱包已经大规模应用，pv超过100亿，接入的场景参考截图，包括不限于首页、理财、我的等tab页，以及卡包、出行、支付结果页等二级页面。

Cube卡片的定位也是优先服务于钱包内的一二方业务，如果要想提供给三方开发者区域动态化的能力，我们推荐小程序widget。此外，我们正在着手把Cube卡片能力输出给中小型金融机构以及互联网公司。

![1.png][]

Cube 是作为渲染引擎来引入小程序技术栈。小程序基础设施包括：容器，前端框架，渲染引擎，脚本引擎。容器可以理解成Appx/渲染引擎/脚本引擎之间的聚合层代码，提供包管理/JSAPI/安全管控/钱包核心服务等功能。移动端上小程序默认的渲染引擎是UC，Cube小程序应用很有限。相对于UC来说，Cube在包大小/启动速度/列表滑动流畅性/内存消耗上有一些优势，但是劣势也非常明显——Cube支持的css能力不足，且Cube的开发工具不完善。基于此，从19年开始Cube投入了巨大的人力来扩充css能力。Cube 是除浏览器内核外支持 CSS 较完善的渲染引擎，支持flex/inline/block等布局方式，伪类和伪元素，z-index以及相对和绝对定位层级管理。我们也投入大量的精力试图建立类似devtools功能的工具。

这些努力一定程度上改进了开发效能，但仍然无法满足前端同学的诉求。我们逐渐意识到，在浏览器性能不是主要瓶颈的场景下，前端开发者不大会接受浏览器的一个子集。于是，Cube小程序开始转向IoT场景，面向浏览器跑不起来，或者，体验极差的场景。Cube小程序作为某种应用开发栈，对试图建立三方开发者生态的客户是有一定的吸引力。目前我们主要的精力在电视大屏端，感兴趣的同学可以在天猫魔盒上体验Cube小程序，也可以在别的盒子以及智能电视上下载\[酷喵影视\]([酷喵官网][Link 1]）。

![2.png][]

在卡片和小程序之间，实际上还有一个中间地带，即单页。这个页面可以是全屏，也可以是漂浮在空中的半屏。Cube早期尝试过h5单页，面向高频率营销场景。它的技术栈和小程序几乎完全一样，不同的是，h5单页没有容器的概念，从服务端下载到端上的不是小程序包而是嵌入了Cube构建产物的h5页面。h5单页接入过红包码业务和蚂蚁森林的二级页面，因为维护成本陆续下线。h5单页不成功，并不意味着单页的需求不存在。近期探索的小程序widget其实就属于单页的范畴——我们希望widget能够让服务前置，承载一定的交互逻辑，同时也限制它的能力，便于管控，适合三方开发者。

![3.png][]

# 技术架构 #

Cube的内部有两个大的模块，一个是CubeKit，负责对接js引擎且封装平台差异，也包括了开发调试工具。另一个是CubeCore，是用c++代码实现的渲染核心逻辑。

对于Cube小程序，支持tinyApp-dsl子集，移动端上使用jscore/v8作为js代码的执行引擎，IoT设备上使用quickjs；对于Cube卡片，支持基于精简vue的card-dsl。简单的卡片直接解析AST来渲染页面，复杂卡片支持用户用js写一些简单逻辑，并且通过quckjs来驱动dom树的更新。

移动端上，Cube和Web小程序共用一个容器代码。在IoT设备上，我们持续投入人力到Appx和容器的垂直整合中。从目前的数据来看，IoT上的Cube小程序相对移动端的Cube小程序有不小的基础性能优势。在电视端上Cube小程序的基础性能数据是：包体积5.5mb，内存消耗32mb（淘宝特价板小程序为例），冷启动耗时3～4s。随着垂直整合的深入，未来Cube小程序的基础性能会进一步的改善。

![4.png][]

质量体系这个话题，我放在技术架构里讲，原因是它本身是技术架构的一部分。做业务开发，测试人员可以遍历用户场景，有bug修bug。基础软件所承载的业务场景只是无限样本中很小的一部分，业务场景的回归没有问题，不能够保证引擎没有问题——最坏的情况是问题持续累积，直到某一天突然爆发出来。这个时候再想解决问题，已经积重难返。所以，基础软件的研发迫切需要某种提前暴露潜在问题的手段，这个手段不可能借助某个测试资源而是研发团队自己建设。

浏览器的WPT测试用例集合给了一个很好的参考，Cube也建设了这样一套基础能力样本集合以及配套的样本自动化执行框架KITE，投入到版本迭代&代码提交中。截止目前，我们基本能做到单日粒度的自动巡检，支撑我们在已有大量的业务场景的情况下对引擎做升级和重构，下图是引擎基础能力巡检工具的截图。

![5.png][]

开发工具链这个话题，我也放在这里讲。Cube的直接客户不是用户，而是业务方的开发同学。在项目初期就要考虑到工具这块，比如调试器的设计、预览容器、日志设计、低代码搭建平台等等。在扩展业务过程中，工具链某种程度上比Cube本身还要重要，毕竟它是客户的第一印象。我们遇到过前期技术调研时，客户因为工具的不完善而拒绝使用。业务接入后，除了能力上，业务方也会对工具提供各种要求（在协助排查问题时也会发现新的工具需求），贯穿产品的整个生命周期，也是维系客户粘性的重要工作。随着Cube大规模应用于业务后，我们在工具上投入的精力逐渐超过了功能&技术迭代本身。

# 回顾&未来规划 #

回顾过去5年，Cube一路跌跌撞撞，中途差点夭折，能走到今天实属不易。从个人视角，Cube能活下来依赖“上下坚持”。一方面，上面的决策者坚持投入（19年及以前几乎没有像样的业务价值）；另一方面，一线的同学坚持做一件事，没有技术追求是不可能挺过途中的各种坎坷。我们期待能Cube未来应用到物联网操作系统，毕竟应用开发技术栈是操作系统的核心技术之一。

Cube未来的规划继续坚持“紧贴业务”和“技术克制”，把产品做好，把开发者服务好，把技术打磨好。重点的发展方向如下：

1.  鉴于Cube卡片可以运行在32MB内存/400Mhz的RTOS设备上，进一步探索在物联网设备上的落地；
2.  推广Cube小程序在电视大屏端的应用和落地，探索商业模式。

如前所述，后续更新文章我会更侧重技术详解，针对卡片技术栈、小程序技术栈、质量KITE&工具ACT、性能优化等进行深入解读与畅聊。

[原文链接][Link 2]  
本文为阿里云原创内容，未经允许不得转载。

[0917.jpg]: /images/20220828/73f58fbe5acd4db9b3f9188c69264f98.png
[wamr]: https://github.com/bytecodealliance/wasm-micro-runtime
[1.png]: /images/20220828/1b58d4a6607b4d10ae46107b195a33a2.png
[Link 1]: https://acz.youku.com/wow/tvact/act/cibn
[2.png]: /images/20220828/1ba93f2cd8c2469093844769ebcc4073.png
[3.png]: /images/20220828/1a07e32f7b2148e78decd9d424bcc920.png
[4.png]: /images/20220828/48468003c36a4c18ad30f520fb681b99.png
[5.png]: /images/20220828/674f1174c52e4cf9a84eb0d8e47c9065.png
[Link 2]: http://click.aliyun.com/m/1000296621/