在最近的iOS和Android系统版本中，系统环境逐渐发展到预展示部分内容和服务的趋势。同时，随着富媒体内容的爆发式增长和内容的多元化、年轻化，移动应用如何有效提升动态运营效率也成为各行业产学研运营的重要课题。在上述技术能力和行业需求的双重背景下，“蚂蚁动卡”应运而生。“蚂蚁动卡”现已正式上线mPaaS。欢迎开发者登录阿里云账号，进入mPaaS控制台开始试用。以下内容是对“蚂蚁动卡”新品发布会的全过程回顾。点此观看蚂蚁动卡完整回放，实现App首页敏捷更新viaQingScape-蚂蚁集团mPaaS产品经理蚂蚁动卡是基于支付宝的新型卡片技术栈，实现App首页的敏捷更新。蚂蚁动态卡片魔方是蚂蚁集团自主研发的一套跨平台动态卡片解决方案。是服务于应用页面，面向内容运营，帮助产品技术提升开发运营效率的区域动态技术。每张动态卡片独立嵌入原生页面的一个区域，区域内容通过卡片模板展示。无论是支付宝首页、疫情服务助手、蚂蚁森林还是支付页面，都是通过卡片的方式实现的。该卡片具有以下优点：①跨平台一致性：一套代码实现多端效果对齐。②动态化：页面结构样式和业务逻辑可以在卡片中动态更新。③高性能：卡牌更新以卡包的形式发布，体积非常小，却拥有极致的性能和内存。DynamicCard是经过支付宝App业务深度打磨的技术栈。包括客户端和云端，稳定可靠（崩溃率小于1/100,000）。同时拥有完善的开发调试工具，如编译、预览、调试、发布等。蚂蚁动态卡片的应用场景主要围绕内容运营，可实现新一代移动端动态研究与开发。发展模式。随着富媒体内容的爆发式增长和内容的多元化、年轻化，为提高用户的转化率和留存率，互联网和传统行业对移动应用的内容运营要求越来越高。如何提高动态内容运营效率成为各行业产学研运营的重要课题。而他们的诉求都可以通过卡片来实现。为什么移动应用程序需要动态卡片？上图是Ant动态卡片与原生页面、网页、Flutter、RN的对比。动态卡片在跨平台、开发效率、性能、包大小、接入改造成本、发布粒度等方面具有很大优势。特别是在发布粒度上，卡片可以在局部页面或小程序或子应用级别发布，发布效率极高，发布即时可见。同时卡包体积很小，改造的接入成本也很低，具有多终端跨平台一致性。经过四年的研发周期，Cube通过类前端的开发语言，拥有了较为完善的研发体系。经过支付宝钱包等大规模应用，在首页、财富板块、生活板块均取得了良好的落地效果。动态卡对业务的价值在于能够帮助研发人员快速响应运营需求。其技术目标是兼顾用户体验和研发效率。在客户端，卡片的渲染效果如上图右侧所示。它由两部分组成，即名片模板和名片数据。客户端获取卡片模板，然后获取卡片数据，最后渲染出终端的样式。卡片模板包括卡片布局、卡片逻辑和卡片样式。逻辑包括埋点信息，以及卡片在什么情况下应该显示哪种样式等业务逻辑。蚂蚁卡的产品价值可以从三个维度来阐释：①开发导向：具有高效开发的特点。通过精简的VUE语言和完善的调试工具，减少发布，提高开发效率。②产品/运营导向：具备实时更新能力。每次发布版本或有内容更新时，都可以通过预设的卡片模板对运营内容进行更新推送。这也意味着，在大多数情况下，一次产品更新只需要发布一张卡片，而不需要更新整个App、整个小程序、整个界面。这样一来，运营效率和产品需求落地效率非常高，可以支持多种业务场景一次落地，也可以满足差异化、个性化的运营需求。③对于终端用户：提供流畅的体验。卡牌堪比原生体验，流畅度甚至优于原生。同时，由于体积小、性能好、占用内存少，重度用户会有更流畅的体验。蚂蚁动卡的产品架构分为四层：①技术层：Cube核心衍生出两个模块，分别是Cube卡和未来即将发布的轻量级小程序技术栈。②产品层：基于魔方卡片的产品有蚂蚁动卡魔方、蚂蚁动卡SmartLayout；基于小程序的产品包括立方体高性能小程序和立方体高性能小程序-智能建设。③设备层：支持移动和物联网终端。在卡片层面，更广泛适用于移动终端，高性能小程序可以兼顾低端移动设备、物联网设备或大屏一体机。④场景层：适用于富媒体数字化运营场景，包括金融、泛娱乐、互联网、交通、物联网等。对于重视内容运营的行业，蚂蚁动卡可以提供高性能、高性价比的服务。高效内容运营，适用于内容实时运营、舆情应急管理、运维应急管理、产品AB测试、最小化功能更新等场景。在需要紧急内容更新或动态更新的场景下，无需要发布一个版本，更新卡片内容即可。卡片支持的组件包括腰带、推流、视频、浮窗、广告等原生支持的组件。相比Flutter和H5不能支持环流，只能支持整页发布，Cube提供了原生和局部动态的能力，可以支持更广泛的场景。场景一：运营场景下的动态发卡和智能布局。千面。上图左下角呈现了两张模板不同的动态卡片，它们的数据也不同。通过发布不同的名片模板，调用后台不同的数据，实现名片动态更新，千人按需展示。整个首页就是布局，可以针对不同的人群设置不同的布局。场景二：支付宝结合mPaaS动态研发新一代移动终端。上图右下角的支付宝首页，蓝色部分主要是原生开发，体验最好，性能最好；中间部分是一些内部动态的子应用，由立方体小程序开发，兼顾了体验和动态；下面的晴雨表和其他tab详情页都是用cube开发的，具有局部动态或者单页动态的高性能。Cube智能布局基于动态卡片和智能引擎实现页面的整体布局。该页面由多个可以动态呈现的卡片模板组成。动态名片模板与业务数据打通，针对不同人群。智能引擎可以通过布局配置调整不同人群、不同内容的布局。版面也可以结合一些已有的mPaaS产品，如短视频直播、终端智能、低代码构建、LBS、视觉嵌入等，实现整体解决方案的输出。以支付宝首页的动态智能布局为例，可以看出活跃组和非活跃组的布局是有区别的。对于不活跃的人，首页会以折扣和公益为主；对于活跃用户，首页会展示与其深度相关的业务，如行情晴雨表、金融热点等。此外，对于同一用户，理财卡在开市后和开市后的样式和内容也会有所不同。市场休市，夜间会有蚂蚁森林、计步能量等卡片引导提示。Cube高性能小程序是基于大屏或物联网场景的新一代开发需求。它是基于Cube渲染引擎的页面级或子应用级解决方案。它是一个高性能、动态的小程序解决方案，具有跨平台的一致性、动态性和高性能。同时在开发端复用小程序DSL子集，更容易上手。Cube高性能小程序多适用于大屏IOT场景或部分低端设备小程序，也适用于动态单页应用和常规应用中的小程序。它在低端设备上具有更好的性能。与外置小程序相比，魔方高性能小程序更能匹配原生体验，节省内存，在低端设备上流畅度更好。其核心优势主要体现在以下两个方面：①高效开发：复用小程序的开发语言，减少发布，提高效率。②流程体验：对于大屏IoT或者机顶盒等比较老旧的设备，可以实现原生体验，也可以实现动态发布，流畅度远高于传统的外置小程序。上图是蚂蚁动卡与H5的效果对比。左边是冷启动，有缓存，卡启动更快；右侧滑动，带缓存，卡片渲染效果更流畅，速度更快。上图是蚂蚁动卡与原版的效果对比。整体差别不大，卡的性能和原版不相上下。动态、高效、蚂蚁动态卡片核心逻辑viaJingjun-蚂蚁集团高级技术专家蚂蚁动态卡片封装了独立的SDK，在卡片内部实现了卡片的渲染能力和JS相关逻辑SDKCapability，应用可以简单方便的接入SDK。同时，为了提高卡片的渲染性能，内部实现了卡片之间的复用和卡片内组件的复用。此外，动态卡片还实现了以下扩展能力：①扩展组件协议：卡片提供内置组件，如文本、图片、div等，通过组合内置组件，可以满足大部分业务场景的需求。得以实现。但是有一些特殊的场景，你希望能够扩展自己的组件能力。举个例子，业务已经实现了在客户端自定义一些视频组件和直播组件的能力，但是还是希望这些组件能够在卡上实现混合渲染和动态投放的能力。提供扩展组件协议后，只需要在现有组件上实现扩展组件协议，并在模板中编写注册的自定义扩展组件标签即可实现模板中组件混合渲染的目的。②扩展JSAPI：针对部分客户端的能力，可以通过卡片中的JSAPI调用。通过实现JSAPI协议，扩展JSAPI，在卡片内部编写GS逻辑时，可以直接调用端的公共能力。应用接入动态卡片后，主要任务是创建卡片，实现动态内容。SDK提供创建卡片的接口，创建的卡片为卡片实例。页面中的一个视图对应一张卡片。通过视图实现内容和逻辑，生成卡片，通过卡片实现动态内容。每张卡片都有一个卡片模板，统一的DSL负责编写卡片模板的布局、样式、JS逻辑。DSL内置组件标签以及扩展组件都可以在模板中使用。卡片的系统架构分为以下四层：应用层：主要负责数据处理、卡片模板的版本管理，对外负责API协议封装。其中，模板管理主要是根据不同的客户端版本分发不同的模板，并根据高版本的模板实现动态升级，保证客户端的名片能够实时更新，达到动态的目的渲染。可以使用不同的版本来管理卡片的样式和布局，在模板内部，因为支持JS逻辑的编写，所以也支持渲染逻辑的能力。在单个模板中，可以根据服务端发送的不同数据情况渲染出不同的样式，但这会造成模板中业务逻辑较多，难以维护。因此，通过不同的模板版本进行管理更方便，更适合大多数动态场景。逻辑层：包括JS框架和模板引擎，通过逻辑层实现模板样式解析、属性数据绑定、逻辑渲染、指令构建。指令构建是指根据模板的布局和样式属性构建不同节点的指令分发给渲染层进行节点渲染。另外，逻辑层也实现了一个比较小的JS框架来辅助模板的动态计算能力。渲染层：主要负责渲染模型的计算，包括布局、分层计算、构建渲染任务、光栅化。渲染层包含两种不同类型的UI，即物理UI和虚拟UI。EntityUI指的是一些复杂的组件，比如输入框、列表、自定义扩展组件；虚拟UI是指通过CanvasCPI绘制的组件，包括内置的文本组件、图片组件、DIY容器组件等。平台层：封装了CanvasCPI和平台UI接口。实体UI的布局是通过平台层的接口实现的。JSFramework层实现了一个小型的JS展示框架。设计初衷是为了实现高性能，所以只实现了响应式的能力，并没有过多扩展JS框架的能力。我们选择QuickJS引擎作为卡片的JS引擎。体积比较小，性能比较高，非常适合动态卡片场景。此外，该层还扩展了JSApi和Timer的异步任务功能。CardEngine层主要包括卡片模块管理、组件管理、简单模板表达式、抽象语法树解析、DOMdiff计算。RenderEngine层是整个渲染的核心模块，包括布局、动画能力（2D、3D）、Render、Layer、手势等常用事件。Render主要负责计算一些渲染相关的数据，Layer主要负责分层计算。动态卡片的效率得益于线程模型的设计。运行时的常驻线程主要有以下几种：①桥接线程：负责Js指令、Node树的构建以及相关节点的样式分析和布局计算。②Renderthread：负责Rendertree和Layertree的构建，以及分层渲染树、手势相关的数据计算和渲染数据计算。其中Render为渲染的起始编号，Layer为分层绘制的编号。③Paintthread：负责绘图指令的构建和最后的光栅化。Paint线程是多线程的，可以支持多任务渲染绘制，提高渲染性能。④主线程：主要包括手势识别和UI管理。除了以上四个主线程外，初始化阶段还有工作线程和IO相关线程。数据模型主要包括以下四棵树：①NodeTree：原始节点树，布局的计算和数据的变化都依赖于它。②RenderTree：渲染变形的数量。它的水平可能会改变。比如模板中的zIndex，涉及到一些层级变化。rendertree计算之后，最终的level会和实际的zIndex能力一致，所以rendertree会产生nodeleveladjustments。③LayerTree：它的主要功能是分层处理。不同的节点组件可能在同一层渲染绘制，每个Layer节点都是一个独立的渲染容器，里面包含很多虚拟节点，都在同一层渲染。因此，每个Layer节点都是独立的，可以实现并发渲染。④PaintTree：每个Layer节点内部都会有一个虚拟的节点树。它们在一层中呈现，但它们也有自己的层次关系。从最开始的原始数据，经过处理，到NodeTree，RenderTree，最后到LayerTree，最后LayerTree作为渲染容器。每个Layer节点对应一个独立的渲染任务。它们之间没有任何关系，可以实现并发渲染。下图是一张卡片，正在初始化，最后上传到屏幕。上图下方两张牌AB的全屏向上过程。首先从UI线程触发画面，在工作线程中初始化，然后进入Render进行分层计算和手势绘制任务计算，再到paint线程进行多线程并发渲染，最后返回到界面画面。上图中可以看到A卡内部实现了多线程渲染。卡片之间相互独立，支持异步渲染，保证低白屏概率。卡片的制作/工作流程如下：研发阶段主要负责卡片的编译、调试和预览。卡片编译调试完成后，通过卡片协会后台完成卡片的上传和发布。发布完成后，终端可以通过CardSDKName获取最新发布的卡片，卡片内容可以动态渲染到设备上。可以根据不同的卡片模板呈现不同的卡片样式和布局。ACK工具提供卡调试和编译功能。通过ACK工具，可以快速迁移新项目，编译调试代码，最后通过playground进行预览。clientplayground集成在debug包中，可以通过ACK工具在本地编译预览。DSL使用了VUE的子集语法，可以在前端写任意ID，最后使用ACK工具编译预览。下面演示卡片从新建到最终预览的全过程。首先，查看与ack-h相关的命令。其中包括卡片初始化、简单脚手架、工具名称和预览的命令。接下来，通过actinit命令初始化新的卡片项目。上图是卡片的基本信息包，里面包含了卡片的路径、名称等信息。使用VSCode打开卡片。上图左侧是卡片的项目文件，包括项目配置文件、main.vue（卡片样式、逻辑文件）、manifest.json（卡片配置文件、模型版本号、卡片名称）、mock.json（本地模拟文件）。打开main.vue，模板字段包含卡片的主节点样式、布局等，脚本包含JS变量声明、生命周期、JS逻辑等。JS方法可以定义在methods中，onClick方法定义在template绑定的点击事件中，可以在里面写一些逻辑。节点的样式可以在style中自定义。创建好模板后，需要通过“actprepare&&actserver”命令生成二维码连接调试工具。只需使用调试工具扫描二维码，客户端即可与工具本地模板建立连接，进行调试和预览。使用“actbuild”命令编译本地模板。编译完成后，在左侧增加一个新的dist目录，就是模板的编译产物。输入“actpreview”预览命令，设备显示如下图：修改代码如下。编译预览后设备显示如下：ACT提供了alive命令，修改模板后只需要保存即可，无需手动编译预览查看最终效果。接下来是一个相对复杂的模板演示。创建新功能后，需要再次扫码建立连接。通过build命令预览，效果如下：在代码中加入关键帧动画，可以看到预览后效果非常流畅。蚂蚁动卡已经应用在支付宝钱包的多个场景中，有大量的积累和沉淀，实践也证明其性能和稳定性经得起考验，希望能被更多的开发者看到和使用。结尾
