Weex：一個志在滿足萬物互聯的移動端技術解決方案

文章來源：51cto

文章作者：孫淑娟

2016年8月26-27日，由51cto.com主辦的【wot2016移動網際網路技術峰會】在北京粵财jw萬豪酒店隆重召開。自2012年以來，wot品牌大會秉承專注技術、服務技術人員的理念已經成功舉辦十一屆，不僅積累了大量的專家資源，更獲得廣大it從業者和技術愛好者的認可和好評，并成為業界重要的技術分享及人脈拓展平台。

在本次wot2016移動網際網路技術峰會上，淘寶移動平台基礎平台部負責人吳志華分享了主題為《weex:js&web能力拓展萬物互聯的探索》的演講，具體包括weex項目簡介、特點和開發體驗以及那些阿裡巴巴為什麼要做和怎麼做weex背後基于業界趨勢的思考。會後，51cto記者采訪了吳老師，他就weex項目的發展及開源現狀、産品的核心競争力、存在的技術難點和未來1-2年的發展目标等話題進行了詳細闡述。

嘉賓簡介

<a target="_blank"></a>

吳志華(阿裡花名天施)，阿裡巴巴資深無線技術專家，淘寶移動平台基礎平台部負責人，國内較早投身移動浪潮的老司機，參與業界多個超級 app 架構和研發工作，2014年底加入阿裡巴巴，目前負責阿裡移動基礎技術平台、weex 項目、百川移動雲等研發建設工作。archsummit深圳2015移動專題優秀出品人、qcon上海2016 移動專題出品人。

weex項目的發展現狀

weex項目是以web的方式來開發native app，遵循write once, run everywhere的原則。它在阿裡内部，已經從一個技術項目變成一種技術生态，由多個部門一起來完成。吳老師所在團隊負責weex核心、前端jsframework，包括工具體系和下層的v8引擎，weex核心研發機制可以比肩主流浏覽器的核心機制，這是weex跟同類競品的最大差別。因為同行沒有做世界級浏覽器的經驗，可能不能很好保證核心的穩定性等，而這塊weex和 uc 浏覽器有很好的合作。除了前端的js&amp;web架構，他們團隊的成員還在做ui庫，就是基于sui有一個weex版本next，上面有輕量級的架構，對于一些商家會提供企業級的解決方案。還有就是移動端實作互動的能力，遊戲的能力、3d的能力，vr的能力等。

基于這些方面，阿裡巴巴已經初步形成了一個技術生态，從資料上來看，當他們4月21日宣布開源内測的當天就有大量的開發者湧入，兩周内就有5000多開發者申請。到6月30日正式開源時，weex當天登上github trending榜榜首，開源第一周都在trending榜上。截止8.26已經達到5500多個star。另外，整個項目從來自外部的pr來看，資料上500的pr，來自外部占到1/5的比例。開發者與項目組成員經常在issue裡讨論技術需求，有些已經在公司的業務正式用上weex并業務并上線。這些都說明weex的開源已經初步形成一個健康的生态體系。

weex與開發者使用的同類工具相比較的核心競争力

談到weex項目與競品特點的差別時，吳老師主要談到如下五點：

第一，他們堅持在中國的網際網路環境下，讓一份代碼在三個端(android、ios和h5)的運作體驗一緻，幫助創業者節省成本。

第二，真正做到浏覽器核心級的穩定性和研發機制，最終實作可收斂。

第三，實作高性能和持續穩定性的運作保障機制。

第四是在中國場景下，weex支援靈活的嵌入方式。它可以是一個頁面，也可以建構一個app，也可以成為一個核心app的界面。weex團隊堅信在中國，先把頁面做好，再做好整個app，對開發者工程體系和新的架構影響将非常大，這也是他們的最大優勢。

最後一點是阿裡巴巴是全世界範圍内最大規模複雜業務場景下，應用移動用戶端動态化技術的公司，無論是手淘航母還是集團app正處于業務逐漸weex化的階段，今年手淘、天貓的大促會場基本也都是由weex來承載。經過這半年的實踐，不斷地嘗試和放大應用範圍、複雜度，weex項目團隊已經探到了并解決了在大規模複雜應用場景的一系列技術難題，發現了不少同類競品沒有發現和解決的問題。

阿裡淘寶的雙十一大促，面對流量瞬發、網絡擁堵和商戶的需求，特别是在移動端購物行為的養成過程中，如何更好地滿足使用者的購物體驗?

吳老師講到雙十一是一個大事件，從大的層面上來講，這兩年比較關注的是異地多活，多機房，就是一個機房怎麼切換到另一個機房。舉例來說，2015年，吳老師主持的阿裡統一網絡接入的accs項目，從技術層面上分為幾個方面：第一個是在部署層面的容災、異地多活。針對交易的單元化和非交易業務的容災，防止極端情況的出現。第二個，支援十億級裝置接入的網絡統一接入層和對突發流量設定防刷限流機制，防止流量順發和惡意請求。第三是用戶端層面的靈活請求政策和雲端一體的控制能力，在極端情況可以對用戶端請求頻率和政策進行控制，在盡量保證高優先級請求的前提下進行柔性處理。

