剛剛，優(yōu)酷的模版引擎，竟然開源了！
什么是模板
架構(gòu)設(shè)計(jì)
動(dòng)態(tài)模板引擎在優(yōu)酷內(nèi)部代號(hào)為GaiaX，按照分層設(shè)計(jì)理念共分為4層?；A(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í)視圖樹組成了完整的總線鏈路。
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)勢(shì)
選中Stretch看中的就是其有著極好的性能表現(xiàn)和較高的內(nèi)存使用率，而這些都是Rust語言特性所帶來的。Rust速度驚人且內(nèi)存利用率極高，標(biāo)準(zhǔn)Rust性能與標(biāo)準(zhǔn)C++性能不相上下，某些場(chǎng)景下效率甚至高于C++。由于沒有運(yùn)行時(shí)和垃圾回收，它能夠勝任對(duì)性能要求特別高的場(chǎng)景。
AST層級(jí)極簡(jiǎn)
線程減負(fù)
通過對(duì)虛擬節(jié)點(diǎn)樹進(jìn)行DIFF運(yùn)算，當(dāng)真實(shí)存在數(shù)據(jù)改變時(shí)才提交更新處理 減少線程池線程數(shù)，避免不必要的并發(fā)線程間的資源開銷及搶奪 對(duì)數(shù)據(jù)遍歷、JSON解析賦值、布局計(jì)算等處理進(jìn)行異步化，保證對(duì)于主線程非必要不提交
關(guān)鍵數(shù)據(jù)，技術(shù)方案橫向?qū)Ρ?/strong>
技術(shù)方案 | DSL | 最佳實(shí)踐 | 膠水層 | 渲染方案 | 研發(fā)團(tuán)隊(duì) |
Weex | Vue/Rax | 頁面動(dòng)態(tài)化 | JSBridge | Native渲染 | 阿里巴巴手淘技術(shù)團(tuán)隊(duì) |
ReactNative | React | 頁面動(dòng)態(tài)化 / App整體架構(gòu)方案 | JSBridge | Native渲染 | |
MTFlexbox | XML | 組件級(jí)接入 | 無 | Native組件半異步渲染 | 美團(tuán)終端業(yè)務(wù)研發(fā)團(tuán)隊(duì) |
GaiaX動(dòng)態(tài)模板引擎 | JSON | 組件級(jí)接入 | 無 | Native組件半異步渲染 | 優(yōu)酷應(yīng)用技術(shù)團(tuán)隊(duì) |
性能表現(xiàn)
iOS | Android | ||||
低端機(jī) | 中端機(jī) | 高端機(jī) | 低端機(jī) | 中端機(jī) | 高端機(jī) |
54.0 | 57.0 | 58.0 | 38.99 | 57.5 | 58.81 |
55.0 | 58.0 | 57.0 | 38.9 | 58.09 | 58.91 |
55.0 | 58.0 | 57.0 | 40.6 | 57.77 | 58.86 |
線上效果
優(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)目空間
項(xiàng)目地址：https://github.com/alibaba/GaiaX
開源協(xié)議：項(xiàng)目遵循Apache2.0協(xié)議
項(xiàng)目文檔地址：https://www.yuque.com/biezhihua/gaiax
直達(dá)項(xiàng)目，點(diǎn)亮star！