應(yīng)用介紹

Weex Playground這是阿里巴巴開(kāi)發(fā)的一個(gè)專(zhuān)門(mén)為了演示W(wǎng)eex輕量級(jí)的移動(dòng)端跨平臺(tái)動(dòng)態(tài)性技術(shù)解決方案，而推出的Weex Playground演示工具。Weex Playground可以讓W(xué)eex開(kāi)發(fā)者們能夠很好的通過(guò)簡(jiǎn)單的組合代碼就可以應(yīng)用到跨平臺(tái)當(dāng)中來(lái)。Weex Playground還在努力達(dá)到更高的性能、更高的擴(kuò)展性、更低的開(kāi)發(fā)成本、更完整的生態(tài)和工具鏈，也同時(shí)嘗試接入更多的業(yè)務(wù)，體現(xiàn)出它的更大的價(jià)值。

Weex這個(gè)輕量級(jí)的移動(dòng)端跨平臺(tái)動(dòng)態(tài)性技術(shù)解決方案，也是阿里巴巴目前所使用的。Weex輕量體積小巧，語(yǔ)法簡(jiǎn)單，方便上手。Weex可擴(kuò)展，業(yè)務(wù)方可自行橫向定制 native 組件和 API。Weex高性能，快速加載，快速渲染，體驗(yàn)流暢，擁抱標(biāo)準(zhǔn)：基于 Web 標(biāo)準(zhǔn)設(shè)計(jì)語(yǔ)法。

Weex Playground這個(gè)專(zhuān)用給Weex開(kāi)發(fā)者們的實(shí)用工具，自然是為了做Weex測(cè)試的。Weex作為阿里巴巴淘寶和天貓的PC以及移動(dòng)端跨平臺(tái)劇解決方案的最經(jīng)典的案例夠讓很多電商和平臺(tái)采用這樣的架構(gòu)。

Weex與今年的四月在北京發(fā)布，阿里巴巴在Qcon大會(huì)上宣布跨平臺(tái)移動(dòng)開(kāi)發(fā)工具Weex開(kāi)放內(nèi)測(cè)邀請(qǐng)。Weex能夠完美兼顧性能與動(dòng)態(tài)性，讓移動(dòng)開(kāi)發(fā)者通過(guò)簡(jiǎn)捷的前端語(yǔ)法寫(xiě)出Native級(jí)別的性能體驗(yàn)，并支持iOS、安卓、YunOS及Web等多端部署。開(kāi)發(fā)者只需要在自己的APP中嵌入Weex的SDK，就可以通過(guò)撰寫(xiě)HTML/CSS/JavaScript來(lái)開(kāi)發(fā)Native級(jí)別的Weex界面。Weex界面的生成碼其實(shí)就是一段很小的JS，可以像發(fā)布網(wǎng)頁(yè)一樣輕松部署在服務(wù)端，然后在APP中請(qǐng)求執(zhí)行。

Weex 的誕生得益于阿里內(nèi)部早期研發(fā)的一個(gè)通過(guò) JSON 數(shù)據(jù)描述 native 渲染的項(xiàng)目WeApp，以及Vue.js這款優(yōu)秀的前 端開(kāi)源MVVM框架。阿里工程師把 WeApp 優(yōu)秀的渲染能力和 Vue.js 優(yōu)秀的前端開(kāi)發(fā)體驗(yàn)進(jìn)行了深度結(jié)合，創(chuàng)造出了 Weex這款跨平臺(tái)移動(dòng) 開(kāi)發(fā)工具。目前Weex已經(jīng)可以支持手機(jī)淘寶這樣的航母級(jí)移動(dòng)應(yīng)用，很好的解決了動(dòng)態(tài)性問(wèn)題，把移動(dòng)應(yīng)用本身的靈活性、迭代更新的周期和 成本優(yōu)化到極致。

軟件特色

擁抱標(biāo)準(zhǔn)：基于 Web 標(biāo)準(zhǔn)設(shè)計(jì)語(yǔ)法

響應(yīng)式界面： 通過(guò)簡(jiǎn)單的模板和數(shù)據(jù)綁定輕松解決數(shù)據(jù)和視圖的同步關(guān)聯(lián)問(wèn)題

多端統(tǒng)一：iOS、Android、HTML5 多端效果一致，撰寫(xiě)一次就可以輕松達(dá)到跨平臺(tái)的一致性，無(wú)需針對(duì)多套平臺(tái)單獨(dú)開(kāi)發(fā)，省時(shí)省力

