深度揭祕阿里移動端高性能動態化方案Weex

2016年Qcon大會首日，阿里巴巴資深總監、淘寶移動平臺、阿里百川負責人莊卓然宣佈移動端高性能動態化方案Weex即時內測，並將於6月開源。此消息一出，羣情洶涌，在座的程序猿、攻城獅們紛紛拿起手機掃碼，以期第一時間感覺Weex的神奇之力。

在次日的主題分享會上，阿里巴巴前端開發專家趙錦江和技術專家徐凱對Weex進行了深刻的解析。如下爲演講速記整理後的成文。

阿里怎麼看待移動開發？

目前的移動開發者面臨的最大痛點就是面對極其複雜的環境，對此，莊卓然給出一個公式，移動開發的複雜度=應用數量×平臺數量×要適配的各類各樣的機型。

如何解決這個問題呢？在解決問題以前，首先要對移動開發的將來有着精準的研判。

阿里認爲，移動開發的將來一定更加平衡，也就是說必須是性能與動態兼得，如此，纔可以知足將來用戶的需求。另外，移動開發在將來也一定是開放互聯的狀態，移動互聯網未來確定是基於更加大衆化的技術體系，沒有平臺之間的隔閡，並且簡單易用。

因此，阿里結合移動開發的現狀並圍繞其願景推出了Weex解決方案。

事實上，在去年的雙11活動中，Weex就獲得了實戰的驗證，且表現不俗。時至今日，Weex已經被阿里技術團隊屢次運用，並「創造」出各類豐富的場景，總體的表現很是優異。

把移動端全部界面拆分紅各個page，而後中間設置有路由的控制邏輯，同時，將移動端各類各樣的能力經過各類API提供給開發者。這是阿里對移動開發模型的理解。

Weex經過標準化的東西，包括HTML、CSS和JS這些前端很是快速易用好學的語法做爲開發體驗，提供給開發者。另外，Weex的語法設計尊重還Web的標準。

Weex的工做原理

Weex設計之初就考慮到在三端（iOS、安卓和H5）上可以獲得展示。在最上面的DSL，阿里通常稱之爲Weex文件（.we），經過Transformer轉換成js-bundle，再部署到服務器，這樣服務端就完成了。在客戶端，第一層是JS-Framework，最後到RenderRengine。

輸入是Virtual DOM輸出是native或者H5 view，還原成內存中的樹型數據結構，再建立view，把事件綁定在view上，把view基本屬性設上去。Weex Render會分三個線程，不一樣的線程負責不一樣的事情，讓JS線程優先保障流暢性。

Weex的性能、擴展性以及可用性究竟怎樣呢？

性能方面，阿里對Weex作了屢次壓測。在加載時間、幀率、內存消耗、CPU佔用（包括靜默和峯值）等多個方面，Weex都表現得很是出色。

在談及性能之時，幀率和加載時間幾乎都會被說起，可是每每忽略了一個事實，那就是Native UI開發中一般沒有JS資源在服務器端加載。Weex會把JS內置到客戶端裏，以避免除下載的問題，從而更爲有效地提高性能。

兼容性是Weex很是重視的問題，對此，阿里是這樣來解決的。

首先是單測保證，包括JS和H5的單測，保證最基礎的UT（Unit Test）自己所帶來的含義。

其次是UI的自動化，分爲兩個部分，一是截圖對比，將最終產生的結果和意料中的結果進行圖形對比；二是Layout Results，包括Model以及其餘的佈局類的，經過基本的信息完成測試的過程。

在擴展性方面，Weex能夠寫不少頁面，並且經過路由機制幫助開發者將頁面進行串聯。

Weex已開放內測，可用性方面正在逐步完善。包括Playground、調試工具、腳手架、AppHub、編輯器等多個方面，一些工做已經完成就緒，絕大部分工做將在五、6月份完成。

最後，是Weex的三種工做模式

1. 全頁模式

目前支持單頁使用或整個App使用Weex開發（還不完善，須要開發Router和生命週期管理），這是主推的模式，能夠類比RN。

2. Native Component模式

把Weex看成一個iOS/Android組件來使用，類比ImageView。這類需求遍及手淘主鏈路，如首頁、主搜結果、交易組件化等，這類Native頁面主體已經很穩定，可是局部動態化需求旺盛致使頻繁發版，解決這類問題也是Weex的重點。

3. H5 Component模式

在H5種使用Weex，類比WVC。一些較複雜或特殊的H5頁面短時間內沒法徹底轉爲Weex全頁模式（或RN），好比互動類頁面、一些複雜頻道頁等。這個痛點的解決辦法是：在現有的H5頁面上作微調，引入Native解決長列表內存暴增、滾動不流暢、動畫/手勢體驗差等問題。

另外，WVC將會融入到Weex中，成爲Weex的H5 Components模式。

阿里百川（baichuan.taobao.com)是阿里巴巴集團「雲」+「端」的核心戰略是阿里巴巴集團無線開放平臺，基於世界級的後端服務和成熟的商業組件，經過「技術、商業及大數據」的開放，爲移動創業者提供可快速搭建App、商業化APP並提高用戶體驗的解決方案；同時提供多元化的創業服務-物理空間、孵化運營、創業投資等，爲移動創業者提供全面保障。