2017年1月12日，由阿里巴巴集團(tuán)主辦的WeexConf 2017在杭州西溪天堂藝術(shù)中心舉辦。阿里資深總監(jiān)莊卓然（南天），阿里資深技術(shù)專(zhuān)家吳志華（天施）及Weex團(tuán)隊(duì)其他成員現(xiàn)場(chǎng)與開(kāi)發(fā)者就移動(dòng)技術(shù)的發(fā)展趨勢(shì)展開(kāi)探討，并致力于推動(dòng)Weex和社區(qū)共同打造迎接未來(lái)的移動(dòng)技術(shù)開(kāi)放標(biāo)準(zhǔn)。對(duì)此大會(huì)現(xiàn)場(chǎng)Weex團(tuán)隊(duì)給開(kāi)發(fā)者帶來(lái)了三大重磅發(fā)布：和Vue團(tuán)隊(duì)的合作成果、基于React標(biāo)準(zhǔn)的DSL框架Rax正式開(kāi)源、全新組件市場(chǎng)Weex Market。

開(kāi)場(chǎng)南天介紹說(shuō)，“2016年6月份Weex正式開(kāi)源，成為了阿里巴巴開(kāi)源大軍中的一員，我們從開(kāi)源社區(qū)中不斷的去完善Weex，完善創(chuàng)新的工作，是在整個(gè)2016年發(fā)展中最讓人興奮的一點(diǎn)。這也是在Apache基金會(huì)下阿里巴巴捐獻(xiàn)的第三個(gè)項(xiàng)目，包括原有的Jstorm和Rocket MQ，這也代表我們希望Weex以一個(gè)更中立、嚴(yán)謹(jǐn)、更認(rèn)真的態(tài)度跟社區(qū)接軌”。

對(duì)于互聯(lián)網(wǎng)的每次一進(jìn)步和發(fā)展，都代表著通過(guò)一種更開(kāi)放和更統(tǒng)一、標(biāo)準(zhǔn)的架構(gòu)去連接未來(lái)變化的可能。如果說(shuō)React的出現(xiàn)，是建立一個(gè)在整個(gè)移動(dòng)客戶(hù)端領(lǐng)域并行研發(fā)的新秩序，那么全新的Weex可能會(huì)在2017年和未來(lái)的日子里面，能夠建立一個(gè)組件生態(tài)新技術(shù)。對(duì)如今HTML5前端所有的應(yīng)用范圍而言，過(guò)去Web時(shí)代我們面對(duì)的能力更多是瀏覽器提供，作為程序運(yùn)行的一個(gè)容器，不同的瀏覽器給予的API作為標(biāo)簽去調(diào)用。在今天這個(gè)智能的時(shí)代，硬件不斷的升級(jí)，瀏覽器作為API主要提供對(duì)象已經(jīng)無(wú)法滿足應(yīng)用場(chǎng)景的需求，硬件能力已經(jīng)遠(yuǎn)遠(yuǎn)超出瀏覽器的范疇。所以，未來(lái)移動(dòng)領(lǐng)域隨著硬件能力的提升都意味著專(zhuān)業(yè)共能的組件。

那么，開(kāi)源Weex到底是一個(gè)什么樣的移動(dòng)前段跨平臺(tái)項(xiàng)目呢？借助Weex最近公測(cè)的v0.9.5版本，我們來(lái)聊聊Weex對(duì)移動(dòng)開(kāi)發(fā)人員具備的核心創(chuàng)新能力。

Weex打通Web->Native

可以說(shuō)近幾年移動(dòng)端的發(fā)展趨勢(shì)就是向 Web 端靠，以 React Native 為代表的 JS-Native 已經(jīng)很大程度上模糊了 Web 和 Native 應(yīng)用的界限。Weex的出現(xiàn)真正把Web工程體系跟Native內(nèi)部打通，提供了更多的能力擴(kuò)展，將進(jìn)程推進(jìn)了一大步。

Weex為了能夠更加標(biāo)準(zhǔn)、透明的為上層業(yè)務(wù)調(diào)用，延續(xù)HTML5、JS、CSS這樣的方式來(lái)實(shí)現(xiàn)未來(lái)也是開(kāi)發(fā)者值得關(guān)注的移動(dòng)跨平臺(tái)解決方案。

通過(guò)上面一張簡(jiǎn)單的Weex頁(yè)面，包含著Weex的描述，一張圖片有兩個(gè)文本。其實(shí)在整個(gè)頁(yè)面中分成幾層，***：最上面的是DSL，包含了JS、CSS、JS，這讓圖片變得更加有互動(dòng)的能力。第二層是 Virtual DOM，能夠讓 IOS 安卓 H5保持三端一致，所以必須在架構(gòu)層面去保證，同時(shí)在特殊架構(gòu)層面把H5看成獨(dú)立的渲染端。

這也是Weex跨平臺(tái)構(gòu)建UI的一套Framework，需要具備四個(gè)特征：

1） 輕量：學(xué)習(xí)成本輕，整個(gè)SDK的量級(jí)也相對(duì)更輕量。

