導讀
在哈啰的APP中，活動、大促、周年慶等都需要我們能夠擁有更快捷的響應速度、更高效的人力來縮短試錯周期，而且流量區域營運位為了能夠做到千人千面，又迫切的需要有一種可以根據不同的人群達到展示不同效果的目的。UI 可定制化、快速疊代、高性能體驗一直以來都是移動端開發領域的核心訴求，随着哈啰業務的不斷拓展，越來越多的業務線對上述三點提出了更高的要求，但由于移動端 App 發版的天然限制，無法很好滿足業務方的訴求。
基于以上一些業務痛點，我們結合 Native 黃金流量業務區域對于性能極高的要求，輸出了一套 Native 局部動态化方案 Wukong（悟空），截止到目前，已在App内部多個業務子產品中得到驗證。
Wukong 是什麼
悟空動态卡片 (Wukong) 最初是為哈啰投放系統定制的 Native 高性能渲染引擎，是一套完整的跨端原生局部卡片動态展示的技術解決方案，以業務賦能為中心，緻力于解決UI定制化、邏輯動态化、縮短試錯周期、提升人效等相關問題，使得業務可以基于 Wukong 做到一次開發，随時上線，多端複用的效果。
技術優勢
Wukong 在标準UI元件、JS 動态能力、樣式支援等方面提供多種功能加持，同時支援自定義元件、自定義 JS Bridge的能力以滿足更複雜、更加定制化的業務場景。
- 支援 UI & 邏輯 動态釋出，提高研發&營運效率
- 原生頁面内嵌動态化視圖的接入方式，接入成本低
- Android / iOS 雙端側表現一緻，支援實時預覽，所見即所得
- UI渲染純 Native 實作，體積小、性能好、記憶體少
系統介紹
Wukong 遵循了 CSS3 中提出的 Flexbox 布局規範，旨在磨平多平台在布局系統上的差異，為了達到一套模闆雙端一緻的效果，對 Android 和 iOS 端元件樣式的表現也進行了盡可能的統一，在開發方式上我們選擇 XML 作為視圖 DSL 的語言格式，同時定義了一整套的 xsd 規範來限制 XML 的編寫，輔助開發編寫過程中提前規避一些文法問題的同時也能更加容易進行入門使用。
如上圖所示，在開發的過程中主要處理的是業務層相關的邏輯，模版的下載下傳、緩存、校驗，在 Wukong 内部有一套預設的實作，但并不是必須的，接入方完全可以根據自己的業務場景來進行覆寫重寫，對于模版産物的管理是一個相對隐私的操作，為了達到最大化的靈活度，需要由業務接入方來擴充。
其中 SDK 内部我們設計了協定層，在初始化的時候來對接各種可插拔的能力，比如：自定義元件、自定義Bridge，同時将 SDK 内部的一些基礎能力如：網絡、埋點、路由、位置資訊、裝置資訊等進行接口抽象，使得業務接入時可以友善的代替為自定義的通用基礎能力。
實作原理
如果用比較通俗易懂的方式來介紹 Wukong 的大緻實作原理，可以簡單的了解為按照一定的限制規範編寫的樣式描述映射為 Native 的布局，進而達到樣式邏輯動态化的效果。
通過 SDK 加載的流程如上圖所示：
首先需要輸入一個産物的連結位址和業務資料源，SDK 内部會通過模版管理子產品來下載下傳儲存在服務端的模版，同時會對相關資料進行緩存（包括磁盤緩存和記憶體緩存），在拿到産物之後，通過解析器的處理會被映射為 VM（ViewModel） 對象，VM對象中包含了所有原始資訊以及需要解析的 JS 表達式，為了将 VM 和 具體的View進行解耦，在 VM 和 View 之間還增加了一層 VNode 虛拟節點層，此時在生成 VNode tree 的時候，JS引擎會參與工作執行并擷取 JS 表達式的結果，最終再将生成的 VNode tree 通過 Render 渲染為 Native 的 View tree。以上流程為初次加載的過程，當二次加載的時候，會優先使用緩存模版（包括磁盤緩存和記憶體緩存），同時，VNode tree 中通過 diff 計算差異來進行局部的更新，以達到性能的最大化。
其中有兩個較為重要的環節：布局系統和JS引擎。對于布局系統來說，從能力、性能等多方面的對比考量，同時考慮到兩端布局一緻性以及降低開發者的學習成本，決定選擇使用實作了 FlexBox 規範的三方庫 Yoga作為我們的布局引擎，Yoga 作為一個通用的布局系統，來代替 iOS 上的 AutoLayout 和 Android 的 FlexBoxLayout，以此來保證既能擁有前端親和性，也能達到多端表現一緻性。由于 iOS 本身已經支援 JavaScriptCore，而 Android 則需要同時兼顧性能以及對于包體積的影響，是以采用 QuickJS 作為 SDK 底層的 JS 引擎。
研發工具
為了友善開發者快速的入門、開發、調試，同時保證模闆的正确性和一緻性， Wukong 為開發者提供了多個開發提效配套工具。
在開發過程中采用的是工程化的管理方式，每一個工程都會包含一個 build 目錄，用來存放生成的産物，通過腳本工具，可以初始化工程、解析工程、開啟實時預覽 Server，在一個工程中同時可以包含多個子工程，以便于在不同的動态卡片模版中快速實時的切換。
開發工具采用 VSCode，通過 xsd 和 lib.wukong.ts 的限制，更加便捷的做到代碼補全和聯想功能，配合實時預覽工具，大大的提升整體的研發效率和研發體驗。實時預覽可以做到邊開發邊看效果的能力，在達到所見即所得的同時，其中的相關日志調試資訊，也會同步的輸出到控制台中，以便于研發人員跟蹤排查問題。
研發流程
基于以上工具，我們将整個的研發流程盡可能的做到簡單化、标準化：
1. 首先通過腳本來建立标準的項目工程或子工程，以防止代碼管理上的混亂。
2. 在 VSCode 中編寫模版代碼，通過限制工具來達到代碼解析前的合規化校驗。
3. 使用腳本工具在工程中啟動 Server，同時控制台中會輸出目前連結到 Server的裝置 log 日志資訊。
4. 用戶端通過預覽工具連接配接 Server 達到實時預覽的能力。
5. 修改相關代碼後，再次通過腳本重新解析指定工程或子工程，預覽工具會同步更新為最新的樣式。
6. 最後一步就是将 build 目錄中生成的産物配置到自己的管理背景，進而達到線上釋出的能力。
釋出流程
在正常的 APP 疊代節奏中，需要 Android / iOS 各一名研發人員參與其中，同時還需要經過聯調、測試、驗收、接口釋出、APP釋出、資料回收等一系列的流程，周期過長，同時如果釋出之後線上發現問題，還有可能會延遲到下個版本的釋出周期，響應速度慢，無法很好的承接營運業務訴求。
通過局部動态化能力，首先對于用戶端來說相比之下僅需要一名研發參與需求模版的開發，減少了研發人力，其次也無需等待APP的釋出周期，驗收完成之後，可以線上實時更新，在保證原生使用者體驗的基礎上不依賴發版、高效支撐業務需求，大大縮短業務研發和資料回收的時間周期，新功能也可在任意線上版本中生效，産品驗證和推廣更高效。
總結和展望
Wukong 從建立之初到現在曆經一年多的開發維護時間，中間遇到過各種不同的需求和技術問題，在團隊夥伴的集思廣益之下才逐漸成型，再次表示由衷的感謝。目前 SDK 在哈啰APP首頁、錢包、個人中心、搜尋等業務中廣泛使用，業務研發整體提效 50%，尤其對于投放系統，在高流量營運區域位活動研發提效達 80%，随着 Wukong 使用場景的逐漸增多，在技術上我們會不斷豐富能力，持續優化整體性能，進一步降低學習和使用成本，提供更完善的配套設施，同時也希望各領域的專家，能夠提出寶貴的建議共建共創，協助我們通力打造一個更加穩定、易用且完整的局部動态化能力技術生态。
相關連結：
- GitHub: https://github.com/hellof2e/Wukong
- Wukong DOC：
- https://hellobike.yuque.com/org-wiki-nlsyth/hec0gc/mput57lpnzvhnh7k
- yoga layout：https://yogalayout.com/
- quickjs：https://bellard.org/quickjs/
作者:哈啰技術
來源:微信公衆号:哈啰技術
出處:https://mp.weixin.qq.com/s/FDSB-nen8A-l9ECdOggm-Q