Situation
2018-03-15公眾號《移動開發(fā)前線》發(fā)布了一篇文章。講述了《移動開發(fā)前線》將與《前端之巔》合并。為何選擇與前端合并？《移動開發(fā)前線》創(chuàng)立者徐川這樣說：
2015 年，我在 QCon 上聽了鬼道的演講《Native 與 Web 的融合》，后來還專門弄到他的書《跨終端 Web》學(xué)習(xí)，我認(rèn)識到終端 Web 化是不可避免的趨勢，雖然在智能移動設(shè)備上，這個進(jìn)程更加曲折。但從 Hybrid、React Native、PWA 的演進(jìn)來看，這個過程沒有停止。2017 年，我寫了《當(dāng)我們在談大前端，我們談的是什么》，組織的第二屆 GMTC 大會的主題也正式定為大前端，吹響了進(jìn)軍大前端的號角。
現(xiàn)在到了 2018 年，小程序達(dá)到 10 億用戶、蘋果全面擁抱 PWA、谷歌收緊非公開 API 使用，一切跡象都表明，移動 Web 的時代全面到來了。很多移動開發(fā)者在過去兩年可能會有點(diǎn)迷茫，感覺沒有出路，大前端是我向大家建議的一個方向。我們需要去擁抱大前端，就像我們最開始擁抱移動開發(fā)一樣。
Confliction
在5年前，我還是前端開發(fā)。我們嘗試了Sencha Touch+PhoneGap和Titanium來開發(fā)跨平臺的移動端App。因?yàn)樾阅苓_(dá)不到要求，開發(fā)成本，生態(tài)環(huán)境，硬件性能等等原因。最終，我們?nèi)孓D(zhuǎn)向了移動(Native)開發(fā)。而我轉(zhuǎn)型成為了iOS開發(fā)。
現(xiàn)在的整體的技術(shù)趨勢是大前端。似乎需要移動(Native)開發(fā)者也能具備前端開發(fā)的能力，成為大前端開發(fā)者。但是令人憂心的是，有不少移動(Native)開發(fā)者之前根本沒有開發(fā)前端經(jīng)驗(yàn)。那我們應(yīng)該如何擁抱變化，擁抱大前端呢？
Answer
選擇weex開發(fā)一個實(shí)際簡單的項(xiàng)目是一個很好的開始。
接下來的內(nèi)容，我將盡量站在純移動(Native)開發(fā)者的角度，通過幾個問題和一個實(shí)際項(xiàng)目，來描述如何通過開發(fā)weex來幫助大家擁抱大前端。
為什么是weex？
Weex是阿里自研的、高性能、跨平臺、移動開發(fā)框架，最大的特點(diǎn)是解決了頻繁發(fā)版和多端研發(fā)兩大痛點(diǎn)， 一套代碼適配Android、iOS、 移動Web、PC Web等多端，極大地解放開發(fā)者的同時又保證了用戶體驗(yàn)。從2016.6月開源，之后又捐給了Apache基金會。如果你沒聽過weex，那你已經(jīng)落伍了。
但是Weex令人詬病的問題也很多：擔(dān)心有人生沒人養(yǎng)、文檔不全、文檔不夠友善、坑多、Issue沒人解決、生態(tài)環(huán)境等。
文檔不全那是你要找對地方https://weex.apache.org/并且語言選擇看英語。Issue看這里?？哟_實(shí)有一些，不過你要是學(xué)會看源碼了解原理也不成問題。生態(tài)環(huán)境確是需要慢慢培養(yǎng)，可用的輪子相對有點(diǎn)少，所以現(xiàn)在還是Apache孵化項(xiàng)目。
但最重要的是weex可以使用Vue作為DSL開發(fā)。Vue中文文檔齊全，學(xué)習(xí)曲線相對平緩，簡單容易上手。也能使用Vue開發(fā)諸如移動Web、PC Web、公眾號、小程序等。能做到learn once, write anywhere甚至能write once, run anywhere。值得一提的是，weex也可以選擇Rax來作為DSL開發(fā)。Rax和React的關(guān)系相當(dāng)于，preact和react的關(guān)系。所以你想入門react，weex也可以是一個很好的起點(diǎn)。
另外weex也需要大量的native實(shí)現(xiàn)，作為native開發(fā)者在native您有很強(qiáng)的參與感。
PS:如果你對以上專有名詞不是很了解也沒關(guān)系，那不影響你開發(fā)，暫時忘記這些。
如何開始weex？
雖然說Vue學(xué)習(xí)曲線相對平緩，簡單容易上手。
但是，但是，但是還是得要學(xué)習(xí)的。
關(guān)于語言，學(xué)習(xí)js(es6)，這個就夠了http://es6.ruanyifeng.com/。先不要著急弄清TS和JS什么關(guān)系，也不要管JS和ES6啥關(guān)系，也不要急著開始用TS開始寫。
關(guān)于Vue，官方文檔不能再好了https://cn.vuejs.org/v2/guide/。
關(guān)于Weex，看官方文檔https://weex.apache.org/跟著能跑起項(xiàng)目就可以了。
其實(shí)以上這些都不著急，可以通覽一遍，跟著實(shí)際項(xiàng)目邊學(xué)邊做，邊做邊學(xué)。這個問題下的核心答案其實(shí)是，確定一個合適的簡單的實(shí)際項(xiàng)目來開始您的星辰大海。
如果不是一個實(shí)際項(xiàng)目，很難檢驗(yàn)學(xué)習(xí)成果。
什么實(shí)際項(xiàng)目是適合的簡單的呢？
我們用weex來做一個App吧？是新App，還是舊App重做呢？這顯然太大了。不如把舊App的某些頁面，比如有動態(tài)化需求或者本來就是h5做的改成weex吧，從一兩個頁面開始。這個我認(rèn)為是合適的。
選擇的頁面本身業(yè)務(wù)不能太復(fù)雜，需要盡量簡單作為一個開始。這個我認(rèn)為是簡單的。
因?yàn)槭乾F(xiàn)有App項(xiàng)目的實(shí)際頁面，那必然是一個實(shí)際項(xiàng)目，且還有一個非常明確的目標(biāo)：體驗(yàn)和功能要和原來Native的一致。
實(shí)際項(xiàng)目
大概介紹下，希望能夠幫助您評估工作量：有時3人，有時5人，一個月上線簡單的首頁，無加班。大概平均每人每天3小時，大部分時間還是在做native其他業(yè)務(wù)。其中只有我1人有過前端開發(fā)經(jīng)驗(yàn)，iOS和android開發(fā)者都有。
簡單的首頁
礙于篇幅和能力的限制，我并不想把本文寫成一個非常詳細(xì)的教程。想講的的是思路，思考，感想，過程。畢竟別人說的再詳細(xì)，還是得要實(shí)踐出真知。
確定目標(biāo)
- 首頁體驗(yàn)和功能和native版保持一致
- 首頁動態(tài)化：能夠動態(tài)改變?nèi)肟冢浜匣顒雍透鞣N節(jié)日動態(tài)更新
- 能夠靈活的跳轉(zhuǎn)App內(nèi)的其他native頁
調(diào)研
- 對首頁功能進(jìn)行分析
- 跑起weex官方demo和文檔
- 了解簡單的原理和基本概念
- 了解flex布局
- 了解平臺的差異
- 了解weex支持Vue哪些功能
（以上官方文檔足夠）
重要的結(jié)論：
- weex官方功能大部分都能涵蓋，可能需要fork一份改源碼。比如我們能夠看到首頁適配里的滾動圖，weex對應(yīng)的官方組件里有slider
- weex在native層的三個重要概念
- components UI組件
- modules 功能模塊
- protocol/adapter 部分功能需要接口實(shí)現(xiàn)或擴(kuò)展
- 為了夸平臺
- native層面需要iOS和android各自實(shí)現(xiàn)相同功能
- 需要iOS和android的Native開發(fā)者都參與
- Vue部分并不是很困難，Native開發(fā)者也可以搞定
跑起Vue的項(xiàng)目
使用weex-toolkit，按照教程創(chuàng)建運(yùn)行。weex-toolkit是有人積極維護(hù)的，可以去提Issue。
跑起項(xiàng)目以后會有一個網(wǎng)頁，上面有二維碼。使用官方App Demo掃碼能夠執(zhí)行。
值得一提的是，支持hot load。
真實(shí)的bundle JS地址為
http://ip:port/dist/index.js
參考官方naitve代碼，在自己的native項(xiàng)目里創(chuàng)建viewcontroller和activity
你可以寫死js的url，但最好的方式是把官方掃碼demo搬過來
不考慮使用scss、less、pug等，直接寫css、html、es6
擺弄您的代碼，先把UI做成首頁的樣子。當(dāng)中可能會遇到很多問題，那些不是坑，而是您可能對前端不了解?？朔@些問題，您才能再進(jìn)一步。
值得一提的是：
需要考慮好高度的適配。比如iPhoneX的劉海，比如status bar，比如navigation bar，比如tab bar。按照我們首頁的例子，我們的weex頁面等同于整個屏幕，我們使用js代碼動態(tài)的留出了頂部和底部區(qū)域，理由是這樣最為靈活。
需要理解weex中css特殊單位：wx。參考這篇。
遇到問題多看源碼。
使用調(diào)試工具
您可能不幸會遇上weex debug裝不上，參考weex-debugger的issue應(yīng)該能幫您解決。
開始寫業(yè)務(wù)代碼
- 一定要了解promise
- 可以不使用async/await
- 學(xué)以致用Vue、css、css animation、ES6
- 網(wǎng)絡(luò)請求一個好的推薦weex-axios
- 如果有點(diǎn)追求的話，建議加上ESLint
- 在js中斷點(diǎn)你可以在代碼中寫
debugger
擺弄您的代碼，實(shí)現(xiàn)原來的功能。當(dāng)中可能會遇到很多問題，那些不是坑，而是您可能對前端不了解。克服這些問題，您才能再進(jìn)一步。
發(fā)現(xiàn)問題，解決問題
- 比如您可能會發(fā)現(xiàn)圖片加載不出，原來是需要在native實(shí)現(xiàn)一個協(xié)議/接口
- 比如有些UI樣式或組件weex不支持，我們可以擴(kuò)展components
- 比如我有分享功能該怎么實(shí)現(xiàn)？你可以使用您原來native的分享代碼，使用module封裝給js使用
- 比如埋點(diǎn)怎么埋？native包裝，或者js自己實(shí)現(xiàn)，或者js加載一個可用的庫
- 比如native暴露的異步方法和同步方法的區(qū)別
- 比如線程問題，看看源碼你就明白了
- 比如一些組件想復(fù)用，你可以學(xué)習(xí)Vue的組件開發(fā)方式，自己封裝
- 一些輪子或者代碼上的參考可以參考weex-ui。也可以去weex market試試運(yùn)氣。到后期你甚至可以像weex-ui一樣發(fā)布自己的weex UI組件或者weex plugin。
- 比如解決嵌套滾動手勢問題等。解決不了，改源碼吧。本來在native層面也是老大難問題，所以不要想weex就幫你簡單搞定了。
- 比如要改源碼。源碼是一定要改的。不是因?yàn)閣eex爛，而是很多東西是你們自己業(yè)務(wù)特有的，人家也想不到。改源碼的話，盡量擴(kuò)展吧。然后要保留官方git remote，將來還有機(jī)會升級。
這個時候您發(fā)現(xiàn)需要在雙端寫大量的代碼，或者封裝原來的代碼，實(shí)現(xiàn)接口已達(dá)到雙端一致的效果。
注意，如果你想要做到三端復(fù)用，web端也得實(shí)現(xiàn)。但這不是我們的目標(biāo)。雖然能做到，但是需要花費(fèi)大量的工作量。
想好路由跳轉(zhuǎn)怎么做，實(shí)現(xiàn)相關(guān)協(xié)議
關(guān)心的是:
- native to weex
- weex to weex
- weex to native
針對業(yè)務(wù)的特殊性，去擴(kuò)展module，注冊自己的協(xié)議等
比如我們的請求需要對請求參數(shù)都要做md5校驗(yàn)，校驗(yàn)的簽名需要放到請求頭中。怎么做才能最快實(shí)現(xiàn)了呢？原本native就有相關(guān)代碼，我們注冊了自己的網(wǎng)絡(luò)請求實(shí)現(xiàn)，在當(dāng)中調(diào)用原來的native代碼邏輯。iOS和android都一樣。
值得一提的是：
為了高性能，要盡量避免weex和native通信。module盡量不要使用同步方法暴露。
準(zhǔn)備上線了，代碼下發(fā)怎么做？
可以參考的東西不少，全在網(wǎng)上。bundle包放在哪里，目錄結(jié)構(gòu)是怎么樣的，都可以自定。
代碼下發(fā)服務(wù)是我們自己做的。對的，使用node寫的。這才叫真正的全面擁抱吧。
更高追求？
- 降級方案
- 三端復(fù)用
- 增量更新
- JS framework復(fù)用（減少bundle包大小）
總結(jié)
最后發(fā)現(xiàn)，我們寫了不少iOS，寫了不少android，寫了Vue，工作量是1+1+1=3。但是隨著時間，項(xiàng)目更迭，components和module還有Vue組件的積累。最終工作量會變成1。
在一個實(shí)際的簡單而又不簡單的項(xiàng)目中，作為native開發(fā)者您有自己的用武之地，也能有機(jī)會逼迫自己離開自己的舒適區(qū)去一個陌生領(lǐng)域?qū)W習(xí)，并且學(xué)以致用。以weex開發(fā)經(jīng)歷為基礎(chǔ)去了解更多更廣泛的前端知識，比如：webpack，TS，scss，stylus，less，babel，css3，pug，eslint，npm，karma，vue，react，angular等等。
很重要的一點(diǎn)是：擁抱大前端，不代表native開發(fā)過氣了，沒用了。希望大家都能擁抱變化，擁抱大前端。
