簡(jiǎn)介：支付寶客戶端的動(dòng)態(tài)化技術(shù)經(jīng)歷三個(gè)階段：現(xiàn)階段也就是第三階段是實(shí)體組件+部分光柵化的hybrid模式，Cube 就是該模式下的產(chǎn)物。

如標(biāo)題所述，筆者將持續(xù)更新《Cube 技術(shù)解讀》系列文章。本文為Cube系列首篇文章，后續(xù)文章筆者會(huì)更側(cè)重于技術(shù)詳解，包括不限于：Cube卡片技術(shù)棧一篇，Cube小程序技術(shù)棧一篇，質(zhì)量KITE&工具ACT一篇，性能優(yōu)化一篇等。

背景

支付寶客戶端的動(dòng)態(tài)化技術(shù)經(jīng)歷三個(gè)階段。第一個(gè)階段是native+web的hybrid模式，以webview為基石。第二階段是實(shí)體組件模式，把html描述的組件和css樣式信息映射到實(shí)體組件，并且把實(shí)體組件的事件傳遞到j(luò)s層進(jìn)行處理。第三階段是實(shí)體組件+部分光柵化的hybrid模式，Cube是第三階段的產(chǎn)物。

Cube起源于native頁面的動(dòng)態(tài)化訴求，產(chǎn)品形態(tài)表現(xiàn)于Cube卡片。隨著小程序概念的出現(xiàn)，Cube融入了支付寶小程序技術(shù)棧，產(chǎn)品形態(tài)為輕量級(jí)的支付寶小程序解決方案（相對(duì)于使用瀏覽作為核心的web小程序）。這篇文章是一個(gè)綜述，也是Cube系列的首篇文章。

技術(shù)選型

Cube的準(zhǔn)確誕生時(shí)間很難確定，大致在16和17年之間，比RN（ReactNative）晚上一年。Cube誕生的主要原因是native頁面的動(dòng)態(tài)化訴求。錢包改版的頻率高，給研發(fā)的壓力很大，于是想到把高頻改版的頁面動(dòng)態(tài)化。RN和Flutter的出現(xiàn)，給了我們一個(gè)很好的觀察視角，即業(yè)界優(yōu)秀的科技公司是如何看待動(dòng)態(tài)化這個(gè)話題以及它們的答案。起步階段，我們達(dá)成以下共識(shí)：

獨(dú)立研發(fā)，自主可控。我們沒有選擇基于RN的開源代碼來實(shí)現(xiàn)我們的動(dòng)態(tài)化解決方案，也沒有Flutter公布源碼后，切換到Flutter。這么做是考慮到兩點(diǎn)，第一點(diǎn)，技術(shù)棧的演進(jìn)要掌握在自己手里，不希望被牽著鼻子走；第二點(diǎn)，開源項(xiàng)目的產(chǎn)品化成本并不低，后期的維護(hù)成本也不低；

服務(wù)業(yè)務(wù)，技術(shù)克制。首先，我們沒有足夠能力和資源來支撐一個(gè)通用技術(shù)產(chǎn)品，服務(wù)于錢包業(yè)務(wù)是第一位的，簡(jiǎn)單說就是貼著業(yè)務(wù)走。其次，我們拒絕只求花里胡哨的技術(shù)demo，把核心能力做好，把產(chǎn)品成熟度做好，考慮拿到業(yè)務(wù)價(jià)值是第一位的。

基于上面兩個(gè)共識(shí)，我們的技術(shù)選型如下：

• 選擇Javascript作為邏輯語言；
• 選擇CSS的某個(gè)子集作為界面描述語言；
• 自繪制（text/img/div/scroller）+ 原生組件 （input, animation，map, audio, video …）的混合渲染模式。

阿里在前端的積累比較多，Cube選擇擁抱前端，采用javascript和css是自然的事情。默認(rèn)js引擎是quickjs。沒有選擇v8，有兩個(gè)判斷：v8太重，內(nèi)存開銷和庫加載速度都不理想；Cube的應(yīng)用場(chǎng)景大概率不需要v8提供的jit能力。我們額外引入了第三方的 wamr 作為webassemby引擎，且在編譯構(gòu)建工具上支持javacript和assemblyscript混合開發(fā)。Flutter開源后受到很多人的追捧，在很多文章和ppt上都看到了“Flutter完全獨(dú)立于平臺(tái)層的渲染管線的優(yōu)勢(shì)”表述，認(rèn)為比RN映射實(shí)體組件的方式要高級(jí)很多。我們不認(rèn)為Flutter的渲染管線的性能優(yōu)于操作系統(tǒng)的渲染管線，畢竟設(shè)備和操作系統(tǒng)可以垂直整合，利用一些設(shè)備特性。此外，是否自建渲染管線應(yīng)該取決于業(yè)務(wù)訴求，而不應(yīng)該盲目的追求技術(shù)。

