Weex:一個志在滿足萬物互聯的移動端技術解決方案
原創2016年8月26-27日,由51CTO.com主辦的【WOT2016移動互聯網技術峰會】在北京粵財JW萬豪酒店隆重召開。自2012年以來,WOT品牌大會秉承專注技術、服務技術人員的理念已經成功舉辦十一屆,不僅積累了大量的專家資源,更獲得廣大IT從業者和技術愛好者的認可和好評,并成為業界重要的技術分享及人脈拓展平臺。
在本次WOT2016移動互聯網技術峰會上,淘寶移動平臺基礎平臺部負責人吳志華分享了主題為《Weex:JS&Web能力拓展萬物互聯的探索》的演講,具體包括Weex項目簡介、特點和開發體驗以及那些阿里巴巴為什么要做和怎么做Weex背后基于業界趨勢的思考。會后,51CTO記者采訪了吳老師,他就Weex項目的發展及開源現狀、產品的核心競爭力、存在的技術難點和未來1-2年的發展目標等話題進行了詳細闡述。
嘉賓簡介
吳志華(阿里花名天施),阿里巴巴資深無線技術專家,淘寶移動平臺基礎平臺部負責人,國內較早投身移動浪潮的老司機,參與業界多個超級 App 架構和研發工作,2014年底加入阿里巴巴,目前負責阿里移動基礎技術平臺、Weex 項目、百川移動云等研發建設工作。Archsummit深圳2015移動專題優秀出品人、QCon上海2016 移動專題出品人。
Weex項目的發展現狀
Weex項目是以Web的方式來開發Native APP,遵循Write once, run everywhere的原則。它在阿里內部,已經從一個技術項目變成一種技術生態,由多個部門一起來完成。吳老師所在團隊負責Weex內核、前端JSFramework,包括工具體系和下層的V8引擎,Weex內核研發機制可以比肩主流瀏覽器的內核機制,這是Weex跟同類競品的***區別。因為同行沒有做***瀏覽器的經驗,可能不能很好保證內核的穩定性等,而這塊Weex和 UC 瀏覽器有很好的合作。除了前端的JS&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建設成為大家信賴的萬物互聯設備的技術解決方案。