牛逼！優(yōu)酷跨平臺模板引擎開源了？！

大家好啊，我是3y。今天我在GitHub看到個牛逼的項目！優(yōu)酷動態(tài)模板引擎開源了。今天給大家推薦推薦

優(yōu)酷客戶端是一個多平臺【Phone、Pad、OTT、MacPC】的文娛生態(tài)綜合體，為了降低多端產(chǎn)品迭代的開發(fā)成本，并提供給用戶高性能、一致的產(chǎn)品體驗，優(yōu)酷技術(shù)團隊在19年底啟動了跨平臺動態(tài)模板引擎技術(shù)方案的攻堅。

作為內(nèi)容分發(fā)的主體，優(yōu)酷客戶端在產(chǎn)品展現(xiàn)層的主要特點是組件設(shè)計的規(guī)范化和卡片化。優(yōu)酷動態(tài)模板引擎在問題定義上將組件作為了我們的問題空間模型，不僅很好的規(guī)避了如Weex、React Native等技術(shù)方案的復雜度和工程量，讓我們可以快速實驗及工程化。其次也在根本上讓技術(shù)方案脫離JS Bridge的老路，保證了端側(cè)的高性能。

想先了解項目：GitHub搜索【GaiaX】??????

https://github.com/alibaba/GaiaX/

概述

組件化在目前的移動端來說是非常常見的組件UI形態(tài)，在優(yōu)酷客戶端的分發(fā)場景中，組件則更多的承載了影劇綜漫等內(nèi)容的信息呈現(xiàn)。

當然，組件本身可以通過組合或嵌套來形成更加復雜的展現(xiàn)模式，但從原子化角度來講，作為單一元素來看，組件有著非常強的結(jié)構(gòu)化特征，抽象后其邏輯構(gòu)成如下：

1.視覺元素：控件，圖片、文本、富文本等

2.布局：視覺元素的位置控制信息及元素繪制樣式信息，如坐標及字體、字號等

3.數(shù)據(jù)：要真實表達給用戶的有意義的信息，如影劇綜漫的名稱、演職員、封面海報等

4.事件：對用戶交互的反饋及邏輯響應，如點按鈕收藏、預約、關(guān)注等

所有的原子化組件都可以抽象為上述的元數(shù)據(jù)，那如何把這套數(shù)據(jù)結(jié)構(gòu)進行有機組合形成模板，并在多端場景按照同樣的行為表現(xiàn)進行渲染，是本篇文章要詳細進行闡述的內(nèi)容。

什么是模板

在概述中介紹到，我們可以將原子化的組件抽象為元素、布局、數(shù)據(jù)、事件四類核心信息，其中元素信息，我們通過JSON數(shù)據(jù)結(jié)構(gòu)進行組織，來描述組件中的元素構(gòu)成及層級關(guān)系；布局信息中布局關(guān)系通過符合css3規(guī)范的flexbox盒模型進行描述，樣式信息則通過標準化的css來進行描述；數(shù)據(jù)模型引入了XPath的理念，由于組件元素中最終呈現(xiàn)的數(shù)據(jù)往往來自云端下發(fā)的JSON數(shù)據(jù)，因此，這部分要解決的是如何將組件中文本的text屬性與云端JSON數(shù)據(jù)中某個層級的data實現(xiàn)動態(tài)綁定，類似于root.path.router.title; 至此，通過將上述數(shù)據(jù)結(jié)構(gòu)整體組合，打包后形成的一個物理文件，我們稱之為模板。當任一客戶端完整實現(xiàn)了對這個模板文件的解析與渲染，便可完成組件的繪制工作，從而實現(xiàn)跨端。

優(yōu)酷動態(tài)模板引擎核心實現(xiàn)方案

優(yōu)酷動態(tài)模板引擎是由優(yōu)酷技術(shù)團隊自研的，提供對上述模板文件進行跨端標準化解析、構(gòu)建、渲染的客戶端技術(shù)方案。由于優(yōu)酷內(nèi)容分發(fā)場景對用戶體驗和技術(shù)性能有極其苛刻的要求，因此，我們制定的所有技術(shù)方案的最高前提是性能第一。

架構(gòu)設(shè)計

