在2017年1月12日 Weex Conf 2017上，來自手機(jī)淘寶移動(dòng)平臺(tái)Weex團(tuán)隊(duì)的凝礪結(jié)合淘寶實(shí)際業(yè)務(wù)分享了Weex動(dòng)態(tài)化方案和雙十一實(shí)踐，本文先介紹了Weex的整體架構(gòu)，接著重點(diǎn)分享了Weex在雙十一會(huì)場(chǎng)上的實(shí)踐，最后談及了Weex的業(yè)務(wù)支撐，包括AliWeex等。

以下為精彩內(nèi)容整理：

?

初始Weex

Weex是一套高性能跨平臺(tái)移動(dòng)開發(fā)框架，最大的優(yōu)勢(shì)是解決了頻繁發(fā)版和和多端研發(fā)兩大移動(dòng)開發(fā)痛點(diǎn)。一套代碼完美適配IOS、Android、HTML5和Web等多端，極大的提升開發(fā)效率同時(shí)又保證了用戶體驗(yàn)。

Weex分為三層。最上層是DSL，早期類似于html、css、javascript這種語句的表達(dá)，讓前端熟悉表達(dá)方式構(gòu)建頁面；中間層是Virtual DOM，Virtual DOM工作在Framework的解析引擎上，自上而下驅(qū)動(dòng)底層的三端實(shí)現(xiàn)；底層分別架構(gòu)了IOS、Android、H5的RenderEngine，從整個(gè)效果來說，Weex是三端一致的解決方案，最終各個(gè)系統(tǒng)平臺(tái)上的UI基本上保持一致。

上圖為延伸的前后端協(xié)同圖，后端主要幫助我們?nèi)绾螐腤eex源文件構(gòu)建出JS Bundle，經(jīng)過transformer進(jìn)行轉(zhuǎn)移，JS Bundle針對(duì)的是業(yè)務(wù)代碼，JS Bundle會(huì)部署到后端服務(wù)器上；前臺(tái)同樣是三端，可以實(shí)施向后端服務(wù)器請(qǐng)求JS Bundle，并運(yùn)行在JS Framework上，底層的RenderEngine是架構(gòu)在IOS原生的JSCore，Engine上我們用了V8，它會(huì)有一個(gè)雙效通道，可以通過callJS、callNative來發(fā)出指令。

圖中紅色標(biāo)記的是WeexKernel，主要包含UI系統(tǒng)，UI系統(tǒng)中有很多重要的組件，比如List、Scroller、Slider、Image等15種組件，后續(xù)我們會(huì)進(jìn)一步擴(kuò)展組件，同時(shí)可以看到，在每個(gè)Components上還涵蓋生命周期、動(dòng)畫和手勢(shì)，能夠讓頁面變得更加靈動(dòng)；基于單個(gè)頁面有導(dǎo)航Navigator，它能夠幫助我們進(jìn)行頁面流轉(zhuǎn)；不同頁面之間需要進(jìn)行交互，我們提供了全局事件的方式；同時(shí)我們結(jié)合了Network功能，Data Store進(jìn)行數(shù)據(jù)存儲(chǔ)。

應(yīng)用級(jí)框架下面是Module，功能的擴(kuò)展。然后下面做的是整個(gè)性能的把控，右側(cè)部分為適配層，主要是網(wǎng)絡(luò)層圖片庫的適配、本地的開發(fā)環(huán)境等。

?

雙十一會(huì)場(chǎng)實(shí)踐

2016年雙十一會(huì)場(chǎng)首次大規(guī)模啟用Weex，總計(jì)淘寶+天貓共1754張會(huì)場(chǎng)頁面，Weex占比99.6%，約為1747張；在流量最重要的天貓主會(huì)場(chǎng)入口，5個(gè)Tab都是用Weex進(jìn)行實(shí)現(xiàn)的，同時(shí)，在天貓和淘寶的分會(huì)場(chǎng)，基本做到零降級(jí)。

當(dāng)然，雙十一也并不是一帆風(fēng)順，在用Weex設(shè)計(jì)雙十一會(huì)場(chǎng)時(shí)也遇到了一些困難。大致分為四個(gè)維度：頁面交互復(fù)雜、氛圍設(shè)置動(dòng)態(tài)化、秒開與性能、容災(zāi)機(jī)制。

會(huì)場(chǎng)框架交互篇

非Push方式框架Tab可以進(jìn)行切換，滑動(dòng)流暢，頂部有電梯幫助運(yùn)營(yíng)定位到每一個(gè)樓層，還有搜索框，每個(gè)Tab的瀏覽歷史記錄要被保存；主會(huì)場(chǎng)——分會(huì)場(chǎng)——主會(huì)場(chǎng)時(shí)，交互方式采用Push方式，需要持續(xù)打開窗口。這樣交互方式的難點(diǎn)在于內(nèi)存治理、前向加載實(shí)時(shí)性。

在這個(gè)基礎(chǔ)上，我們?cè)鯓釉O(shè)計(jì)呢？對(duì)于主會(huì)場(chǎng)這樣一個(gè)特殊模塊，采用單實(shí)例，從左上角手淘首頁進(jìn)入搜索框主會(huì)場(chǎng)，跳轉(zhuǎn)到女裝，女裝再跳轉(zhuǎn)到男裝，男裝通過底部導(dǎo)航又可以切出主會(huì)場(chǎng)定位到必?fù)岉撁?#xff0c;此處實(shí)際上共用一份實(shí)例；當(dāng)從必?fù)屵M(jìn)入女裝會(huì)場(chǎng)時(shí)，Weex渲染容器數(shù)量不超過5個(gè)，保證內(nèi)存開銷可控；前向跳轉(zhuǎn)實(shí)時(shí)更新，后向返回保存歷史記錄。

