2016年8月26-27日，由51CTO.com主辦的【W(wǎng)OT2016移動互聯(lián)網(wǎng)技術(shù)峰會】在北京粵財JW萬豪酒店隆重召開。自2012年以來，WOT品牌大會秉承專注技術(shù)、服務(wù)技術(shù)人員的理念已經(jīng)成功舉辦十一屆，不僅積累了大量的專家資源，更獲得廣大IT從業(yè)者和技術(shù)愛好者的認(rèn)可和好評，并成為業(yè)界重要的技術(shù)分享及人脈拓展平臺。

在本次WOT2016移動互聯(lián)網(wǎng)技術(shù)峰會上，淘寶移動平臺基礎(chǔ)平臺部負(fù)責(zé)人吳志華分享了主題為《Weex:JS&Web能力拓展萬物互聯(lián)的探索》的演講，具體包括Weex項(xiàng)目簡介、特點(diǎn)和開發(fā)體驗(yàn)以及那些阿里巴巴為什么要做和怎么做Weex背后基于業(yè)界趨勢的思考。會后，51CTO記者采訪了吳老師，他就Weex項(xiàng)目的發(fā)展及開源現(xiàn)狀、產(chǎn)品的核心競爭力、存在的技術(shù)難點(diǎn)和未來1-2年的發(fā)展目標(biāo)等話題進(jìn)行了詳細(xì)闡述。

嘉賓簡介

[[170643]]

吳志華(阿里花名天施)，阿里巴巴資深無線技術(shù)專家，淘寶移動平臺基礎(chǔ)平臺部負(fù)責(zé)人，國內(nèi)較早投身移動浪潮的老司機(jī)，參與業(yè)界多個超級 App 架構(gòu)和研發(fā)工作，2014年底加入阿里巴巴，目前負(fù)責(zé)阿里移動基礎(chǔ)技術(shù)平臺、Weex 項(xiàng)目、百川移動云等研發(fā)建設(shè)工作。Archsummit深圳2015移動專題優(yōu)秀出品人、QCon上海2016 移動專題出品人。

Weex項(xiàng)目的發(fā)展現(xiàn)狀

Weex項(xiàng)目是以Web的方式來開發(fā)Native APP，遵循Write once, run everywhere的原則。它在阿里內(nèi)部，已經(jīng)從一個技術(shù)項(xiàng)目變成一種技術(shù)生態(tài)，由多個部門一起來完成。吳老師所在團(tuán)隊(duì)負(fù)責(zé)Weex內(nèi)核、前端JSFramework，包括工具體系和下層的V8引擎，Weex內(nèi)核研發(fā)機(jī)制可以比肩主流瀏覽器的內(nèi)核機(jī)制，這是Weex跟同類競品的***區(qū)別。因?yàn)橥袥]有做***瀏覽器的經(jīng)驗(yàn)，可能不能很好保證內(nèi)核的穩(wěn)定性等，而這塊Weex和 UC 瀏覽器有很好的合作。除了前端的JS&Web框架，他們團(tuán)隊(duì)的成員還在做UI庫，就是基于SUI有一個Weex版本NEXT，上面有輕量級的框架，對于一些商家會提供企業(yè)級的解決方案。還有就是移動端實(shí)現(xiàn)互動的能力，游戲的能力、3D的能力，VR的能力等。

基于這些方面，阿里巴巴已經(jīng)初步形成了一個技術(shù)生態(tài)，從數(shù)據(jù)上來看，當(dāng)他們4月21日宣布開源內(nèi)測的當(dāng)天就有大量的開發(fā)者涌入，兩周內(nèi)就有5000多開發(fā)者申請。到6月30日正式開源時，Weex當(dāng)天登上github trending榜榜首，開源***周都在trending榜上。截止8.26已經(jīng)達(dá)到5500多個STAR。另外，整個項(xiàng)目從來自外部的PR來看，數(shù)據(jù)上500的PR，來自外部占到1/5的比例。開發(fā)者與項(xiàng)目組成員經(jīng)常在issue里討論技術(shù)需求，有些已經(jīng)在公司的業(yè)務(wù)正式用上Weex并業(yè)務(wù)并上線。這些都說明Weex的開源已經(jīng)初步形成一個健康的生態(tài)體系。

Weex與開發(fā)者使用的同類工具相比較的核心競爭力

談到Weex項(xiàng)目與競品特點(diǎn)的區(qū)別時，吳老師主要談到如下五點(diǎn)：