復(fù)雜邏輯描述：動(dòng)態(tài)性不只體現(xiàn)在展示效果的動(dòng)態(tài)性上，更體現(xiàn)在可以實(shí)時(shí)調(diào)整復(fù)雜的數(shù)據(jù)處理方式和邏輯控制方式

組件化：組件之間通過(guò) webcomponents 的設(shè)計(jì)完美的隔離，并可以通過(guò)特定的方式進(jìn)行數(shù)據(jù)和事件的傳遞

生態(tài)&鏈路：我們?yōu)?Weex 的開(kāi)發(fā)者和使用者在不同維度上提供了各式各樣的工具和平臺(tái)，包括代碼打包工具、開(kāi)發(fā)者調(diào)試工具、部署平臺(tái)、Playground、經(jīng)典案例、入門(mén)指南和詳盡的文檔等。你不是從零開(kāi)始，你也不是一個(gè)人在戰(zhàn)斗！

如何工作

基本簡(jiǎn)介

細(xì)節(jié)1：順便說(shuō)一句，這也是我們認(rèn)為描述界面的最佳實(shí)踐。

細(xì)節(jié)2：由于 Weex 組件的開(kāi)發(fā)和 Web 組件的開(kāi)發(fā)非常接近，但是對(duì)標(biāo)準(zhǔn)的支持范圍和一些細(xì)節(jié)是有不同之處的，我們會(huì)貼心的在 transformer 里加入了一些友情提醒，幫助大家回避常犯的書(shū)寫(xiě)錯(cuò)誤。

細(xì)節(jié)3：native 端渲染的時(shí)候，我們以圖片和文字的形態(tài)為主，并大量依賴了標(biāo)準(zhǔn)的 CSS 樣式進(jìn)行細(xì)節(jié)的渲染

細(xì)節(jié)4：我們把框架層面的 JS 代碼全部提前放在了客戶端本地，并提前運(yùn)行做好準(zhǔn)備。這樣本地生產(chǎn)的 JavaScript 是非常小的，網(wǎng)絡(luò)傳輸?shù)拇鷥r(jià)也非常低，而在客戶端運(yùn)行的初始化成本也非常低。整條鏈路都和界面打開(kāi)速度息息相關(guān)

細(xì)節(jié)5：我們?cè)?JS 處理界面邏輯的過(guò)程中采取了數(shù)據(jù)監(jiān)聽(tīng)+依賴收集的策略，既沒(méi)有通過(guò)臟檢查，也沒(méi)有通過(guò)全量 diff Virtual DOM 樹(shù)的方式，因?yàn)橥ǔＴ谝苿?dòng)端，數(shù)據(jù)變更都是非常小量的，經(jīng)過(guò)我們的實(shí)踐，這套方案完全可以應(yīng)付移動(dòng)端日常的動(dòng)態(tài)性界面需求

細(xì)節(jié)6：我們對(duì)業(yè)務(wù)上通用常用的組件進(jìn)行了封裝，并且暴露規(guī)范化的類(lèi)型 (標(biāo)簽名)、特性、樣式、事件、上下級(jí)約束等維度的定義。這樣所有的業(yè)務(wù)界面都可以用這些基礎(chǔ)的組件搭建而成

細(xì)節(jié)7：我們對(duì)業(yè)務(wù)上通用常用的 API 進(jìn)行了封裝，并且暴露規(guī)范化的 JS API

細(xì)節(jié)8：實(shí)際上，除了界面本身可以動(dòng)態(tài)化之外，客戶端的 JS 引擎的代碼、還有部分 native 的實(shí)現(xiàn)，我們也準(zhǔn)備了相應(yīng)的動(dòng)態(tài)化機(jī)制，也就是說(shuō)客戶端的動(dòng)態(tài)能力本身也是具有動(dòng)態(tài)性的

細(xì)節(jié)9：我們能夠同構(gòu) HTML5 版本和 native 版本，主要?dú)w功于我們?cè)?JS Bridge、組件定義、API 定義方面的高度抽象——當(dāng)然 HTML5 的版本在性能和體驗(yàn)上確實(shí)有一定的劣勢(shì)，并不是最理想化的效果，所以核心的主戰(zhàn)場(chǎng)還是客戶端，這也和目前的移動(dòng)互聯(lián)網(wǎng)的形態(tài)相吻合