動態(tài)模板引擎在優(yōu)酷內(nèi)部代號為GaiaX，按照分層設(shè)計理念共分為4層?；A(chǔ)依賴層堅持最小依賴原則，要重點說明的是，為了保證模板布局計算的高性能，我們引入了由RUST編寫的StretchKit高性能布局計算引擎[https://github.com/vislyhq/stretch]，其具備跨端、較小的包體積（170K）、計算性能卓越等特點；核心渲染層構(gòu)成模板引擎的渲染內(nèi)核，解決模板文件解析、虛擬節(jié)點樹構(gòu)建、布局計算、表達式構(gòu)建解析等核心邏輯；模板中心及模板服務層則更面向業(yè)務，與優(yōu)酷業(yè)務架構(gòu)進行結(jié)合實現(xiàn)對現(xiàn)有能力的復用，避免重復造輪子，并向上層業(yè)務提供標準化模板渲染及接入服務。

總線設(shè)計

對于動態(tài)模板引擎來說，輸入結(jié)構(gòu)化的模板文件，經(jīng)過文件IO、數(shù)據(jù)解析、虛擬節(jié)點樹構(gòu)建、布局計算、表達式運算、渲染樹構(gòu)建到真實視圖樹組成了完整的總線鏈路。

核心實現(xiàn)

虛擬節(jié)點樹

虛擬節(jié)點是鏈接模板文件，生成布局，綁定樣式，以及最后渲染view的核心模塊，整個鏈路是屬于線程安全，可以在在線程進行操作和布局，在生成view的時候回到主線程，可以為后續(xù)的預渲染和性能優(yōu)化提供可靠的保障。

下圖是描述index.json通過GaiaNode和視圖View的對應關(guān)系：

· Node作為基礎(chǔ)的虛擬節(jié)點，負責CSS中Style信息生成客戶端樣式屬性，以及CSS布局信息通過StretchKit生成的frame布局信息，同時獲取父node，以及和子node數(shù)組的對應關(guān)系。

· Node和View的關(guān)系是一一對應的，Node通過creatView的方式創(chuàng)建不同的view視圖，以及renderView的方式將樣式和frame一次性賦值給view，減少重復的賦值操作。

· 在此基礎(chǔ)上根據(jù)模板中的視圖type衍生出rootNode，viewNode，imageNode，以及textNode。

性能保障

StretchKit庫的優(yōu)勢：

選中Stretch看中的就是其有著極好的性能表現(xiàn)和較高的內(nèi)存使用率，而這些都是Rust語言特性所帶來的。Rust速度驚人且內(nèi)存利用率極高，標準Rust性能與標準C++性能不相上下，某些場景下效率甚至高于C++。由于沒有運行時和垃圾回收，它能夠勝任對性能要求特別高的場景。

AST層級極簡：

AST即虛擬節(jié)點樹是根據(jù)模板文件構(gòu)建的邏輯樹，其層級結(jié)構(gòu)的合理性完全受制于模板創(chuàng)建者對flexbox布局的熟悉程度，為了提高整體技術(shù)方案的性能下線，動態(tài)模板引擎在進行虛擬節(jié)點樹構(gòu)建過程中，會主動進行層級優(yōu)化和拍平，從而減少不必要的元素冗余關(guān)系，提升渲染性能。

線程減負：

1、通過對虛擬節(jié)點樹進行DIFF運算，當真實存在數(shù)據(jù)改變時才提交更新處理

2、減少線程池線程數(shù)，避免不必要的并發(fā)線程間的資源開銷及搶奪

3、對數(shù)據(jù)遍歷、JSON解析賦值、布局計算等處理進行異步化，保證對于主線程非必要不提交

關(guān)鍵數(shù)據(jù)

技術(shù)方案橫向?qū)Ρ?span style="display: none;">

性能表現(xiàn)

線上效果

優(yōu)酷動態(tài)模板引擎業(yè)務賦能

目前在優(yōu)酷15+業(yè)務團隊中，均接入使用了動態(tài)模板引擎作為跨端提效技術(shù)方案；經(jīng)過自2020年起一整年業(yè)務應用，從實際效果來看，對于多端組件開發(fā)整體研發(fā)效率提升可達30%左右，單組件研發(fā)人力投入可由0.5-1人日下降至0.25-0.5人日。

項目開源

動態(tài)模板引擎在優(yōu)酷業(yè)務場景上線后，無論是線上的用戶體驗、還是研發(fā)端的效能度量上都有比較良好的表現(xiàn)。從整個端側(cè)開源社區(qū)來看，面向組件級的跨端動態(tài)化方案還是比較少的，因此，優(yōu)酷技術(shù)團隊在2021年10月決策將方案進行開源，一方面無論是發(fā)現(xiàn)issue還是貢獻代碼，希望通過社區(qū)的力量對技術(shù)方案實現(xiàn)持續(xù)迭代演進，將其打造為功能更加強大的有社區(qū)影響力的產(chǎn)品。另外，也希望成熟穩(wěn)定的技術(shù)能力可以幫助更多的個人開發(fā)者及中小技術(shù)團隊，解決客戶端日常開發(fā)中的痛點問題，實現(xiàn)多贏。

開源計劃

項目空間

· 項目地址：https://github.com/alibaba/GaiaX

· 開源協(xié)議：項目遵循Apache2.0協(xié)議

· 項目文檔地址：https://www.yuque.com/biezhihua/gaiax

總結(jié)與展望

優(yōu)酷動態(tài)模板引擎在優(yōu)酷整體業(yè)務架構(gòu)中，已經(jīng)作為分發(fā)場基礎(chǔ)能力被各業(yè)務廣泛使用。由于模板DSL是前端技術(shù)棧范疇，對于客戶端同學來說有一定的學習成本，因此，技術(shù)團隊在引擎技術(shù)能力穩(wěn)定后的主要研發(fā)方向是為使用者提供可視化、搭建化的LowCodeIDE平臺能力。目前，該能力也已經(jīng)交付到各技術(shù)團隊中，從實際效果來看，對降低模板搭建成本非常有效。在動態(tài)模板引擎的開源項目中，IDE本身也進行了同步輸出，廣大社區(qū)開發(fā)者可以直接使用平臺進行模板搭建。

隨著技術(shù)方案的開源，團隊會根據(jù)社區(qū)的反饋將開發(fā)者關(guān)注的問題和能力盡快進行實現(xiàn)，同時，在業(yè)務場景孵化的一些新特性，也會實時向社區(qū)推出，讓更多的開發(fā)者受益。

優(yōu)酷技術(shù)團隊目前在阿里巴巴開源社區(qū)已經(jīng)開源上線了不少技術(shù)方案，后續(xù)還將推出更多的能力，也希望廣大技術(shù)愛好者關(guān)注阿里巴巴開源社區(qū)（https://github.com/alibaba），關(guān)注優(yōu)酷端側(cè)技術(shù)的發(fā)展。

點擊閱讀原文直達項目，記得點亮star噢

https://github.com/alibaba/GaiaX/