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

本文涉及的产品
mPaaS订阅基础套餐,标准版 3个月
简介: 支付宝客户端的动态化技术经历三个阶段:现阶段也就是第三阶段是实体组件+部分光栅化的hybrid模式,Cube 就是该模式下的产物。

封面图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小程序,也可以在别的盒子以及智能电视上下载[酷喵影视](https://acz.youku.com/wow/tvact/act/cibn)。

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、性能优化等进行深入解读与畅聊。

Cube 技术栈将于近期上线 mPaaS,作为一项全新能力对外输出,如你对该系列文章感兴趣,亦或是对Cube 技术感兴趣,欢迎点击文末阅读原文了解 mPaaS 更多相关资讯。

咱们下篇文章再见。


尾部banner.gif

本文转载于公众号「阿里巴巴移动技术」,点击这里,了解 mPaaS 更多相关资讯。

相关文章
|
2月前
|
存储 机器学习/深度学习 数据库
阿里云服务器X86/ARM/GPU/裸金属/超算五大架构技术特点、场景适配参考
在云计算技术飞速发展的当下,云计算已经渗透到各个行业,成为企业数字化转型的关键驱动力。选择合适的云服务器架构对于提升业务效率、降低成本至关重要。阿里云提供了多样化的云服务器架构选择,包括X86计算、ARM计算、GPU/FPGA/ASIC、弹性裸金属服务器以及高性能计算等。本文将深入解析这些架构的特点、优势及适用场景,以供大家了解和选择参考。
514 61
|
1月前
|
运维 监控 Cloud Native
智联招聘 × 阿里云 ACK One:云端弹性算力颠覆传统 IDC 架构,打造春招技术新范式
在 2025 年春季招聘季的激战中,智联招聘凭借阿里云 ACK One 注册集群与弹性 ACS 算力的深度融合,成功突破传统 IDC 机房的算力瓶颈,以云上弹性架构支撑千万级用户的高并发访问,实现招聘服务效率与稳定性的双重跃升。文章介绍了 ACK One+ACS 的弹性架构如何解决了春招的燃眉之急,让智联招聘的技术团队能够聚焦创新业务开发,欢迎关注。
|
1月前
|
运维 Kubernetes Cloud Native
智联招聘 × 阿里云 ACK One:云端弹性算力颠覆传统 IDC 架构,打造春招技术新范式
在 2025 年春季招聘季的激战中,智联招聘凭借阿里云 ACK One 注册集群与弹性 ACS 算力的深度融合,成功突破传统 IDC 机房的算力瓶颈,以云上弹性架构支撑千万级用户的高并发访问,实现招聘服务效率与稳定性的双重跃升。
|
25天前
|
人工智能 移动开发 JavaScript
AI + 低代码技术揭秘(二):核心架构
VTJ低代码平台架构包含引擎编排层、Provider服务系统、数据模型及代码生成管道,支持设计时与运行时功能。Engine管理设计流程,Provider处理服务加载,Simulator实现组件渲染,数据模型通过事件驱动同步状态。代码生成管道可双向转换Vue组件与DSL,支持多平台适配,如Web、H5和UniApp。系统提供可视化编辑、热重载与AI集成,满足高效开发需求。
33 0
|
2月前
|
人工智能 缓存 自然语言处理
Bolt DIY架构揭秘:从模型初始化到响应生成的技术之旅
在使用Bolt DIY或类似的AI对话应用时,你是否曾好奇过从输入提示词到获得回答的整个过程是如何运作的?当你点击发送按钮那一刻,背后究竟发生了什么?本文将揭开这一过程的神秘面纱,深入浅出地解析AI对话系统的核心技术架构。
100 5
|
16天前
|
人工智能 大数据 开发者
让AI时代的卓越架构触手可及,阿里云技术解决方案开放免费试用
阿里云推出基于场景的解决方案免费试用活动,新老用户均可领取100点试用点,完成部署还可再领最高100点,相当于一年可获得最高200元云资源。覆盖AI、大数据、互联网应用开发等多个领域,支持热门场景如DeepSeek部署、模型微调等,助力企业和开发者快速验证方案并上云。
693 35
让AI时代的卓越架构触手可及,阿里云技术解决方案开放免费试用
|
10天前
|
存储 移动开发 JavaScript
快应用推广连接底层技术与架构以及如何结合自身系统分销的推广逻辑和技术对接-优雅草卓伊凡|果果|Ant
快应用推广连接底层技术与架构以及如何结合自身系统分销的推广逻辑和技术对接-优雅草卓伊凡|果果|Ant
33 4
快应用推广连接底层技术与架构以及如何结合自身系统分销的推广逻辑和技术对接-优雅草卓伊凡|果果|Ant
|
9天前
|
小程序 安全 JavaScript
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
34 1
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
|
13天前
|
数据可视化 IDE Java
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
OneCode图生代码技术通过可视化设计与Java注解驱动,实现UI到代码的高效转换,支持设计即开发、组件复用与动态加载,提升企业应用开发效率与协作能力。
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
|
5天前
|
数据采集 监控 Cloud Native
301重定向:当技术决策成为架构命运的十字路口
本文深入探讨了HTTP重定向背后的隐藏技术债务,揭示其对系统架构、性能和维护的深远影响。内容涵盖重定向的常见陷阱、性能损耗、链式跳转风险以及现代架构中的挑战,并提供工程师在实施重定向时必须思考的关键问题与实践建议,帮助构建更稳健、可维护的系统演化路径。
28 1