會(huì)場(chǎng)框架氛圍篇

雙十一分為主會(huì)場(chǎng)氛圍和分會(huì)場(chǎng)氛圍。主會(huì)場(chǎng)分為造勢(shì)期、預(yù)熱期、正式期，造勢(shì)期需要保證運(yùn)營(yíng)能夠?qū)崟r(shí)配置效果，需要支持動(dòng)態(tài)可配置性；分會(huì)場(chǎng)氛圍涉及各個(gè)行業(yè)，每個(gè)行業(yè)利益點(diǎn)不一樣，氛圍需要根據(jù)業(yè)務(wù)來定制。其中，動(dòng)態(tài)性、實(shí)效性以及加載性能都是難點(diǎn)。

會(huì)場(chǎng)框架的本質(zhì)是一個(gè)可以用來抽象化描述的框架，底部有Tab，上面有導(dǎo)航，中間有可配置的取款，將模板和與之關(guān)聯(lián)的交互邏輯通過預(yù)置的方式預(yù)置在本地，也就是從服務(wù)端去請(qǐng)求JS Bundle時(shí)，會(huì)略過網(wǎng)絡(luò)請(qǐng)求，僅僅需要本地渲染，框架模板與數(shù)據(jù)分離，模板預(yù)加載，數(shù)據(jù)走投放。

主會(huì)場(chǎng)氛圍是核心配置驅(qū)動(dòng)（導(dǎo)航欄設(shè)置，獨(dú)?tab樣式以及URL投放），分會(huì)場(chǎng)氛圍業(yè)務(wù)調(diào)用NavigatorModule Api，更加靈活。

會(huì)場(chǎng)框架性能篇

我們需要在會(huì)場(chǎng)框架中，同時(shí)加載5個(gè)200坑位的普通頁面，1個(gè)全景圖會(huì)場(chǎng)頁面，1個(gè)直播會(huì)場(chǎng)頁面。

通過壓測(cè)方案如下：

1. 主鏈路（首頁-店鋪-詳情-購物車）做一遍操作，讓內(nèi)存緩存占滿，記錄內(nèi)存值M0;

2. 進(jìn)入Weex頁面，待頁面全部加載完成，跳轉(zhuǎn)至下一個(gè)Weex頁；

3. 重復(fù)步驟2，讓所有的測(cè)試場(chǎng)景頁進(jìn)行壓棧；全景圖-p1p2p3p4-直播-p1p2p3p4。

得出結(jié)論：

• 控制單頁面坑位的個(gè)數(shù)（150）；

• 減少頁面元素的層級(jí)；

• Android低端機(jī)全景圖降級(jí)。

會(huì)場(chǎng)框架保障篇

在特定的場(chǎng)景下，Weex需要提供降級(jí)的能力，來保障業(yè)務(wù)。

降級(jí)預(yù)案如下：

1. Weex渲染容器降級(jí)；

2. Weex頁面服務(wù)端配置降級(jí)。

現(xiàn)在在業(yè)務(wù)上應(yīng)用比較多的是Weex頁面根據(jù)操作系統(tǒng)、應(yīng)用、WeexSDK版本進(jìn)行降級(jí)。依賴JSFramework的降級(jí)能力，在容器渲染的過程中會(huì)經(jīng)過JSFramework的解析構(gòu)建，在解析時(shí)會(huì)比對(duì)版本規(guī)則，如果命中規(guī)則即執(zhí)行降級(jí)，反之正常渲染。

?

業(yè)務(wù)支撐

Weex更多的服務(wù)于手淘等超大型客戶端，在未來的一年中，我們可以看到在集團(tuán)內(nèi)部有越來越多的業(yè)務(wù)對(duì)接Weex。

業(yè)務(wù)支撐中心集中在五個(gè)方面：降低接入成本、優(yōu)化開發(fā)體驗(yàn)、更完善的性能監(jiān)控體系、更好的頁面搭建平臺(tái)和優(yōu)化容災(zāi)機(jī)制。

業(yè)務(wù)接入

AliWeex通用模塊或邏輯聚合：包括環(huán)境初始化，Weex模塊或組件的注冊(cè)，Weex 渲染主流程，降級(jí)判定規(guī)則等；同時(shí)，AliWeex實(shí)現(xiàn)了規(guī)范和標(biāo)準(zhǔn)化治理：適配層協(xié)議標(biāo)準(zhǔn)化定義，提供默認(rèn)的接口實(shí)現(xiàn)。包括網(wǎng)絡(luò)庫、圖?庫、性能監(jiān)控等。

性能監(jiān)控

性能監(jiān)控也很重要，需要通過數(shù)據(jù)進(jìn)行不斷的調(diào)優(yōu)，以及異常捕獲，具體包括以下兩點(diǎn)：

1. 性能數(shù)據(jù)的實(shí)時(shí)采樣:

? JS Framework加載時(shí)間

? 網(wǎng)絡(luò)傳輸加載時(shí)間

? 首屏渲染時(shí)間

2. 異常或渲染錯(cuò)誤的捕獲:

? 資源請(qǐng)求失敗錯(cuò)誤

? js 運(yùn)行時(shí)異常

搭建平臺(tái)

搭建平臺(tái)步驟分為以下三步：

1. 從整體進(jìn)行組件化分離；

2. 定義每個(gè)組件；

3. 把組件有機(jī)組合起來。

開發(fā)體驗(yàn)（devTools）

Devtools方便我們做兩件事：

1. 斷點(diǎn)調(diào)試；

2. Inspector，不管Native View Element，還是Dom Element，或者Network和console log。

有了這些工具的輔佐，才有今天雙十一順利的排查問題，前端才能順利的定位頁面布局。

總結(jié)

以上是生活随笔為你收集整理的Weex动态化方案与双十一实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。