动态卡片：富媒体内容井喷式增长下，新一代移动端动态研发的模式
簡介：「螞蟻動態卡片」新品發布會全程回顧?
在 iOS 和 Android 系統近期推送的更迭版本中，系統環境已經逐漸發展出了將部分內容和服務前置化展示的趨勢。
同時，伴隨著富媒體內容井噴式增長以及內容的多樣化、年輕化，一款移動應用如何能有效提升動態化運營效率，也成為了各行業產研與運營的重要課題。
在上述技術能力和行業需求的雙重背景下，「螞蟻動態卡片」孕育而生。
「螞蟻動態卡片」現正式上線 mPaaS，歡迎廣大開發者登錄阿里云賬號前往 mPaaS 控制臺開通試用。
螞蟻動態卡片，實現App首頁的敏捷更新
via 青葶-螞蟻集團 mPaaS 產品經理
螞蟻動態卡片是基于支付寶的全新卡片技術棧，實現 App 首頁的敏捷更新。
螞蟻動態卡片 Cube 是螞蟻集團內部自研的一套跨平臺、動態化的卡片解決方案，是服務于應用頁面內的區域動態化技術，面向內容運營，幫助產品技術提升開發效率和運營效率。
每一個動態卡片獨立嵌于原生頁面內的一個區域，區域內容通過卡片模板進行展示。在支付寶的首頁，疫情服務助手、螞蟻森林或支付頁面，都是通過卡片的方式實現的。
卡片具有以下幾方面的優勢：
① 跨平臺的一致性：一套代碼實現多端效果對齊。
② 動態化：卡片內可以進行頁面結構樣式以及業務邏輯的動態化更新。
③ 高性能：卡片的更新以卡片包的形式發布，它的包體積非常小，具有極致的性能和內存。
動態卡片是經過支付寶 App 業務深度打磨的技術棧，它包括客戶端和云端，具有穩定性和可靠性（低于十萬分之一的 crash 率）。同時，它有完善的開發調試工具，比如編譯、預覽、調試、發布等。
螞蟻動態卡片的應用場景主要圍繞內容運營，它可以實現新一代移動端動態研發的模式。伴隨著富媒體內容井噴式增長以及內容的多樣化、年輕化，為提升用戶轉化率、留存率，互聯網以及傳統行業都對移動應用的內容運營有著日益增加增強的訴求。如何提升內容的動態化運營效率，成為了各行業產研以及運營的重要課題。
而他們的訴求，都可以通過卡片來實現。
為什么移動端 App 需要動態卡片？
上圖為螞蟻動態卡片與原生 native 頁面、 web 頁面、 Flutter、 RN 的對比。在跨平臺、開發效率、性能、包體積大小、接入改造成本、發布粒度等方面，動態卡片都具有較大的優勢。尤其在發布粒度上，卡片可以實現在局部頁面或某一個小程序或子應用層面上進行發布，且發布效率極高，發布即可見。同時卡片的包體積非常小，改造的接入成本也很低，并且具備多端的跨平臺一致性。
Cube 經過長達四年的研發周期，通過類前端的開發語言，有著比較完善的研發體系。經過了支付寶錢包等大規模的應用，在首頁、財富 Tab 和生活 Tab 都實現了良好的落地效果。
動態卡片對業務的價值在于能夠幫助研發人員快速響應運營訴求，它的技術目標是兼顧用戶體驗和研發效率。
在客戶端，卡片呈現的效果如上圖右側所示，它由兩部分組成，分別是卡片模板和卡片數據。客戶端通過獲取卡片模板，再獲取卡片數據，最終渲染出終端的樣式。
卡片模版包含了卡片布局、卡片邏輯和卡片樣式。其中邏輯包含埋點信息，以及比如在什么情況下卡片要展示何種樣式等業務邏輯。
螞蟻動態卡片的產品價值可以從三個維度來闡釋：
① 面向開發：擁有高效開發的特性。通過精簡的 VUE 語言、完善的調試工具等，減少發版，提升開發效率。
② 面向產品/運營：擁有實時更新的能力。每一次發版或有內容更新的時候，通過預置好的卡片模板將運營內容進行更新并推送即可。這也意味著大多數情況下，產品更新只需要發布一個卡片，而不需要進行整個 App 、整個小程序或整個界面的更新發布。從而使得運營效率和產品的需求落地效率很高，可以支持多個業務場景進行一個落地，也可以滿足差異化和個性化的運營訴求。
③ 面向終端用戶：提供了流暢體驗。卡片可以媲美于原生體驗，流暢度甚至優于原生。同時得益于包體積較小、性能好、占用內存少，面向重大用戶時會有更流暢的體驗。
螞蟻動態卡片的產品架構分為四層：
① 技術層：通過 Cube 的內核衍生出了兩個模塊，分別是 Cube 卡片和未來將發布的輕量級小程序技術棧。
② 產品層：基于 Cube 卡片衍生出的產品有螞蟻動態卡片 Cube 和螞蟻動態卡片的智能版面；基于小程序衍生出的有 Cube 高性能小程序以及 Cube 高性能小程序-智能搭建。
③ 設備層：支持移動端和 IoT 端。在卡片層面上更廣泛適用于移動端，而高性能小程序能夠兼顧移動端的低端設備、 IoT 設備或大屏一體機等。
④ 場景層：適用于富媒體的數字化運營場景，包含金融、泛娛樂、互聯網、交通、物聯網等。
對于重視內容運營的行業，螞蟻動態卡片能夠提供高性能、高效率的內容運營，適用于千人千面的實時內容運營、輿情應急管理、運維應急管理，或產品的 AB 測試、最小化功能的更新等。需要緊急更新內容或動態化更新的場景下，不需要發布版本，只需更新卡片內容即可。
卡片支持的組件包括腰封、 feed 流、視頻、浮窗、廣告等原生支持的組件。相比于 Flutter 與 H5 無法支持腰封，且只能支持整個頁面的發布，Cube提供了原生以及部分動態化能力， 能夠支持的場景更為廣泛。
場景1：運營場景下的動態卡片發布和智能版面千人千面。
上圖左下角呈現了兩個不同模板的動態卡片，它們的數據也不同。可以通過發布不同的卡片模板以及調用后端的不同數據，實現卡片的動態化更新以及千人千面的按需展示。整個首頁即版面，可以針對不同人群設置不同的版面。
場景2：支付寶結合 mPaaS 新一代移動端動態研發。
上圖右下角呈現的支付寶首頁，其中藍色部分是原生開發為主，體驗最佳、性能最優；中間部分是內部一些動態的子應用，采用 cube 小程序開發，兼顧體驗和動態性；最下方大盤晴雨表以及其他 Tab 詳情頁采用 cube 開發，具備局部動態化或單頁動態化的高性能。
Cube 智能版面是基于動態卡片、智能引擎實現頁面整體布局的千人千面。頁面由若干個可以動態渲染的卡片模板組成，動態卡片的模板與業務數據進行對接，針對不同的人群定向推送。智能引擎可以通過版面的配置實現不同人群、不同內容的版面調整。
版面也可以與現有的一些 mPaaS 其他產品結合，比如短視頻直播、終端智能、低代碼搭建、 LBS 、可視化埋點等，實現整體解決方案的輸出。
以支付寶首頁動態化智能版面為例，可以看到活躍和不活躍兩種人群的版面是有差異的。針對不活躍的人群，首頁以優惠和公益為主；針對活躍用戶，首頁會顯示其深度關聯的業務，比如大盤晴雨表、理財熱點等。此外，同樣的用戶，開市和閉市后理財卡片的樣式和內容會不同，以及晚上會出現螞蟻森林、步數兌換能量等卡片引導提示。
Cube 高性能小程序是基于大屏或 IoT 場景實現的新一代開發需求，它是基于 Cube 渲染引擎進行的頁面級或子應用級的解決方案，是一種高性能、動態化的小程序解決方案，具備跨平臺一致性、動態性、高性。同時在開發側復用小程序 DSL 子集，上手更簡單。
Cube 高性能小程序的適用場景多為大屏的 IOT 場景或一些低端設備的小程序，也適合 App 動態單頁、常規 App 里的小程序。它在低端設備上的性能更佳，相比于外部的小程序，Cube 高性能小程序可以媲美原生的體驗，因此在低端設備上更節省內存，且流暢度更好。
它的核心優勢主要在于以下兩個方面：
① 高效開發：復用小程序的開發語言，減少發版，提高效率。
② 流程體驗：針對大屏 IoT 或機頂盒等比較老舊的設備，可以達到原生 native 的體驗，也可以實現動態發布，流暢性也遠高于傳統的外部小程序。
上圖為螞蟻動態卡片與 H5 的效果對比。
左側為冷啟動、有緩存情況，卡片的啟動速度更快速；右側為滑動、有緩存情況下，卡片的渲染效果更流暢，速度也更快。
上圖為螞蟻動態卡片與原生的效果對比，整體差異并不大，卡片的性能可以媲美于原生。
動態，高效，螞蟻動態卡片的內核邏輯
via 京君-螞蟻集團高級技術專家
螞蟻動態卡片封裝了獨立的 SDK ，并在 SDK 內部實現了卡片的渲染能力和 JS 相關的邏輯能力，應用可以非常簡單方便地接入 SDK。同時為了提高卡片的渲染性，在內部實現了卡片間的復用以及卡片內組件的復用。
另外，動態卡片還實現了以下擴展能力：
① 擴展組件協議：卡片內部提供了內置組件，比如文本、圖片、 div 等。通過對內置組件進行組合，能夠實現大部分業務場景的訴求。但是有一些特殊場景希望能夠擴展自己的組件能力。舉個例子，比如業務在客戶端已經實現了一些視頻組件、直播組件定制化的能力，但依然希望這些組件能夠在卡片上實現混渲染并達到動態下發的能力。提供了擴展組件協議后，只需要在現有組件上實現擴展的組件協議，用注冊的自定義擴展組件標簽來寫模板，即可達到組件在模版內實現混合渲染的目的。
② 擴展 JSAPI：針對一些客戶端有的能力，可以在卡片內通過 JSAPI 來調用。通過實現 JSAPI 協議，擴展 JSAPI，即可在卡片內部寫 GS 邏輯的時候直接調用端上的公共能力。
應用接入動態卡片后，主要工作是創建卡片來實現內容的動態化。SDK 提供了創建卡片的接口，創建的卡片即為 card 實例。頁面里的一個 view 對應一個 card。可以通過 view 實現內容和邏輯，并生成 card，通過 card 實現內容的動態化。每一個 card 都有卡片模板，由統一的 DSL 負責寫卡片模板的布局、樣式以及卡片內的 JS 邏輯。DSL 內置的組件標簽以及擴展組件都可以在模板里使用。
卡片的系統架構分為以下四層：
其中模板管理主要根據不同的客戶端版本下發不同的模板，根據高版本的模板實現動態升級，保證客戶端的卡片能實時更新，達到動態渲染的目的。可以用不同的版本管理卡片的樣式和布局，而在模板內部，因為支持 JS 邏輯的編寫，也可以支持邏輯渲染的能力。在單個模板內部也可以根據不同的服務端下發數據條件來實現不同的樣式渲染，但是這會導致模板的業務邏輯特別多，難以維護。
因此，通過不同的模板的版本來管理更方便，也比較適合大部分動態化場景。
在 JSFramework 層實現了很小的 JS 顯示式框架，設計初衷是為了實現高性能，因此只是實現了響應式的能力，而沒有過多擴充 JS 框架的能力。我們選擇了 QuickJS 引擎作為卡片的 JS 引擎,它的體積比較小，而且性能比較高，非常適合動態卡片場景。此外，這一層也擴展了 JSApi 和 Timer 異步任務的能力。
Card Engine 層主要包括了卡片的 Module 管理、組件管理、簡單模板的表達式、抽象語法樹的解析以及 DOM 的 diff計算。
RenderEngine 層是整個渲染的核心的模塊，包括布局、動畫能力(2D、3D)、Render、Layer、手勢和其他通用事件。Render 主要負責計算一些渲染相關的數據，Layer 主要負責分層的計算。
動態卡片的高效得益于線程模型的設計。運行時的常駐線程主要有以下幾個：
① Bridge 線程：負責 Js 指令、Node 樹構建、以及相關節點的樣式解析和布局的計算。
② Render 線程：負責 Render 樹和 Layer 樹的構建以及分層繪制樹、手勢相關的數據計算和渲染數據的計算。其中 Render 即渲染的起始數，Layer 即分層繪制數。
③ Paint 線程：負責繪制指令的構建以及最終的光柵化。Paint 線程是多線程，能夠支持多任務做渲染繪制，提高渲染性能。
④ 主線程：主要包括手勢識別以及 UI 管理。
除了以上四個主要線程，在初始化階段，還有 worker 線程以及 IO 相關的線程。
數據模型主要包含以下四棵樹：
① NodeTree：原始的節點樹，布局的計算以及數據的變更都依賴于它。
② RenderTree：渲染的變形的數。它的層級可能會發生變化，比如模板里 zIndex 涉及到一些層級變化，做 render 樹計算后最終的層級會與實際的 zIndex 能力一致，因此 render 樹它會產生節點層級的調整。
③ LayerTree：它主要的作用是分層處理。不同的節點組件可能在同一層進行渲染繪制，而每一個 Layer 節點都是獨立的渲染容器，其中包含了很多虛擬節點，都在同一層里進行渲染。因此每一個 Layer 節點之間都是獨立的，可以實現并發渲染。
④ PaintTree：在每一個 Layer 的節點內部會有虛擬節點樹，它們在一層內渲染，但同時也有自己的層級關系。
從最開始的原始數據，經過加工，到 NodeTree、RenderTree，最終到 LayerTree，最終是以 LayerTree 為渲染容器。每一個 Layer 節點對應一個獨立的渲染任務，它們相互之間沒有任何關系，可以實現并發渲染。下面那個就是一卡片的，它整個在初始化到最終上屏的這么過程。
上圖下方的 AB 兩張卡片的上屏全過程。首先從 UI 線程觸發上屏，在 worker 線程里進行初始化，完成后進入 Render 進行分層計算、手勢繪制任務計算，再到 paint 線程進行多線程并發渲染，最終回到 UI 上屏。
上圖可以看到 A 卡片的內部實現了多線程的渲染，卡片之間是相互獨立的，能夠支持異步渲染，且能夠保證較低的白屏概率。
卡片的生產/工作流程如下：研發期主要負責卡片的編譯、調試和預覽。卡片完成編譯調試后，再通過卡片關聯后臺完成卡片的上傳和發布。發布完成之后，在端上通過 CardSDKName 獲取到最新發布的卡片，即可在設備上實現動態化渲染卡片內容。根據不同的卡片模板可以渲染不同的卡片樣式、布局。
ACK 工具提供了卡片的調試、編譯功能。通過 ACK 工具可以快速遷移新工程，并編譯調試代碼，最終通過 playground 預覽。客戶端 playground 集成 到debug 包里，能夠通過 ACK 工具在本地做編譯并預覽。DSL 使用了 VUE 的子集語法，可以用前端的任何 ID 來編寫，最終使用 ACK 工具做編譯、預覽即可。
接下來為卡片從新建到最終預覽的全流程演示。
首先，通過 ack-h 查看其中涉及的命令。
其中有卡片初始化的命令、簡單的腳手架、工具名以及預覽。
接下來，通過 act init 命令初始化新建卡片工程。
上圖為基礎的卡片信息包，包含了卡片的路徑、名字等信息。
用 VSCode 將卡片打開。
上圖左側即卡片的工程文件，包括工程配置文件、main.vue（卡片樣式、邏輯文件） 、 manifest.json（卡片的配置文件、模版本號、卡片名稱）、mock.json（本地 mock 文件）。
打開 main.vue，其中 template 字段包含了卡片主要的節點樣式、布局等，script 包含了 JS 的變量聲明、生命周期、JS 邏輯等。methods 里面可以定義 JS 方法，template 里綁定的 click 事件內定義了 onClick 方法，可以在其中寫一些自己的邏輯。
style 內可以自定義節點的樣式。
新建完模板后，需要通過“act prepare && act server”指令生成二維碼，用以與調試工具的連接。
只需要用 debug 調試工具掃描二維碼，客戶端就能夠與工具的本地模板建立連接了，即可進行調試和預覽。
使用“act build ”命令編譯本地模板。編譯完成后，左側新增了 dist 目錄，它是模板的編譯產物。
輸入“act preview”預覽指令，設備顯示如下圖：
對代碼進行如下修改。
編譯，預覽后，設備顯示如下：
ACT 提供了 alive 指令，修改模板之后只需保存，不需要手動編譯、預覽，即可查看最終效果。
接下來為相對復雜的模板演示。
在新建功能后，需要重新掃碼建立連接。通過 build 指令預覽，效果如下：
在代碼內加入 key frame 動畫，預覽查看以后可以看到效果非常流暢。
螞蟻動態卡片已經落地于支付寶錢包的諸多場景，有了很多積累和沉淀，實踐也證明了它的性能和穩定性都能夠經受住考驗，希望它能被更多開發者看見并使用。
原文鏈接
本文為阿里云原創內容，未經允許不得轉載。?
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的动态卡片：富媒体内容井喷式增长下，新一代移动端动态研发的模式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux chattr 与 lsatt
- 下一篇： IT人的年夜饭，也太香了吧