Cube的自建渲染管線僅限于自繪制標(biāo)簽，如前所述包括text/img/div/scroller，使用平臺(tái)層的canvas api直接繪制在系統(tǒng)的view上；如果某顆子樹的標(biāo)簽都是自繪制標(biāo)簽，這顆子樹會(huì)被“拍平”繪制在一個(gè)view上。自繪制標(biāo)簽以外的標(biāo)簽都是用映射原生組件的方式，并且封裝了統(tǒng)一的實(shí)體組件映射這些協(xié)議，提供給開發(fā)人員。目前Cube的業(yè)務(wù)場(chǎng)景主要集中在移動(dòng)端，也簡(jiǎn)單嘗試過往linux/rtos平臺(tái)移植。如果后續(xù)業(yè)務(wù)逐漸擴(kuò)展到linux/rtos，我們會(huì)考慮進(jìn)一步完善自繪制，一個(gè)是把平臺(tái)層的canvas api收斂到skia，另一個(gè)是內(nèi)置layer compositor。

當(dāng)前狀態(tài)

在承接業(yè)務(wù)的過程中，Cube大致沉淀了2種業(yè)務(wù)形態(tài)，分別是Cube卡片和Cube小程序。

Cube卡片的作用是給native頁面賦予區(qū)域化的動(dòng)態(tài)能力，提高業(yè)務(wù)迭代和運(yùn)營(yíng)效率。錢包接入的卡片也分為兩類，一類是沒有js能力的簡(jiǎn)單卡片，支持表達(dá)式和vif&vshow這類構(gòu)建時(shí)控制DOM樹的操作，追求近似native的速度；另一類是具備js能力的復(fù)雜卡片，用來支持一些復(fù)雜的業(yè)務(wù)。Cube卡片在錢包已經(jīng)大規(guī)模應(yīng)用，pv超過100億，接入的場(chǎng)景參考截圖，包括不限于首頁、理財(cái)、我的等tab頁，以及卡包、出行、支付結(jié)果頁等二級(jí)頁面。

Cube卡片的定位也是優(yōu)先服務(wù)于錢包內(nèi)的一二方業(yè)務(wù)，如果要想提供給三方開發(fā)者區(qū)域動(dòng)態(tài)化的能力，我們推薦小程序widget。此外，我們正在著手把Cube卡片能力輸出給中小型金融機(jī)構(gòu)以及互聯(lián)網(wǎng)公司。

Cube 是作為渲染引擎來引入小程序技術(shù)棧。小程序基礎(chǔ)設(shè)施包括：容器，前端框架，渲染引擎，腳本引擎。容器可以理解成Appx/渲染引擎/腳本引擎之間的聚合層代碼，提供包管理/JSAPI/安全管控/錢包核心服務(wù)等功能。移動(dòng)端上小程序默認(rèn)的渲染引擎是UC，Cube小程序應(yīng)用很有限。相對(duì)于UC來說，Cube在包大小/啟動(dòng)速度/列表滑動(dòng)流暢性/內(nèi)存消耗上有一些優(yōu)勢(shì)，但是劣勢(shì)也非常明顯——Cube支持的css能力不足，且Cube的開發(fā)工具不完善。基于此，從19年開始Cube投入了巨大的人力來擴(kuò)充css能力。Cube 是除瀏覽器內(nèi)核外支持 CSS 較完善的渲染引擎，支持flex/inline/block等布局方式，偽類和偽元素，z-index以及相對(duì)和絕對(duì)定位層級(jí)管理。我們也投入大量的精力試圖建立類似devtools功能的工具。

