支付寶動態(tài)化卡片技術(shù)研發(fā)工具 ACT 的演進之路 | Cube 卡片技術(shù)棧
?????♀? 編者按：本文為《Cube 技術(shù)解讀》系列第七篇文章，作者是螞蟻集團客戶端工程師佳佑，帶大家了解?Cube 卡片工具 ACT 的設(shè)計思路與演進歷程。
Cube 技術(shù)解讀系列文章：
一直以來移動端技術(shù)生態(tài)中的動態(tài)化技術(shù)都是行業(yè)內(nèi)的話題熱點，各類應(yīng)用框架也層出不窮（RN、Weex、Flutter），支付寶客戶端也在業(yè)務(wù)旺盛的高性能、易投放訴求中逐步沉淀下了一套自研解決方案--Cube 卡片。
在移動端動態(tài)化應(yīng)用場景中，怎樣才能解放 DSL 領(lǐng)域內(nèi)描述語言的高效生產(chǎn)力？怎樣才能有效的降低傳統(tǒng)移動端 Native 研發(fā)的調(diào)試成本？怎樣才能貼切的整合行業(yè)內(nèi)各類優(yōu)秀解決方案與工具？帶著對這些問題的思考，支付寶 Cube 團隊在卡片業(yè)務(wù)中摸索沉淀了連接開發(fā) DSL 與引擎運行時的基礎(chǔ)配套工具--Ant Cube Tool（簡稱 ACT）。這篇文章將嘗試帶著大家了解 Cube 卡片工具 ACT 的設(shè)計思路與演進歷程。
技術(shù)選型
CLI
Cube 卡片的動態(tài)化方案主要是基于 JS 橋接技術(shù)，DSL 采用的是 HTML + JS + CSS 近前端技術(shù)棧的格式，行文寫法上借鑒了 Vue 單模板格式。行業(yè)中前端生態(tài)內(nèi)工具廣泛采用的是基于 Node 環(huán)境的 CLI 形式，考慮到這種 CLI 形式輕便、靈活、易于維護，Node 生態(tài)豐富的社區(qū)資源，再加上 Node 天然的跨平臺特性，Cube 卡片的基礎(chǔ)生產(chǎn)工具也決定使用 Node CLI 技術(shù)棧進行建設(shè)。
IDE vs CLI
隨著 Cube 卡片在業(yè)務(wù)場景中的逐步開放，越來越多擁有不同技術(shù)背景（前端、Native）的開發(fā)同學開始使用 Cube 卡片工具進行迭代研發(fā)。雖然 CLI 可以滿足基本的日常開發(fā)調(diào)試訴求，但相較于傳統(tǒng) IDE 模式，可交互的手段（快捷鍵、按鈕、菜單等）以及信息回饋的形式（彈窗提醒、編輯器聯(lián)動、狀態(tài)通知等）就會變得力不從心；然而搭建一個功能完備、靈活可靠、開箱即用的卡片桌面 IDE，不可避免的需要投入大量的研發(fā)、維護成本。得益于行業(yè)內(nèi)流行的編碼工具 VSCode 提供了較為完善、豐富的插件擴展能力，我們將 VSCode 插件作為 CLI 的輔助工具，補充了基于 VSCode 環(huán)境的便捷交互方式，在 IDE 與 CLI、研發(fā)投入與體驗產(chǎn)出之間尋求到了平衡。
框架設(shè)計
ACT 作為 Cube 卡片最基礎(chǔ)的輔助工具，承載著卡片在生產(chǎn)階段最核心的研發(fā)訴求：編譯、預(yù)覽、調(diào)試，操作鏈路上需要連通源碼編輯器、構(gòu)建底層、設(shè)備運行時各個環(huán)節(jié)，我們采用的是基于 CS 模式的數(shù)據(jù)通信機制，核心能力將封裝在 ACT 本地服務(wù)器中，由服務(wù)器提供 REST 響應(yīng)接口，供桌面編碼環(huán)境、設(shè)備運行環(huán)境、Web 調(diào)試環(huán)境調(diào)用。同時本地服務(wù)器中也開放了 WebSocket 連接能力，在鏈路節(jié)點間提供消息推送的功能，保障節(jié)點間狀態(tài)同步的及時性。
有別于傳統(tǒng) Native 單臺設(shè)備的聯(lián)調(diào)體驗，在 CS 模式下，ACT 可以很方便的實現(xiàn)多臺不同平臺、不同配置的設(shè)備同時進行卡片預(yù)覽、調(diào)試，這對在開發(fā)階段及時驗證卡片效果跨平臺的一致性將很有幫助。值得一提的是，在同一局域網(wǎng)環(huán)境下，Client 與 Server 的連接訪問其實并沒有地理位置的限制，這也使得我們在開發(fā)卡片時可以將本地的效果、信息投遞給遠程協(xié)作的其他同事，提高協(xié)作研發(fā)的效率；同樣的，也可以方便的在云端設(shè)備平臺環(huán)境中挑選合適的固件設(shè)備進行遠程連接，降低了不同運行環(huán)境兼容性驗證的操作成本。
核心功能
ACT 最主要的職能就是將業(yè)務(wù)開發(fā)時提供的模板信息（卡片 DSL）轉(zhuǎn)換為運行時可被處理的 Dom 數(shù)據(jù)元、Css 樣式集以及 JS 邏輯段，這個過程我們一般稱之為編譯。在獲得編譯產(chǎn)物之后，ACT 會繼續(xù)向引擎運行時投遞產(chǎn)物結(jié)果，并借助內(nèi)置于運行時的 Playground 模塊，為業(yè)務(wù)卡片提供真機效果預(yù)覽能力。同時，通過 ACT 內(nèi)置的 Devtool 應(yīng)用，為正在預(yù)覽的卡片附加 Element 節(jié)點、Style 樣式以及 JS 斷點調(diào)試能力。
工程
卡片的源碼工程主要由工程配置、卡片配置、卡片模板三部分構(gòu)成。其中工程配置（.act.config.json 文件）主要聲明了預(yù)覽模式、源碼路徑等基本信息；卡片配置（manifest.json 文件）包含了編譯模式、產(chǎn)物類型、引擎配置、組件聲明等信息；卡片模板（main.vue 文件）則涵蓋了一個卡片最基礎(chǔ)的布局、樣式、邏輯等部分。??Card?tree?-a
.
├──?.act.config.json
├──?main.vue
└──?manifest.json
編譯
在卡片的 DSL 描述格式中，一個基本的卡片主要包含布局結(jié)構(gòu)（<template>）、樣式聲明（<style>）、邏輯處理（<script>）三個部分。ACT 的編譯過程，就是把 DSL 中的這些基礎(chǔ)信息，轉(zhuǎn)譯為在運行時可被卡片引擎消費的元數(shù)據(jù)。雖然在行文時卡片的 DSL 參考了 Vue 格式，但卡片引擎的運行時 JS 框架同 Vuejs 框架完全不同，所以，ACT 對.vue 文件的編譯處理也同 VueCLI 完全不同。在編譯過程中我們引入了 CardAST 的結(jié)構(gòu)，編碼時提供的 DSL 源碼可以在編譯后經(jīng)過 CardAST 中間態(tài)結(jié)構(gòu)格式化為運行時可以處理的二進制格式；同時，通過 ES import 語法、模板中 Style 段的 src 屬性，支持了 JS 邏輯段、CSS 樣式段按需組織的能力。
預(yù)覽
在完成卡片 DSL 編碼后，需要通過真機運行驗證卡片的效果是否符合預(yù)期，ACT 提供了基于 CS 模式的真機預(yù)覽能力。在桌面本機環(huán)境中 ACT 在 KOA 框架下實現(xiàn)了一個本地 Server，并開放了 REST 請求 API 以及 WebSocket 通信連接能力。編譯產(chǎn)物將在桌面本機環(huán)境中被壓縮打包，并通過局域網(wǎng)內(nèi)來自客戶端的下載請求，將卡片產(chǎn)物投遞至客戶端運行時環(huán)境，借助客戶端內(nèi)置的 Playground 模塊，可以模擬卡片產(chǎn)物的下載、解包流程，并提供適當?shù)娜萜黜撁婕虞d卡片，卡片的渲染效果以及相關(guān)的事件交互都可以在 Playground 模塊中進行模擬驗證。
為了簡化操作流程，ACT 也整合了編譯、預(yù)覽兩個獨立的子命令，在 Node 環(huán)境文件系統(tǒng)變更通知的事件下，提供了 Alive 實時預(yù)覽能力，幫助開發(fā)人員可以更高效的編寫、驗證卡片效果。
調(diào)試
另一項同卡片研發(fā)階段密不可分的能力就是卡片調(diào)試功能。作為一個更多的服務(wù)于客戶端 Native 動態(tài)化場景的技術(shù)棧，卡片的調(diào)試能力與傳統(tǒng)的 Native 開發(fā) IDE 調(diào)試方式不同，更多的借鑒了前端應(yīng)用的調(diào)試方案。
ACT 提供的卡片調(diào)試能力主要包含兩個方面：模板節(jié)點調(diào)試、JS 斷點調(diào)試。
模板節(jié)點調(diào)試在前端行業(yè)內(nèi)較為流行的 CDP（ChromeDevtoolsProtocol）協(xié)議框架下，將源自客戶端運行時按照 CDP 協(xié)議格式 dump 出的消息數(shù)據(jù)，通過 ACT 內(nèi)置的 Devtools Frontend 前端應(yīng)用提供信息展示與操作交互能力，可以實現(xiàn)卡片模板節(jié)點相關(guān)的 Element（元素節(jié)點）、Style（樣式節(jié)點）查看、編輯等調(diào)試效果。同時，遵照 CDP Overlay、Log 協(xié)議，ACT 也實現(xiàn)了劃屏高亮、實施日志等功能。
JS 斷點調(diào)試在技術(shù)選型時則主要考慮的是希望能通過一個方案，同時覆蓋不同 JS 引擎（V8、JSC、QJS 等）場景。ACT 將 JS 斷點調(diào)試實現(xiàn)策略的重心集中在對卡片運行時 JS 框架交互協(xié)議的適配上，同時借助 NodeVM 環(huán)境與 VSCode 編輯器對 JS 斷點調(diào)試的內(nèi)置支撐能力，將客戶端 Cube 卡片引擎的 JS 運行時完整橋接至 NodeVM 環(huán)境中，通過攔截卡片 JS 框架的運行時交互指令，將響應(yīng)邏輯中轉(zhuǎn)至 NodeVM，完成相應(yīng)的單步調(diào)試后，再將待處理的 JS 指令流轉(zhuǎn)回 Native 環(huán)境進行消費，從而模擬卡片 JS 邏輯鏈路中的斷點調(diào)試效果。
功能演進
ACT 目前已經(jīng)迭代至 3.x 版本，工具鏈的整個功能演進思路可以用三個問題來說明：
如何滿足卡片研發(fā)最基本、最核心的能力訴求？
如何編寫更可靠的卡片模板？
如何更便捷的編寫卡片模板？
圍繞三個問題的解決思路也貫穿了 ACT 工具鏈的整個迭代周期，對應(yīng)的，在卡片的運行期、編譯期、編碼期分別落地了適用的三類解決方案。
運行期
如何讓卡片模板能在客戶端運行時順利的“跑”起來，這是 ACT 工具鏈要滿足的最基本、最核心的訴求。上述核心功能章節(jié)提及的編譯、預(yù)覽、調(diào)試功能基本都是圍繞這一主題而落地的具體能力，這也是早期 ACT1.x 版本階段的主要迭代內(nèi)容。ACT 1.x 版本是整個工具鏈的起點，也為 Cube 卡片技術(shù)在支付寶業(yè)務(wù)場景中的快速應(yīng)用提供了有力保障。
編譯期
Cube 卡片技術(shù)源自對 Native 動態(tài)化能力的探索，Cube 引擎本身也主要由 Native 端側(cè)技術(shù)實現(xiàn)，無論是功能迭代、還是問題修復(fù)，不可避免的都會遇到一般客戶端 SDK 需要面對的版本兼容、歷史缺陷等問題。如何保障卡片在應(yīng)用時的穩(wěn)定、可靠性成為了 ACT 2.x 版本的主要課題。
ACT 2.x 版本在卡片源碼的編譯期，引入了 Lint 靜態(tài)語法檢查的能力。整體 Lint 框架借鑒了行業(yè)內(nèi)較為成熟的 ESLint 方案，并根據(jù)卡片 DSL 的特點，針對 template 布局描述、css 樣式描述、json 配置描述擴展了 Lint 框架，將僅適用于 JS 語法檢查的 ESLint，擴展為一個可以同時應(yīng)對 template、css、json、js 所有格式的更為完善的 CardLint 方案。
CardLint 通過對卡片 DSL 相關(guān)源碼的解析，提取 AST 結(jié)構(gòu)，并基于卡片特有的元數(shù)據(jù)內(nèi)容，有針對性的提供 template 節(jié)點屬性、css 樣式屬性、jsapi、配置字段等校驗規(guī)則（Rule）；同時，還會擴展出卡片三方注入元數(shù)據(jù)、元數(shù)據(jù)版本兼容性等在實際業(yè)務(wù)場景中更有價值的校驗規(guī)則。通過內(nèi)置的 200+AST 校驗規(guī)則，在卡片的編譯階段及時將異常信息反饋給開發(fā)人員，以達到“少踩坑”的目標，幫助卡片業(yè)務(wù)構(gòu)建更可靠的模板。
編碼期
在解決了卡片研發(fā)基本“溫飽”問題后，ACT 3.x 版本的迭代重心集中在了如何幫助開發(fā)人員更高效的編寫卡片源碼上。VSCode 作為當前流行的代碼編輯器，其豐富的 API 定制能力為 ACT 在增強交互手段上提供了非常大的幫助。而 VSCode 提供的 LSP 接入能力，也為 ACT 3.x 的解決方案打開了思路。
ACT 在 CardLint 的基礎(chǔ)上，整合了卡片元數(shù)據(jù)相關(guān)的 CardMeta 模塊，借助 VSCode 插件 API，提供了一個內(nèi)置的 ACT VSCode 插件，將 Lint 提示、元數(shù)據(jù)使用文檔以 VSCode 插件異常提示、浮窗文檔、代碼補全等形式重新進行了交互封裝，落地了 CardCode 輔助模塊，幫助卡片開發(fā)人員在代碼編輯器中就可以及時的參照示例、注意事項等信息更便捷的完成卡片源碼的開發(fā)工作。
NEXT
Cube 卡片工具鏈同卡片引擎技術(shù)仍處于快速迭代、推陳出新的階段。接下來除了進一步夯實已有的研發(fā)輔助能力，比如更完善的 CardLint 規(guī)則、更豐富的 CardCode 元文檔等等，ACT 的迭代重心將進一步擴展到運行時性能監(jiān)測、自動化輔助巡檢、覆蓋率統(tǒng)計等產(chǎn)品質(zhì)量評價體系建設(shè)中，繼續(xù)為支付寶卡片業(yè)務(wù)的演進保駕護航。