2） 擴(kuò)展性：支持將Native的組件接入到Weex中，同時(shí)2有一個(gè)URL的攔截工作，將模塊擴(kuò)展注冊(cè)到系統(tǒng)中，完全自定義模塊擴(kuò)展，同時(shí)提供一些Module，以及***的dom、Steam都有支持，一個(gè)JS Service，類(lèi)似JS Service***的依賴(lài)管理機(jī)制。業(yè)務(wù)方可去中心化橫向定制組件和功能模塊。

3） 性能：對(duì)于移動(dòng)端比較直觀的是渲染，所以在幀率、內(nèi)存上做到高速加載、高速渲染、體驗(yàn)流程。

4） CPU：跟耗電量和運(yùn)行效率有直接關(guān)聯(lián)，保證了幀率不降的情況下減少了內(nèi)容的消耗。

所以，首屏的渲染速度一定是決定用戶(hù)體驗(yàn)的好壞。作者記得，在雙11的主會(huì)場(chǎng)頁(yè)面中，整個(gè)頁(yè)面分為兩部分，***個(gè)分會(huì)場(chǎng)框架完全用Weex JS寫(xiě)，在加載的過(guò)程中，肉眼是無(wú)法分辨出來(lái)，據(jù)作者統(tǒng)計(jì)本地性能大概在100毫秒以?xún)?nèi)，肉眼完全無(wú)法分辨出這到底是Weex還是H5還是Native。

Weex自定義組件

在整個(gè)Weex項(xiàng)目中總共分為5層：***層為業(yè)務(wù)層，主要是接入業(yè)務(wù)，以客戶(hù)端的形式來(lái)承載。第二層是中間件層，整個(gè)發(fā)布平臺(tái)、預(yù)加載、組件以及一些API都放在上面。后面是工具組層，DSL，以及Engine。

接下來(lái)我們看看整體架構(gòu)有哪些變化：

Weex增加了一個(gè)Market層，其中包含了組件庫(kù)，也就是DysAPI，也涵蓋了一些業(yè)務(wù)相關(guān)的API和Cookie機(jī)制、Shema攔截機(jī)制、前臺(tái)商店、API支持、工具支持等整個(gè)站點(diǎn)的支持。

而研發(fā)支撐層在業(yè)務(wù)急劇擴(kuò)張的情況下，提供了發(fā)布、灰度以及線上監(jiān)控的包裝。下面作者重點(diǎn)分析一下Market層能夠解決哪些核心問(wèn)題。

Market具有能夠快速發(fā)布組件，更新、維護(hù)，可以簡(jiǎn)單理解為開(kāi)發(fā)者可以自己去做組件，然后通過(guò)Market可以對(duì)組件進(jìn)行增刪秒查，這樣比較符合大家技術(shù)上的思維。

根據(jù)下圖的工具大圖展現(xiàn)出來(lái)，可以圍繞著SDK，Devtools，還有Playground這些能力幫助開(kāi)發(fā)者快速調(diào)試試錯(cuò)，通過(guò)WeexPack創(chuàng)建完整的Weex應(yīng)用，添加開(kāi)發(fā)者自己寫(xiě)好的組件，從Market上尋找到比較有用的組件，***通過(guò)Weex CLi可以完成所有和Weex相關(guān)的操作。

與Vue的結(jié)合

說(shuō)道Vue，作者不得不重點(diǎn)介紹一下。從去年開(kāi)始發(fā)展迅猛，越來(lái)越多的重點(diǎn)項(xiàng)目已經(jīng)在使用，在這些項(xiàng)目里面包含餓了么、稀土掘金、蘇寧易購(gòu)、神馬搜索、長(zhǎng)亭科技、荔枝FM、手淘、房多多等優(yōu)秀項(xiàng)目。就作者個(gè)人理解，有桌面端、移動(dòng)端、面向用戶(hù)以及后臺(tái)等等，整個(gè)vue開(kāi)發(fā)體驗(yàn)非常愉快，每個(gè)頁(yè)面都有對(duì)應(yīng)的Vue文件，另外比較適合做組件化開(kāi)發(fā)，當(dāng)遇到比較復(fù)雜的、父子組件間需要頻繁通信的場(chǎng)景，可以用vuex搞定?？偟膩?lái)說(shuō)是一個(gè)非常優(yōu)秀的項(xiàng)目。

Vuejs是一個(gè)漸進(jìn)式的框架，用作者尤雨溪的話說(shuō)，“把高大上的東西做得平易近人”，既語(yǔ)法簡(jiǎn)單的同時(shí)又解決復(fù)雜的問(wèn)題，并且解決的非常好。

我們回過(guò)頭來(lái)說(shuō)說(shuō)Weex，選擇與Vue.js這么優(yōu)秀的項(xiàng)目合作碰撞出不少的火花。首先是流式渲染，Weex可以控制整個(gè)***次渲染之后加載的顆粒度，這個(gè)特性讓W(xué)eex達(dá)到了Vuejs的級(jí)別；第二個(gè)在Vuejs里面有一個(gè)非常經(jīng)典、且開(kāi)發(fā)者非常喜歡的雙向數(shù)據(jù)綁定，從Vuejs達(dá)到了Weex。第三則是Weex的管理內(nèi)容，避免內(nèi)存泄露，保障應(yīng)用長(zhǎng)效穩(wěn)定。在整個(gè)合作中，Weex基本整合了Vuejs的優(yōu)勢(shì)，目前開(kāi)發(fā)的所有問(wèn)題也基本解決。而在基于Vue2.0中，建立更快更好的HTML5渲染引擎，支持Transition過(guò)渡動(dòng)畫(huà)編寫(xiě)，這也是Weex和Vue合作帶來(lái)的五個(gè)特性。