這些努力一定程度上改進(jìn)了開發(fā)效能，但仍然無法滿足前端同學(xué)的訴求。我們逐漸意識(shí)到，在瀏覽器性能不是主要瓶頸的場(chǎng)景下，前端開發(fā)者不大會(huì)接受瀏覽器的一個(gè)子集。于是，Cube小程序開始轉(zhuǎn)向IoT場(chǎng)景，面向?yàn)g覽器跑不起來，或者，體驗(yàn)極差的場(chǎng)景。Cube小程序作為某種應(yīng)用開發(fā)棧，對(duì)試圖建立三方開發(fā)者生態(tài)的客戶是有一定的吸引力。目前我們主要的精力在電視大屏端，感興趣的同學(xué)可以在天貓魔盒上體驗(yàn)Cube小程序，也可以在別的盒子以及智能電視上下載[酷喵影視](https://acz.youku.com/wow/tvact/act/cibn）。

在卡片和小程序之間，實(shí)際上還有一個(gè)中間地帶，即單頁。這個(gè)頁面可以是全屏，也可以是漂浮在空中的半屏。Cube早期嘗試過h5單頁，面向高頻率營(yíng)銷場(chǎng)景。它的技術(shù)棧和小程序幾乎完全一樣，不同的是，h5單頁沒有容器的概念，從服務(wù)端下載到端上的不是小程序包而是嵌入了Cube構(gòu)建產(chǎn)物的h5頁面。h5單頁接入過紅包碼業(yè)務(wù)和螞蟻森林的二級(jí)頁面，因?yàn)榫S護(hù)成本陸續(xù)下線。h5單頁不成功，并不意味著單頁的需求不存在。近期探索的小程序widget其實(shí)就屬于單頁的范疇——我們希望widget能夠讓服務(wù)前置，承載一定的交互邏輯，同時(shí)也限制它的能力，便于管控，適合三方開發(fā)者。

技術(shù)架構(gòu)

Cube的內(nèi)部有兩個(gè)大的模塊，一個(gè)是CubeKit，負(fù)責(zé)對(duì)接js引擎且封裝平臺(tái)差異，也包括了開發(fā)調(diào)試工具。另一個(gè)是CubeCore，是用c++代碼實(shí)現(xiàn)的渲染核心邏輯。

對(duì)于Cube小程序，支持tinyApp-dsl子集，移動(dòng)端上使用jscore/v8作為js代碼的執(zhí)行引擎，IoT設(shè)備上使用quickjs；對(duì)于Cube卡片，支持基于精簡(jiǎn)vue的card-dsl。簡(jiǎn)單的卡片直接解析AST來渲染頁面，復(fù)雜卡片支持用戶用js寫一些簡(jiǎn)單邏輯，并且通過quckjs來驅(qū)動(dòng)dom樹的更新。

移動(dòng)端上，Cube和Web小程序共用一個(gè)容器代碼。在IoT設(shè)備上，我們持續(xù)投入人力到Appx和容器的垂直整合中。從目前的數(shù)據(jù)來看，IoT上的Cube小程序相對(duì)移動(dòng)端的Cube小程序有不小的基礎(chǔ)性能優(yōu)勢(shì)。在電視端上Cube小程序的基礎(chǔ)性能數(shù)據(jù)是：包體積5.5mb，內(nèi)存消耗32mb（淘寶特價(jià)板小程序?yàn)槔?#xff09;，冷啟動(dòng)耗時(shí)3～4s。隨著垂直整合的深入，未來Cube小程序的基礎(chǔ)性能會(huì)進(jìn)一步的改善。

質(zhì)量體系這個(gè)話題，我放在技術(shù)架構(gòu)里講，原因是它本身是技術(shù)架構(gòu)的一部分。做業(yè)務(wù)開發(fā)，測(cè)試人員可以遍歷用戶場(chǎng)景，有bug修bug。基礎(chǔ)軟件所承載的業(yè)務(wù)場(chǎng)景只是無限樣本中很小的一部分，業(yè)務(wù)場(chǎng)景的回歸沒有問題，不能夠保證引擎沒有問題——最壞的情況是問題持續(xù)累積，直到某一天突然爆發(fā)出來。這個(gè)時(shí)候再想解決問題，已經(jīng)積重難返。所以，基礎(chǔ)軟件的研發(fā)迫切需要某種提前暴露潛在問題的手段，這個(gè)手段不可能借助某個(gè)測(cè)試資源而是研發(fā)團(tuán)隊(duì)自己建設(shè)。

瀏覽器的WPT測(cè)試用例集合給了一個(gè)很好的參考，Cube也建設(shè)了這樣一套基礎(chǔ)能力樣本集合以及配套的樣本自動(dòng)化執(zhí)行框架KITE，投入到版本迭代&代碼提交中。截止目前，我們基本能做到單日粒度的自動(dòng)巡檢，支撐我們?cè)谝延写罅康臉I(yè)務(wù)場(chǎng)景的情況下對(duì)引擎做升級(jí)和重構(gòu)，下圖是引擎基礎(chǔ)能力巡檢工具的截圖。

