【51CTO.com原創(chuàng)稿件】今年在不同的場合，很多人都在說這樣的一句話：互聯(lián)網(wǎng)的發(fā)展進(jìn)入到了拐點，移動互聯(lián)網(wǎng)進(jìn)入到了下半場?；ヂ?lián)網(wǎng)到了新的交互形態(tài)和新的計算方式拐點的今天，不斷的面對面臨著如何產(chǎn)生更好的內(nèi)容以及交互方式的挑戰(zhàn)。

對于互聯(lián)網(wǎng)的每次一進(jìn)步和發(fā)展，都代表著通過一種更開放和更統(tǒng)一、標(biāo)準(zhǔn)的架構(gòu)去連接未來變化的可能。如果說React的出現(xiàn)，是建立一個在整個移動客戶端領(lǐng)域并行研發(fā)的新秩序，那么我認(rèn)為Weex可能會在2017年和未來的日子里面，能夠建立一個組件生態(tài)新技術(shù)。

對HTML5前端所有的應(yīng)用范圍而言，過去Web時代我們面對的能力更多是瀏覽器提供，作為程序運行的一個容器，不同的瀏覽器給予的API作為標(biāo)簽去調(diào)用。在今天這個智能的時代，硬件不斷的升級，瀏覽器作為API主要提供對象已經(jīng)無法滿足應(yīng)用場景的需求，硬件能力已經(jīng)遠(yuǎn)遠(yuǎn)超出瀏覽器的范疇。所以，未來移動領(lǐng)域隨著硬件能力的提升都意味著專業(yè)共能的組件。

在2016年12月15日期間，阿里巴巴Weex團隊的同學(xué)***時間與筆者分享了Apache接受阿里開源產(chǎn)品Weex捐贈的消息，有望成為中國移動領(lǐng)域***Apache***項目。我相信Apache的嚴(yán)謹(jǐn)、開放的技術(shù)氛圍會給Weex項目更多的研發(fā)思路，當(dāng)然也代表了Weex開源、社區(qū)化以及國際化的決心。

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

Weex打通Web->Native

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

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

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

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

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

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

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

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

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

Weex自定義組件

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

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

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

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

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

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

與Vue的結(jié)合

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

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

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

下面筆者簡單的整理一下Vue 2.0 in Weex的特性增強列表：

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

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

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

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

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

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

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

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

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

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

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

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