下面筆者簡(jiǎn)單的整理一下Vue 2.0 in Weex的特性增強(qiáng)列表：

• 流式渲染邏輯控制，優(yōu)化首屏渲染時(shí)間
• 雙向數(shù)據(jù)綁定，方便表單空間邏輯撰寫(xiě)
• 安全管理多實(shí)例內(nèi)存，避免內(nèi)存泄露，保證應(yīng)用長(zhǎng)效穩(wěn)定
• 直接基于Vue 2.0建立更快更好的HTML5渲染引擎
• 支持<transitiion>過(guò)渡動(dòng)畫(huà)編寫(xiě)

同時(shí)，Weex在周邊工具上也和Vue2.0做了全面的適配，包括開(kāi)發(fā)人員熟悉的Loader，Cli，router等等，而對(duì)于Hacker News，Weex暫時(shí)還不能做到服務(wù)端渲染，但是除此之外所有的功能都覆蓋了Hacker News所有版本。下圖：

Weex生態(tài)演進(jìn)

對(duì)于Weex這樣的一個(gè)開(kāi)源項(xiàng)目，我們?nèi)绾稳ダ斫馑?，以及后面的的一個(gè)生態(tài)演進(jìn)過(guò)程？作者在與淘寶FED負(fù)責(zé)人圓心交流中，其實(shí)他是這么認(rèn)為的。

今天的Weex可以這么去理解，大致分為兩層。一層是引擎層，另外一層是框架層。用前端的話來(lái)解釋就是瀏覽器的渲染引擎，比如V8，或者webK9，一個(gè)是上層框架。

Weex其實(shí)不僅應(yīng)該是一個(gè)框架，應(yīng)該說(shuō)是兩者的一個(gè)組合。對(duì)于一個(gè)引擎來(lái)講，它不停的演進(jìn)，不會(huì)隨著時(shí)間的消移而消移，對(duì)于框架，可以是React，也可以是Vue，但是未來(lái)使用什么還是未知，所以整個(gè)前端框架層的發(fā)展更新非常之快，基本上兩三年一個(gè)周期。在圓心認(rèn)為，Weex應(yīng)該是一個(gè)包含引擎層以及今天的框架層整個(gè)的解決方案。

其實(shí)今天的React，把它看作一種標(biāo)準(zhǔn)，就像W3C一樣，但是API的實(shí)現(xiàn)是由各個(gè)瀏覽器廠商來(lái)決定。如果我們把React看作是一個(gè)標(biāo)準(zhǔn)，然后跟Weex的引擎做曲線對(duì)接，作者認(rèn)為，完全可以在React的語(yǔ)言上開(kāi)發(fā)所有的API。就像與Vue合作一樣，優(yōu)勢(shì)整合，完全滿足開(kāi)發(fā)者需求。

那么基于React標(biāo)準(zhǔn)額渲染引擎，我們來(lái)看看整個(gè)實(shí)現(xiàn)圖：

在這張實(shí)現(xiàn)圖中，我們看到它一個(gè)分3層，***層是上面React的原件，然后是虛擬DOM，再到驅(qū)動(dòng)層（可以理解成一個(gè)適配層），這里可以適配到不同的容器中，包含Natvie容器，HTML5容器，整個(gè)PC的Web容器，可以讓所有的東西在整個(gè)后端的整個(gè)引擎里面產(chǎn)出。下面我們來(lái)看看整合后RAX 3大特點(diǎn)：

• ***個(gè)是跨容器，通過(guò)中間的驅(qū)動(dòng)層來(lái)實(shí)現(xiàn)Native以及Web；
• 第二個(gè)是輕量，把它看作一個(gè)標(biāo)準(zhǔn)層，然后可以自我實(shí)現(xiàn)，在實(shí)現(xiàn)過(guò)程中，彌補(bǔ)本身時(shí)間冗余的過(guò)程，體積只有原來(lái)的四分之一；
• 第三個(gè)是標(biāo)準(zhǔn)，基于W3C標(biāo)準(zhǔn)，保持所有開(kāi)發(fā)者的習(xí)慣以及開(kāi)發(fā)體驗(yàn)。

所以，合作的碰撞能夠塑造Weex的生態(tài)，慢慢給予它的生命力。在這個(gè)過(guò)程中，團(tuán)隊(duì)可以去沉淀DSL的標(biāo)準(zhǔn)，更夠讓前端無(wú)數(shù)的框架、解決方案接入進(jìn)來(lái)，深入到體系中，開(kāi)放給開(kāi)源社區(qū)更多的開(kāi)發(fā)者。

【51CTO原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為51CTO.com】