還有移動端購物這塊，今年他們嘗試比較多，目的是通過一個新的互動形式讓大家有不一樣的互動購物體驗，使人和人之間的距離拉得更近，既可以看到主播展示商品，跟大家互動，又在内部通過很多技術實作來保證使用者購物的順暢體驗。具體涉及的技術有：

1.保證購物過程的性能和穩定性，相關名額有啟動到首頁渲染完成的時間分布占比、crash率、頁面打開的耗時、記憶體、幀率。

2.網絡傳輸1秒鐘法則和請求成功率持續優化，保障網絡傳輸的可靠必達。

3.h5和weex的秒開，提供使用者體驗和提高速度。

4.多媒體和直播等内容更新、buy+等創新探索，帶給使用者不一樣的購物體驗。

5.最後就是淘寶談得比較多的社群化和内容化，讓消費者在購物的同時購物決策更多樣化。

團隊遇到的重要技術更新和技術難點

在weex項目的開發過程中，weex項目遇到的重要技術更新包括：

1.性能疊代優化。持續一年的性能疊代，緯度細化到啟動、首屏渲染、滾動幀率、記憶體及增量、cpu峰值/均值/靜默，同時針對 android/ios的低/中/高端機不同機型多次疊代優化性能，確定即使在android 低端機上也能擁有接近native的體驗。

2.前端文法的持續疊代。文法糖和能力更豐富，更友善開發者，新增支援inline event、基于webpack的loader機制、computedproperty、repeat文法擴充等。

3.頁面級導航方案。通過weex navigator元件，支援大規模線上活動間的跳轉;通過tabbar提升頁面切換的體驗。

4.調試工具devtool：通過 chrome devtool直接調試 weex android/ios代碼，支援 element(boxmodel/nativeview)、console log、network、screencast;同時支援多裝置和多 app 同時調試，支援js代碼斷點調試。

同時，吳老師詳細分享了其中一個重要的技術解決方案：

頁面級導航方案

初始選擇：在單頁多視圖導航和多頁面導航之間，項目組選擇優先實作多頁面導航，更加符合大規模應用的場景，減少頁面間的耦合，提升整體的穩定性。

技術方案包括：

1.導航控制器

(1)navigationbar:棧式導航，支援 push/pop，可定制的navigationbar樣式。

(2)tabbar:引入embed元件，支援内嵌多級weex container instance(以下簡稱 instance)，實作可由前端自定義的tabbar元件，且instance之間可互相通訊;tabbar具有高度的可定制性，多級tab頁面對應的源檔案分離并可按需加載。

2.應用生命周期

(1)從頁面的次元考慮，基本可分為init、ready、viewappear、viewdisappear和destroy幾個關鍵時間節點。

(2)從應用角度考慮，又會融入前背景相關foreground、background以及記憶體相關memorywarning等，需要暴露以上注冊接口給前端來做必要的操作。

3. 資料通訊

(1)通過消息分發的方式，建立消息監聽模式，優點是隔離性比較好，無需關注對象的上下文，比較适合多級頁面之間進行通訊。

(2)建立 instance 之間上下文之間的關系，适合内嵌instance的場景。

weex項目很大的技術難點是大規模複雜場景下的性能和穩定性保障、持續的三端體驗一緻的保障機制，尤其是雙十一場景下weex的穩定性。

這個其實是一個複雜的系統工程問題，從v8/jscore引擎的優化，從native層性能調優再到上層的jsfrm架構的性能和易用性，配套ci和自動化測試機制。項目組希望建立一套類似webkit核心的性能穩定性保障機制，保障三端體驗一緻的機制(渲染、排版體驗一緻，提供圖形化自動對比能力)、前端架構配套的profile、lint、記憶體洩露排查工具，在weex建立起來一套自動化的平台研發保障機制。這樣才能保障weex類似webkit一樣能夠持續傳遞穩定可靠的版本，這個也是weex跟競品在理念上的大差異，可以走的更穩健一些。

未來1-2年，weex項目的發展目标

weex項目的發展目标分為兩個方面，對内和對外，對内的一個基本目标是在8-12月，阿裡巴巴移動業務全部實作weex化。希望weex能力不僅僅局限在手機端，也能夠拓展到萬物互聯多個裝置端。對外來看，weex能不能成為業界真正值得信賴，真正被開發者認可的移動端跨平台的解決方案，這個挑戰也很大。實作過程是把過去前端優秀的基礎能力、工程體系完全繼承到移動端，把整個一套方案開源開放給業界，和業界開發者一起來共建，追蹤并過渡成業界，最終将weex建設成為大家信賴的萬物互聯裝置的技術解決方案。