開發(fā)工具鏈這個(gè)話題，我也放在這里講。Cube的直接客戶不是用戶，而是業(yè)務(wù)方的開發(fā)同學(xué)。在項(xiàng)目初期就要考慮到工具這塊，比如調(diào)試器的設(shè)計(jì)、預(yù)覽容器、日志設(shè)計(jì)、低代碼搭建平臺(tái)等等。在擴(kuò)展業(yè)務(wù)過程中，工具鏈某種程度上比Cube本身還要重要，畢竟它是客戶的第一印象。我們遇到過前期技術(shù)調(diào)研時(shí)，客戶因?yàn)楣ぞ叩牟煌晟贫芙^使用。業(yè)務(wù)接入后，除了能力上，業(yè)務(wù)方也會(huì)對(duì)工具提供各種要求（在協(xié)助排查問題時(shí)也會(huì)發(fā)現(xiàn)新的工具需求），貫穿產(chǎn)品的整個(gè)生命周期，也是維系客戶粘性的重要工作。隨著Cube大規(guī)模應(yīng)用于業(yè)務(wù)后，我們?cè)诠ぞ呱贤度氲木χ饾u超過了功能&技術(shù)迭代本身。

回顧&未來規(guī)劃

回顧過去5年，Cube一路跌跌撞撞，中途差點(diǎn)夭折，能走到今天實(shí)屬不易。從個(gè)人視角，Cube能活下來依賴“上下堅(jiān)持”。一方面，上面的決策者堅(jiān)持投入（19年及以前幾乎沒有像樣的業(yè)務(wù)價(jià)值）；另一方面，一線的同學(xué)堅(jiān)持做一件事，沒有技術(shù)追求是不可能挺過途中的各種坎坷。我們期待能Cube未來應(yīng)用到物聯(lián)網(wǎng)操作系統(tǒng)，畢竟應(yīng)用開發(fā)技術(shù)棧是操作系統(tǒng)的核心技術(shù)之一。

Cube未來的規(guī)劃繼續(xù)堅(jiān)持“緊貼業(yè)務(wù)”和“技術(shù)克制”，把產(chǎn)品做好，把開發(fā)者服務(wù)好，把技術(shù)打磨好。重點(diǎn)的發(fā)展方向如下：

鑒于Cube卡片可以運(yùn)行在32MB內(nèi)存/400Mhz的RTOS設(shè)備上，進(jìn)一步探索在物聯(lián)網(wǎng)設(shè)備上的落地；

推廣Cube小程序在電視大屏端的應(yīng)用和落地，探索商業(yè)模式。

如前所述，后續(xù)更新文章我會(huì)更側(cè)重技術(shù)詳解，針對(duì)卡片技術(shù)棧、小程序技術(shù)棧、質(zhì)量KITE&工具ACT、性能優(yōu)化等進(jìn)行深入解讀與暢聊。

Cube 技術(shù)棧將于近期上線 mPaaS，作為一項(xiàng)全新能力對(duì)外輸出，如你對(duì)該系列文章感興趣，亦或是對(duì)Cube 技術(shù)感興趣，歡迎點(diǎn)擊文末閱讀原文了解 mPaaS 更多相關(guān)資訊。

咱們下篇文章再見。

---

本文轉(zhuǎn)載于公眾號(hào)「阿里巴巴移動(dòng)技術(shù)」，點(diǎn)擊這里，了解 mPaaS 更多相關(guān)資訊。

原文鏈接：https://developer.aliyun.com/article/791499?

版權(quán)聲明：本文內(nèi)容由阿里云實(shí)名注冊(cè)用戶自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，阿里云開發(fā)者社區(qū)不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。具體規(guī)則請(qǐng)查看《阿里云開發(fā)者社區(qū)用戶服務(wù)協(xié)議》和《阿里云開發(fā)者社區(qū)知識(shí)產(chǎn)權(quán)保護(hù)指引》。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，填寫侵權(quán)投訴表單進(jìn)行舉報(bào)，一經(jīng)查實(shí)，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。

總結(jié)

以上是生活随笔為你收集整理的Cube 技术解读 | 支付宝新一代动态化技术架构与选型综述的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。