在2017年1月12日 Weex Conf 2017上，來自手機淘寶移動平臺Weex團隊的凝礪結合淘寶實際業務分享了Weex動態化方案和雙十一實踐，本文先介紹了Weex的整體架構，接著重點分享了Weex在雙十一會場上的實踐，最后談及了Weex的業務支撐，包括AliWeex等。

以下為精彩內容整理：

?

初始Weex

Weex是一套高性能跨平臺移動開發框架，最大的優勢是解決了頻繁發版和和多端研發兩大移動開發痛點。一套代碼完美適配IOS、Android、HTML5和Web等多端，極大的提升開發效率同時又保證了用戶體驗。

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

上圖為延伸的前后端協同圖，后端主要幫助我們如何從Weex源文件構建出JS Bundle，經過transformer進行轉移，JS Bundle針對的是業務代碼，JS Bundle會部署到后端服務器上；前臺同樣是三端，可以實施向后端服務器請求JS Bundle，并運行在JS Framework上，底層的RenderEngine是架構在IOS原生的JSCore，Engine上我們用了V8，它會有一個雙效通道，可以通過callJS、callNative來發出指令。

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

應用級框架下面是Module，功能的擴展。然后下面做的是整個性能的把控，右側部分為適配層，主要是網絡層圖片庫的適配、本地的開發環境等。

?

雙十一會場實踐

2016年雙十一會場首次大規模啟用Weex，總計淘寶+天貓共1754張會場頁面，Weex占比99.6%，約為1747張；在流量最重要的天貓主會場入口，5個Tab都是用Weex進行實現的，同時，在天貓和淘寶的分會場，基本做到零降級。

當然，雙十一也并不是一帆風順，在用Weex設計雙十一會場時也遇到了一些困難。大致分為四個維度：頁面交互復雜、氛圍設置動態化、秒開與性能、容災機制。

會場框架交互篇

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

在這個基礎上，我們怎樣設計呢？對于主會場這樣一個特殊模塊，采用單實例，從左上角手淘首頁進入搜索框主會場，跳轉到女裝，女裝再跳轉到男裝，男裝通過底部導航又可以切出主會場定位到必搶頁面，此處實際上共用一份實例；當從必搶進入女裝會場時，Weex渲染容器數量不超過5個，保證內存開銷可控；前向跳轉實時更新，后向返回保存歷史記錄。

會場框架氛圍篇

雙十一分為主會場氛圍和分會場氛圍。主會場分為造勢期、預熱期、正式期，造勢期需要保證運營能夠實時配置效果，需要支持動態可配置性；分會場氛圍涉及各個行業，每個行業利益點不一樣，氛圍需要根據業務來定制。其中，動態性、實效性以及加載性能都是難點。

會場框架的本質是一個可以用來抽象化描述的框架，底部有Tab，上面有導航，中間有可配置的取款，將模板和與之關聯的交互邏輯通過預置的方式預置在本地，也就是從服務端去請求JS Bundle時，會略過網絡請求，僅僅需要本地渲染，框架模板與數據分離，模板預加載，數據走投放。

主會場氛圍是核心配置驅動（導航欄設置，獨?tab樣式以及URL投放），分會場氛圍業務調用NavigatorModule Api，更加靈活。

會場框架性能篇

我們需要在會場框架中，同時加載5個200坑位的普通頁面，1個全景圖會場頁面，1個直播會場頁面。

通過壓測方案如下：

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

2. 進入Weex頁面，待頁面全部加載完成，跳轉至下一個Weex頁；

3. 重復步驟2，讓所有的測試場景頁進行壓棧；全景圖-p1p2p3p4-直播-p1p2p3p4。

得出結論：

• 控制單頁面坑位的個數（150）；

• 減少頁面元素的層級；

• Android低端機全景圖降級。

會場框架保障篇

在特定的場景下，Weex需要提供降級的能力，來保障業務。

降級預案如下：

1. Weex渲染容器降級；

2. Weex頁面服務端配置降級。

現在在業務上應用比較多的是Weex頁面根據操作系統、應用、WeexSDK版本進行降級。依賴JSFramework的降級能力，在容器渲染的過程中會經過JSFramework的解析構建，在解析時會比對版本規則，如果命中規則即執行降級，反之正常渲染。

?

業務支撐

Weex更多的服務于手淘等超大型客戶端，在未來的一年中，我們可以看到在集團內部有越來越多的業務對接Weex。

業務支撐中心集中在五個方面：降低接入成本、優化開發體驗、更完善的性能監控體系、更好的頁面搭建平臺和優化容災機制。

業務接入

AliWeex通用模塊或邏輯聚合：包括環境初始化，Weex模塊或組件的注冊，Weex 渲染主流程，降級判定規則等；同時，AliWeex實現了規范和標準化治理：適配層協議標準化定義，提供默認的接口實現。包括網絡庫、圖?庫、性能監控等。

性能監控

性能監控也很重要，需要通過數據進行不斷的調優，以及異常捕獲，具體包括以下兩點：

1. 性能數據的實時采樣:

? JS Framework加載時間

? 網絡傳輸加載時間

? 首屏渲染時間

2. 異常或渲染錯誤的捕獲:

? 資源請求失敗錯誤

? js 運行時異常

搭建平臺

搭建平臺步驟分為以下三步：

1. 從整體進行組件化分離；

2. 定義每個組件；

3. 把組件有機組合起來。

開發體驗（devTools）

Devtools方便我們做兩件事：

1. 斷點調試；

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。