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

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

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

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

想先了解項(xiàng)目：GitHub搜索【GaiaX】??????

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

概述

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

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

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

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

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

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

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

什么是模板

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

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

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

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

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

總線設(shè)計(jì)

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

核心實(shí)現(xiàn)

虛擬節(jié)點(diǎn)樹

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

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

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

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

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

性能保障

StretchKit庫的優(yōu)勢：

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

AST層級(jí)極簡：

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

線程減負(fù)：

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

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

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

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

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

性能表現(xiàn)

線上效果

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

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

項(xiàng)目開源

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

開源計(jì)劃

項(xiàng)目空間

· 項(xiàng)目地址：https://github.com/alibaba/GaiaX

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

· 項(xiàng)目文檔地址：https://www.yuque.com/biezhihua/gaiax

總結(jié)與展望

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

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

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

點(diǎn)擊閱讀原文直達(dá)項(xiàng)目，記得點(diǎn)亮star噢

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