Weex Ui - Weex Conf 2018 干货分享
本文是2018年 Weex Conf 中議題《Weex + Ui》的內(nèi)容文檔整理，主要給大家介紹飛豬 Weex 技術(shù)體系從無到有的過程，包括 Weex Ui 組件庫的開發(fā)和發(fā)展，重點(diǎn)分享在 Weex Ui 層建設(shè)的一些經(jīng)驗(yàn)。文章較長，首先放上 Weex Ui 的開源地址：https://github.com/alibaba/weex-ui
Why Weex ?
Weex vs H5
我們?yōu)槭裁催x擇Weex作為我們首要的跨端開發(fā)技術(shù)呢？寫過H5的同學(xué)肯定會被它的簡單高效、發(fā)布即更新、一條URL可適配多端等這些快所吸引，但寫過 Native 的同學(xué)肯定也會被 Native 的富交互、性能體驗(yàn)、可調(diào)用原生能力、可管理內(nèi)存等特性給我們的業(yè)務(wù)帶來更好的體驗(yàn)。
快和體驗(yàn)想同時兼得
但是很多時候，我們會想將H5的快和Native的體驗(yàn)兼得，飛豬前幾年也一直在這個方向上面探索。
包括最開始的 Hybrid 開發(fā)，通過 Bridge 提供部分 Native 能?來提升 H5 體驗(yàn)，譬如我們在H5里面可以直接獲取App的定位信息、使用相機(jī)、播放視頻、導(dǎo)航跳轉(zhuǎn)等能力，業(yè)界也有Cordova、Ionic、Meteor這些成熟的方案。
還有利用離線包體系通過提前將資源?件下載，訪問時路由攔截加載本地資源，讓我們的H5頁面可以達(dá)到秒出、動態(tài)更新、弱網(wǎng)可用效果，內(nèi)部有手淘Zcache、飛豬信鴿、支付寶九州這些成熟的系統(tǒng)。
等到了16年左右，跨平臺開發(fā)技術(shù)逐漸火起來后，一種全新的開發(fā)思路吸引這我們，也即用JS來寫Native，? Web 的開發(fā)體驗(yàn)構(gòu)建?性能、可擴(kuò)展的 Native 應(yīng)?，同時真正獲取上述所說的快和體驗(yàn)。
業(yè)務(wù)對比分析
那么為什么會選擇 Weex 呢？其實(shí)和飛豬業(yè)務(wù)特點(diǎn)很有關(guān)系，同時又可以很好解決這些痛點(diǎn)。
飛豬業(yè)務(wù)迭代速度快，也需要快速上線；同時很多時候景點(diǎn)和海外弱網(wǎng)使用，同時要體驗(yàn)良好；其中最重要的一點(diǎn)是多容器接入，適配飛豬、手淘、天貓、支付寶，也即我們一次重要業(yè)務(wù)的開發(fā)需要一個iOS、一個Android同學(xué)來開發(fā)兩端，同時由一個H5同學(xué)來開發(fā)兼容手淘、支付寶、UC的 Web 版本，也即一次業(yè)務(wù)發(fā)布涉及到多端同時開發(fā)、上線。
Weex 其實(shí)很好的解決了上述的一些問題，包括在飛豬、手淘、天貓 Weex環(huán)境下完全?Native體驗(yàn)，同時Bundle 資源大小較 H5 小很多，加上富交互體驗(yàn)、長列表性能好非常適合商品列表頁面和雙十一場景，最重要的是真正讓我們從3個人的開發(fā)減少到了1個人，其他2個人可以去做更多有意義的事情。
接下來我們可以從下面這個展示來看Weex和H5業(yè)務(wù)的一個展示、數(shù)據(jù)對比，詳細(xì)可看此錄制視頻>>>
?
這是一個業(yè)務(wù)邏輯復(fù)雜的頁面，包括篩選、排序、日歷選擇、收藏、長列表、業(yè)務(wù)邏輯也很復(fù)雜的頁面，重構(gòu)成Weex以后，我們首屏可用時間降級68%、Bundle大小直接減少了73%，由于體驗(yàn)變好變快、讓我們頁面轉(zhuǎn)化率居然提升了14.5%。
也上也就是我們?yōu)槭裁催x擇Weex作為我們跨端開發(fā)的一些重要原因，接下來介紹的是飛豬的weex 技術(shù)體系。
飛豬 Weex 技術(shù)體系
架構(gòu)圖
可以從底層一直往上看，底層由我們APP的Framework / Libraries / OS Kernel等組成，我們在Weex的上下層和手淘、天貓一起設(shè)計(jì)出一套統(tǒng)一的Api設(shè)計(jì)，包括接口請求、數(shù)據(jù)埋點(diǎn)、路由跳轉(zhuǎn)、網(wǎng)絡(luò)狀態(tài)、支付功能、導(dǎo)航欄定制等這一系列的通用服務(wù)，在 Weex 上面我們封裝了Weex Ui組件庫、業(yè)務(wù)組件庫、UPX搭建營銷模塊、還有抹平多端差異的 Util 函數(shù)庫，這樣在我們上層可以長出我們眾多的業(yè)務(wù)。
由于 Weex 在我們這邊和 H5 一樣，都是當(dāng)做頁面來發(fā)布、而不是一個 View 里面寫很多子View來組織，同時也很不建議大家使用vue-router來管理，更多的使用多頁面來跳轉(zhuǎn)體驗(yàn)會更好。
說到構(gòu)建發(fā)布流程，我們統(tǒng)一通過Clam來對我們項(xiàng)目進(jìn)行初始化、構(gòu)建、debug、預(yù)發(fā)、發(fā)布等工作，同時在上線方面直接通過Awpp命令來直接發(fā)布頁面到CND，同時可以通過信鴿將離線資源推送到APP，運(yùn)營同學(xué)也可以直接通過搭建的方式將頁面發(fā)布出去。
Weex 頁面如何在飛豬、手淘、支付寶進(jìn)行多端投放 ?
那你可能會問 Weex 頁面如何在飛豬、手淘、支付寶進(jìn)行多端投放呢 ? 這里有兩種方式，第一種為通過前端 URL 參數(shù)決定渲染為 Weex 還是 H5
xxxx.html?_wx_tpl=xxxx.js：前面為降級時的 H5 地址， 后面?_wx_tpl?帶的參數(shù)代表 Weex JS 地址， 當(dāng)容器發(fā)現(xiàn) URL 帶有?_wx_tpl?參數(shù)時, 會下載后面的 JS 地址然后用 Weex 容器渲染。
還有一種為通過服務(wù)端返回內(nèi)容決定渲染為 Weex 還是 H5：
xxxx?wh_weex=true：前面可以是 JS 地址也可以是 H5 地址，后面是固定的參數(shù)?wh_weex=true，當(dāng)容器發(fā)現(xiàn) URL 帶有?wh_weex=true?時, 會請求前面的 xxxx 地址， 如果發(fā)現(xiàn)響應(yīng)的 mime type（HTTP header content-type）為?application/javascript，則使用 Weex 渲染返回的內(nèi)容， 否則使用 WebView 渲染成 H5。
飛豬 Weex 業(yè)務(wù)大盤
Weex 并不是像外界某些人傳言說沒有什么公司在使用Weex的，反而是超過你的想象，以上是我們這邊17年12月份前的一個相關(guān)weex頁面的一覽，大家可以在飛豬、手淘、支付寶里面找到這些頁面，均是一份頁面同時投放到多端的。
什么業(yè)務(wù)適合用 Weex ？
包括眾多的營銷業(yè)務(wù)、首頁、頻道、搜索列表、正向流程、簡單詳情、富交互頁面都是很適合使用Weex來開發(fā)的，同時在我們這邊也有一個對應(yīng)的原則包括?展示類項(xiàng)目優(yōu)先使用 Weex、重構(gòu)/新項(xiàng)目優(yōu)先使用 Weex、深度垂直類目嘗試使用 Weex。
Weex 不適合復(fù)雜場景 ？
大家可以看下如下這幾個場景的視頻展示>>>
?
大家可能會覺得Weex不適合復(fù)雜的場景，其實(shí)也不一定，通過很多方式是可以做到復(fù)雜場景的支持，包括雙11超長列表滾動，30多屏數(shù)據(jù)，快速滾動很順滑。
同時包括邏輯異常復(fù)雜、多組件的國際機(jī)票列表頁，Weex 同樣也可以勝任；包括圖3富交互的使用場景，粘手效果的絲滑拖動，快速滑動，動態(tài)隱藏頭部等等功能都是可以做到的。
通過在我們這邊很多業(yè)務(wù)場景的使用 Weex 踩坑 最佳實(shí)踐的積累，其實(shí)有很多東西可以沉淀下來 通過封裝的方式給后續(xù)其他業(yè)務(wù)使用，這樣讓后面的業(yè)務(wù)可以達(dá)到快速生產(chǎn)，這也是我們建議Weex Ui 組件體系一個很大的原因。
Weex Ui 的發(fā)展和開源
為什么要建立 Weex Ui 組件庫體系 ？
- 在引入 Weex 初期，通過 Weex Ui 讓未接觸 Weex 的同學(xué)對其編寫有借鑒作用
- 提煉業(yè)務(wù)中的公共組件，便于直接引用，提高大家開發(fā)效率
- 業(yè)務(wù)規(guī)范、視覺規(guī)范、最佳實(shí)踐的及時同步
- 將 Weex 業(yè)務(wù)中的疑難雜癥通過組件封裝，對外只暴露簡單邏輯
Weex Ui 一覽
經(jīng)過一年多的建設(shè)，我們一步一步將?Weex Ui?優(yōu)化，整理，最終于20170930進(jìn)行了開源，通過下圖可以看到 Weex Ui 是怎么來的
目前 Weex Ui 組件庫包括7大類31個成熟的組件，同時并不是直接開源給大家使用，而是在內(nèi)部已經(jīng)使用了1年多后穩(wěn)定后開源給大家使用，大家可以通過手淘、飛豬、任何瀏覽器掃碼進(jìn)行預(yù)覽
同時一個開源庫的文檔其實(shí)是后續(xù)發(fā)展中用戶是否能快速上手的一個很大因素，Weex UI 包括組件說明、使用規(guī)則、Demo展示、詳細(xì)使用API、升級文檔等等，可以讓你快速使用。
Weex Ui 是不是只適合電商體系呢？
近期我們隊(duì) Weex Ui的使用者做過一次問卷調(diào)查，結(jié)果讓我們很驚喜，并不是只有電商在使用，還很很多其他的體系在使用，包括工具類、企業(yè)應(yīng)用、文娛、自媒體、新聞這些其實(shí)都是有使用的。
組件化搭建你的 Weex 頁面
很多時候基礎(chǔ)建設(shè)，其實(shí)為了給業(yè)務(wù)開發(fā)來加速，譬如接下來這個飛豬專線的頁面就是通過我們的Weex Ui組件庫來搭建起來的
然而基礎(chǔ)基礎(chǔ)只能夠解決通用組件的問題，其實(shí)還包括業(yè)務(wù)組件這一塊，也即上圖中的your-item組件,也即我們下面要說的 Weex 業(yè)務(wù)組件化
除了基礎(chǔ)庫，在 Weex Ui 層還可以做什么 ？
Weex 業(yè)務(wù)組件化
業(yè)務(wù)組件庫更多是前端、后端、設(shè)計(jì)師之間的一個“約定”，通過一定規(guī)范共同讓業(yè)務(wù)組件變得可復(fù)用。也即Weex代碼中直接引入此組件，直接插入后端返回的原始數(shù)據(jù)，就可以生成設(shè)計(jì)師所設(shè)計(jì)出的商品卡片，最終可以做到支撐任意 Weex 業(yè)務(wù)模塊 投放到 任意 Weex 頁面 中 任意位置 的能力。
那么應(yīng)該怎么做呢？
可以自動化測試 Weex 嗎 ？
答案是可以的，之前通過macacajs測試框架和Weex結(jié)合來弄，通過自定義一連串的手勢、事件，最后通過用json來表明執(zhí)行的順序，可以做到，詳細(xì)可見視頻地址>>>
1、安裝app 2、自動打開native頁面 3、登錄，自動輸入 4、自動測試飛豬度假首頁，包括點(diǎn)擊、跳轉(zhuǎn)、滑動、下拉刷新等操作 5、自動測試飛豬專線、包括左滑、右滑操作 6、自動測試Weex Ui，包括打開組件、點(diǎn)擊交互邏輯 7、自動各個頁面運(yùn)行截圖，并將測試情況郵件給測試方
?
Weex 無障礙優(yōu)化
Weex 其實(shí)也是支持無障礙的，也即讓盲人在最短的時間內(nèi)通過最快的方式找到自己想要的信息。 同時當(dāng)盲人訪問我們Weex頁面時候，讓他們對 Weex 是可感知的、可操作的、可理解的、同時頁面也是魯棒的。譬如如下這個演示>>>：
?
無障礙在Weex實(shí)現(xiàn)起來是很簡單的，譬如如下實(shí)現(xiàn)：
飛豬 Weex 雙十一性能優(yōu)化
每年的雙十一也就是我們Weex的一個戰(zhàn)場，幾乎所有會場頁面均由Weex實(shí)現(xiàn)，如何讓用戶絲滑的逛我們的頁面呢？期間我們也將之前很多經(jīng)驗(yàn)包括優(yōu)化技巧放到了雙十一的會場頁面，包括一些經(jīng)驗(yàn)的整理。
回到開源
其實(shí) Weex 可以在很多很多地方使用，包括各種應(yīng)用場景，這也是我們開源Weex Ui 的一個很大原因，給大家更多 Weex 可實(shí)現(xiàn)功能的輸入，最佳實(shí)踐實(shí)現(xiàn)的參考。
同時外部開發(fā)者也急需要一套成熟組件庫來提高開發(fā)效率。
https://github.com/alibaba/weex-ui
從20170930開始，我們一直在弄Weex Ui 的開源發(fā)展，包括共建 weex-toolkit 讓其更好支持Weex Ui、欠缺組件的補(bǔ)全 + 現(xiàn)有組件的增強(qiáng)、繼續(xù)擴(kuò)展邊界 + 輕舟解決方案 UI 庫、引入更多富交互體驗(yàn) + 組件的無障礙優(yōu)化、簡易的使用方式 + 詳細(xì)的中英文檔等等工作。
其實(shí)更多的是想大家一起參與進(jìn)來，共同促進(jìn)我們 Weex 的發(fā)展。
說到共同促進(jìn)，那么你可以做什么呢？ 其實(shí)可以做很多很多事情
晚上圓桌會議關(guān)于 Weex 組件方向討論總結(jié)
1. Weex 原生組件的封裝應(yīng)該注意什么？
- 通用性，只有多個業(yè)務(wù)同時在使用，同時具備可抽離性特性的組件，譬如Video/TabBar/TitleBar/ImageUpload 這些在 Native中成熟的組件
- 穩(wěn)定性，Native 組件不像 weex 上層的組件可調(diào)節(jié)性大，所以需要注意好 Native 組件一定需要沒有Bug，防止修復(fù)和更新麻煩，同時 Native 組件一開始應(yīng)該將大部分情況做成可配置化，防止頻繁更新，導(dǎo)致需要適配很多版本
- 原子性，不建議一個組件同時做很多事情，應(yīng)該是單一的功能，然后通過搭配的方式來得到更多功能
2.weex 組件開發(fā)和實(shí)踐過程中的一些經(jīng)驗(yàn)？
- 811原則，默認(rèn)80%的功能應(yīng)該是不需要用戶配置很多參數(shù)，10%的地方用戶可以通過配置一些參數(shù)來達(dá)到目的，10%的稀有情況可以暫時不考慮，可能這里會花費(fèi)很多時間開發(fā)，所以可以等到有業(yè)務(wù)需要使用時候，再更新上去
- 統(tǒng)一收口原則，為了避免后續(xù)組件變成一個大雜燴，后續(xù)迭代視覺交互、新功能的增加需要將通用性考慮進(jìn)去，這里需要一個人統(tǒng)一來收口、開發(fā)維護(hù)此組件，可以避免很多“業(yè)務(wù)特性”來干擾組件的可用性
- 性能體驗(yàn)的優(yōu)化，Weex 組件比頁面的編寫更應(yīng)該保證他的性能體驗(yàn)
- 信任機(jī)制：很多時候別人使用你的組件一個很大原因是由于相信你的組件沒有問題，是穩(wěn)定的，同時后續(xù)會常常維護(hù)的
3.大家認(rèn)為Weex Ui組件還缺少什么？
- 缺少一些匯集起來使用的場景，目前單個組件的使用文檔已經(jīng)詳細(xì)說明，但是對于多個組件的一些使用，或者頁面層面的開發(fā)缺少相關(guān)案例，后期需要逐步補(bǔ)上weex-ui-demo
- 主題配置靈活性上需要考慮進(jìn)行，目前更多是通過參數(shù)配置的方式來更改主題顏色，其實(shí)是可以通過一個統(tǒng)一外部參數(shù)的配置來使它修改
4.未來跨端開發(fā)會是怎么樣的？
- Native的布局方式需要向H5的開發(fā)靈活性學(xué)習(xí)，逐步使用自動布局來實(shí)現(xiàn)，同時引入彈性思路開發(fā)，避免絕對計(jì)算
- 數(shù)據(jù)綁定方面會越來越便捷，譬如和MVVM思路一樣，數(shù)據(jù)變化后，視圖立馬修改，而不是手動去觸發(fā)
轉(zhuǎn)載于:https://www.cnblogs.com/lhb25/p/weex-ui-conf.html
總結(jié)
以上是生活随笔為你收集整理的Weex Ui - Weex Conf 2018 干货分享的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