***，他們堅(jiān)持在中國的互聯(lián)網(wǎng)環(huán)境下，讓一份代碼在三個端(Android、iOS和H5)的運(yùn)行體驗(yàn)一致，幫助創(chuàng)業(yè)者節(jié)省成本。

第二，真正做到瀏覽器內(nèi)核級的穩(wěn)定性和研發(fā)機(jī)制，最終實(shí)現(xiàn)可收斂。

第三，實(shí)現(xiàn)高性能和持續(xù)穩(wěn)定性的運(yùn)行保障機(jī)制。

第四是在中國場景下，Weex支持靈活的嵌入方式。它可以是一個頁面，也可以構(gòu)建一個APP，也可以成為一個內(nèi)核APP的界面。Weex團(tuán)隊(duì)堅(jiān)信在中國，先把頁面做好，再做好整個APP，對開發(fā)者工程體系和新的框架影響將非常大，這也是他們的***優(yōu)勢。

***一點(diǎn)是阿里巴巴是全世界范圍內(nèi)***規(guī)模復(fù)雜業(yè)務(wù)場景下，應(yīng)用移動客戶端動態(tài)化技術(shù)的公司，無論是手淘航母還是集團(tuán)APP正處于業(yè)務(wù)逐步Weex化的階段，今年手淘、天貓的大促會場基本也都是由Weex來承載。經(jīng)過這半年的實(shí)踐，不斷地嘗試和放大應(yīng)用范圍、復(fù)雜度，Weex項(xiàng)目團(tuán)隊(duì)已經(jīng)探到了并解決了在大規(guī)模復(fù)雜應(yīng)用場景的一系列技術(shù)難題，發(fā)現(xiàn)了不少同類競品沒有發(fā)現(xiàn)和解決的問題。

阿里淘寶的雙十一大促，面對流量瞬發(fā)、網(wǎng)絡(luò)擁堵和商戶的需求，特別是在移動端購物行為的養(yǎng)成過程中，如何更好地滿足用戶的購物體驗(yàn)?

吳老師講到雙十一是一個大事件，從大的層面上來講，這兩年比較關(guān)注的是異地多活，多機(jī)房，就是一個機(jī)房怎么切換到另一個機(jī)房。舉例來說，2015年，吳老師主持的阿里統(tǒng)一網(wǎng)絡(luò)接入的ACCS項(xiàng)目，從技術(shù)層面上分為幾個方面：***個是在部署層面的容災(zāi)、異地多活。針對交易的單元化和非交易業(yè)務(wù)的容災(zāi)，防止極端情況的出現(xiàn)。第二個，支持十億級設(shè)備接入的網(wǎng)絡(luò)統(tǒng)一接入層和對突發(fā)流量設(shè)置防刷限流機(jī)制，防止流量順發(fā)和惡意請求。第三是客戶端層面的靈活請求策略和云端一體的控制能力，在極端情況可以對客戶端請求頻率和策略進(jìn)行控制，在盡量保證高優(yōu)先級請求的前提下進(jìn)行柔性處理。

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

1.保證購物過程的性能和穩(wěn)定性，相關(guān)指標(biāo)有啟動到首頁渲染完成的時間分布占比、Crash率、頁面打開的耗時、內(nèi)存、幀率。

2.網(wǎng)絡(luò)傳輸1秒鐘法則和請求成功率持續(xù)優(yōu)化，保障網(wǎng)絡(luò)傳輸?shù)目煽勘剡_(dá)。

3.H5和Weex的秒開，提供用戶體驗(yàn)和提高速度。

4.多媒體和直播等內(nèi)容升級、buy+等創(chuàng)新探索，帶給用戶不一樣的購物體驗(yàn)。

5.***就是淘寶談得比較多的社區(qū)化和內(nèi)容化，讓消費(fèi)者在購物的同時購物決策更多樣化。

團(tuán)隊(duì)遇到的重要技術(shù)更新和技術(shù)難點(diǎn)

在Weex項(xiàng)目的開發(fā)過程中，Weex項(xiàng)目遇到的重要技術(shù)更新包括：

1.性能迭代優(yōu)化。持續(xù)一年的性能迭代，緯度細(xì)化到啟動、首屏渲染、滾動幀率、內(nèi)存及增量、CPU峰值/均值/靜默，同時針對 Android/iOS的低/中/高端機(jī)不同機(jī)型多次迭代優(yōu)化性能，確保即使在Android 低端機(jī)上也能擁有接近native的體驗(yàn)。

2.前端語法的持續(xù)迭代。語法糖和能力更豐富，更方便開發(fā)者，新增支持inline event、基于WebPack的loader機(jī)制、computedproperty、repeat語法擴(kuò)展等。

3.頁面級導(dǎo)航方案。通過Weex Navigator組件，支持大規(guī)模線上活動間的跳轉(zhuǎn);通過TabBar提升頁面切換的體驗(yàn)。

4.調(diào)試工具Devtool：通過 Chrome Devtool直接調(diào)試 Weex Android/iOS代碼，支持 Element(BoxModel/NativeView)、Console log、Network、ScreenCast;同時支持多設(shè)備和多 APP 同時調(diào)試，支持JS代碼斷點(diǎn)調(diào)試。

同時，吳老師詳細(xì)分享了其中一個重要的技術(shù)解決方案：頁面級導(dǎo)航方案

初始選擇：在單頁多視圖導(dǎo)航和多頁面導(dǎo)航之間，項(xiàng)目組選擇優(yōu)先實(shí)現(xiàn)多頁面導(dǎo)航，更加符合大規(guī)模應(yīng)用的場景，減少頁面間的耦合，提升整體的穩(wěn)定性。

技術(shù)方案包括：

1.導(dǎo)航控制器

(1)NavigationBar:棧式導(dǎo)航，支持 push/pop，可定制的NavigationBar樣式。

(2)TabBar:引入embed組件，支持內(nèi)嵌多級Weex container instance(以下簡稱 instance)，實(shí)現(xiàn)可由前端自定義的TabBar組件，且instance之間可相互通訊;TabBar具有高度的可定制性，多級tab頁面對應(yīng)的源文件分離并可按需加載。

2.應(yīng)用生命周期

(1)從頁面的維度考慮，基本可分為init、ready、viewappear、viewdisappear和destroy幾個關(guān)鍵時間節(jié)點(diǎn)。

(2)從應(yīng)用角度考慮，又會融入前后臺相關(guān)foreground、background以及內(nèi)存相關(guān)memoryWarning等，需要暴露以上注冊接口給前端來做必要的操作。

3. 數(shù)據(jù)通訊

(1)通過消息分發(fā)的方式，建立消息監(jiān)聽模式，優(yōu)點(diǎn)是隔離性比較好，無需關(guān)注對象的上下文，比較適合多級頁面之間進(jìn)行通訊。

(2)建立 instance 之間上下文之間的關(guān)系，適合內(nèi)嵌instance的場景。

Weex項(xiàng)目很大的技術(shù)難點(diǎn)是大規(guī)模復(fù)雜場景下的性能和穩(wěn)定性保障、持續(xù)的三端體驗(yàn)一致的保障機(jī)制，尤其是雙十一場景下Weex的穩(wěn)定性。

這個其實(shí)是一個復(fù)雜的系統(tǒng)工程問題，從V8/JSCore引擎的優(yōu)化，從native層性能調(diào)優(yōu)再到上層的JSFrm框架的性能和易用性，配套CI和自動化測試機(jī)制。項(xiàng)目組希望建立一套類似Webkit內(nèi)核的性能穩(wěn)定性保障機(jī)制，保障三端體驗(yàn)一致的機(jī)制(渲染、排版體驗(yàn)一致，提供圖形化自動對比能力)、前端框架配套的Profile、Lint、內(nèi)存泄露排查工具，在Weex建立起來一套自動化的平臺研發(fā)保障機(jī)制。這樣才能保障Weex類似WebKit一樣能夠持續(xù)交付穩(wěn)定可靠的版本，這個也是Weex跟競品在理念上的大差異，可以走的更穩(wěn)健一些。

未來1-2年，Weex項(xiàng)目的發(fā)展目標(biāo)

Weex項(xiàng)目的發(fā)展目標(biāo)分為兩個方面，對內(nèi)和對外，對內(nèi)的一個基本目標(biāo)是在8-12月，阿里巴巴移動業(yè)務(wù)全部實(shí)現(xiàn)Weex化。希望Weex能力不僅僅局限在手機(jī)端，也能夠拓展到萬物互聯(lián)多個設(shè)備端。對外來看，Weex能不能成為業(yè)界真正值得信賴，真正被開發(fā)者認(rèn)可的移動端跨平臺的解決方案，這個挑戰(zhàn)也很大。實(shí)現(xiàn)過程是把過去前端優(yōu)秀的基礎(chǔ)能力、工程體系完全繼承到移動端，把整個一套方案開源開放給業(yè)界，和業(yè)界開發(fā)者一起來共建，追蹤并過渡成業(yè)界，最終將Weex建設(shè)成為大家信賴的萬物互聯(lián)設(shè)備的技術(shù)解決方案。