WEEX逊拍、React-Native開發(fā)App心得

起因

最近公司準(zhǔn)備使用weex或者react-native進(jìn)行跨平臺開發(fā)，并不是要做新的app而是準(zhǔn)備用這種方式代替原來webview+h5內(nèi)嵌這種方式际邻，這種hybrid的方式芯丧，存在于上古年代了，性能堪憂世曾，還要適配安卓端復(fù)雜設(shè)備種類缨恒，各主流電商的webview，雖然在前一段時間轮听，安卓統(tǒng)一使用了傳說微信骗露、qq都在使用x5-webview，但是效果并不是很明顯血巍，騰訊瀏覽服務(wù)是要做到統(tǒng)一安卓端的webview萧锉，但是騰訊的x5的條件是，該安卓手機(jī)已經(jīng)安裝了騰訊x5瀏覽器述寡，換句話說就是柿隙，你的安卓手機(jī)上面，至少要有微信鲫凶、qq禀崖、qq瀏覽器等之一的擁有騰訊瀏覽內(nèi)核的產(chǎn)品，雖說覆蓋面很廣螟炫。但是波附，考慮到我們公司的用戶大部分年齡比較大，可能相比較而言覆蓋范圍就不那么廣昼钻，收到投訴的也會比較多掸屡，畢竟我們跟他們的溝通成本也比較高；
直接集成騰訊x5內(nèi)核的話也存在諸多問題然评；所以還是需要一條跨平臺之路折晦；

分析

縱觀現(xiàn)在主流開源的跨平臺之路，有兩條：一條是由facebook開源的基于reactJs的react-native沾瓦；另外一條是由alibaba開源的可以說是基于VueJs的Vue-native，不不不，口誤贯莺，是WEEX风喇；那么我們分析一下應(yīng)該如何選型呢，我剛開始也是看了無數(shù)的評論缕探，怎么說的都有魂莫；一般分為兩類，一類是切身體驗過從搭建到開過程的這類評論會比較有營養(yǎng)爹耗，不過會看不太懂耙考；另外一類，就是無腦噴阿里開源潭兽，我感覺這類評論代入感也比較強(qiáng)倦始，各種舉例、論證山卦，有理有據(jù)而且通承兀恢復(fù)數(shù)量被點(diǎn)贊數(shù)量也比較高，說什么,“kpi產(chǎn)物”账蓉、“阿里自己都不用啊”枚碗、“文檔仨月都不更新一次啊”、“剛出來趕緊找的靠譜的接盤”铸本、“手淘肮雨、天貓都是用的rn啊”；我不敢想箱玷，可是仔細(xì)一想怨规，還真是這么回事兒；
總之各大論壇貼吧逛完一遍汪茧，你絕對不想用weex了椅亚；我這么一看不行啊，畢竟要看看兩種方法那種更適合舱污，所以呀舔，我跟大家想的一樣，首先選了WEEX扩灯；

WEEX的上手體驗

真的是不用不知道媚赖，一用嚇一跳，我是在windows環(huán)境下進(jìn)行開發(fā)的珠插，我可以很負(fù)責(zé)任的說惧磺，按照weex官方提供的文檔在windows下直接搭建開發(fā)環(huán)境很難一次點(diǎn)亮；很嘲諷啊捻撑，文檔也是一如既往的爛啊磨隘，好多應(yīng)該比較細(xì)節(jié)的東西缤底，文檔上面往往是認(rèn)為你是大神，或者說你個屌絲用個windows本還想搞weex番捂？經(jīng)過一番又一番的折磨个唧，我終于看不下去了，這個文檔光看就很暈设预，很想吐徙歼，還是github上找?guī)讉€案例直接試一下，案例還是很好的鳖枕，多數(shù)的都是使用weex構(gòu)建一個新的跨平臺應(yīng)用魄梯，啟用大面積使用了vue的語法，開發(fā)起來確實(shí)也是很簡單宾符；看完demo之后酿秸，回過頭來再看weex文檔，好像覺得文檔看著還不錯吸奴，雖然簡單了點(diǎn)兒允扇，好像該說的也都說了，沒毛苍虬隆考润；于是可以自己動手試一下了，在這里weex面向的主要是廣大的web前端開發(fā)者读处，精簡的使用方式糊治，路由的配置，weexpack的使用調(diào)試方式頁更適合web開發(fā)者們使用罚舱；weex基本上提供了兩種使用方式井辜，一種是從零開始開發(fā)一個跨平臺的app，另外一項中是集成到現(xiàn)有的app當(dāng)中管闷，原理基本是weex經(jīng)過編譯會生成兩個bundle.js一個是供web端使用的粥脚，另外一個是提供給安卓、ios使用的包个；畢竟是號稱刷允，write once， run everywhere碧囊；weex引入了vue runtime js树灶，先不說web端的實(shí)現(xiàn)這個應(yīng)該去直接看vue會更好，直接說native端的實(shí)現(xiàn)糯而，js作為連接原生控件與視圖層的紐帶天通，代替了以往使用java，oc熄驼，swift直接調(diào)用原生控件像寒，這樣生成的ui層依舊是原生的烘豹，和html毫無關(guān)系的，至于哪些div萝映，image只不過是名字和html標(biāo)簽一樣的組件而已吴叶，也沒有了dom對象的存在，因為實(shí)際的開發(fā)環(huán)境不是瀏覽器而是基于原生序臂，所以jquery以及它的一些插件是用不了的，大家一定要明確這一點(diǎn)实束，無論weex還是react-native的實(shí)際開發(fā)的對象都不是瀏覽器了奥秆，所以，我們不要把平時在瀏覽器是開發(fā)用到的東西都帶進(jìn)來咸灿，所以瀏覽器中那些標(biāo)簽在weex或者react-native中也就沒有任何的意義构订；明確這一點(diǎn)之后，我們就可以進(jìn)行開發(fā)了避矢，遇到的一些坑往這個方向靠基本也就容易解決了悼瘾。吐槽一下weex的錯誤提示真的是不行；

react-native上手體驗

react-native高大上的facebook開源审胸，讓人詬病的BSD +專利許可證亥宿，雖然react已經(jīng)切換到mit但是react-native仍舊是BSD +專利許可證；這一點(diǎn)使大家在開發(fā)之前一定要注意的砂沛。
react-native的開發(fā)烫扼，我不想多說什么，說多了沒有用碍庵，不如直接看文檔映企，畢竟文檔美如畫、上手體驗快如狗静浴。社區(qū)堰氓、視頻、教程也多如牛毛苹享，就不一一列舉双絮，唯一建議的一點(diǎn)就是要想深度使用react-native請熟讀并背誦reactJs以及redux相關(guān)文檔謝謝；了解些需原生開發(fā)富稻，或者說原生開發(fā)者們更適合使用react-native掷邦；真的原生開發(fā)用了react-native都是愛不釋手；關(guān)于集成到現(xiàn)有應(yīng)用貌似不如weex椭赋；畢竟人家weex就是指著這個技能活著的抚岗；寫幾個頁面這種工作就交給weex吧；

總結(jié)

如果你現(xiàn)在想要從頭開發(fā)一款app哪怔，那么我可以很負(fù)責(zé)任的向你推薦react-native宣蔚，很好用向抢，文檔很全，你要填的坑胚委，別人基本都給你準(zhǔn)備好土了挟鸠；如果你是想我們公司的需求一樣，只是想干掉hybrid亩冬，那么weex絕對是不二之選艘希，首先，weex夠簡單硅急，web開發(fā)者就可以先勝任覆享；其次，不需要安裝復(fù)雜的環(huán)境营袜，運(yùn)行環(huán)境簡潔撒顿、調(diào)試工具也還好，容易做降級處理荚板，特別適合開發(fā)單個頁面凤壁；

續(xù)

最近WEEX官網(wǎng)也發(fā)生了巨大的變化，英文文檔也相當(dāng)?shù)娜婀蛄恚糠值挠⑽奈臋n還沒有全面翻譯成為中文拧抖，還要些日子，完全可以勝任生產(chǎn)中一些簡單的場景罚斗、但是依舊不建議開發(fā)完整app的開發(fā)者使用徙鱼，還有很多值得考量的地方，坑针姿，還是多袱吆；

2018/08/01

在使用weex完成一個完整的app的之后，我們覺得weex提供給我們的更多的是一種解決方案距淫，我們?nèi)孕枰度胭Y源與成本到學(xué)習(xí)和開發(fā)中绞绒，所以，綜觀前端技術(shù)百花齊放榕暇，找到一條適合的路很重要蓬衡；或者說當(dāng)我們找不到非常適合的方案的時候，采用局部最優(yōu)解彤枢，直到整個項目完成狰晚，它不一定是最好的方案，但往往是行之有效的缴啡。

2018/08/21

距airbnb宣布放棄使用react-native壁晒，回歸原生技術(shù)，已經(jīng)有兩個月了业栅，airbnb對rn的貢獻(xiàn)秒咐，眾所周知谬晕，雖然airbnb回答的很委婉，但是暴露出的問題還是很明顯的携取，到底有沒有必要走這條跨平臺之路攒钳，項目規(guī)模的大小對跨平臺的影響，以及體驗雷滋，后期的維護(hù)不撑，版本的迭代，版本的發(fā)布晤斩，處理安卓ios之間的差異燎孟，以及airbnb在博客中提到的致命的問題，即尸昧，"Airbnb 放棄使用 React Native 的主要原因是 React Native 未能實(shí)現(xiàn)完全的跨平臺抽象，有時候仍然需要針對特定平臺單獨(dú)編寫代碼來解決問題旷偿。這就間接要求他們的工程師必須熟悉三個平臺才能真正用好 React Native烹俗，然而絕大多數(shù)開發(fā)者只熟悉一兩個平臺，久而久之便引發(fā)了一系列的問題"萍程，這些問題我們就真的都能解決嘛幢妄。這不禁會引發(fā)我們對跨平臺之路的重新思考，這一步走出去茫负，回頭也是需要很大的勇氣的蕉鸳。

2019/01/28

據(jù)春節(jié)放假還有6個工作日，這里有一份來自權(quán)威網(wǎng)站的報告忍法，大家查收一下潮尝，以便于了解一下React Native的現(xiàn)狀，總的來講RN在國外依舊很火饿序，但是實(shí)在是不太適合承載大型應(yīng)用勉失，這也是很多公司從rn中遷移的原因之一，報告地址：https://2018.stateofjs.com/mobile-and-desktop/react-native/

2019/02/14

一度消聲滅跡的Dart再放大招原探，隨著Dart 2.1.0穩(wěn)定版本的發(fā)布乱凿，和Flutter1.0的加持，Dart再度喚醒了廣大前端咽弦、后端開發(fā)者以及客戶端開發(fā)者對跨平臺的熱忱徒蟆。谷歌一直秉著的‘一統(tǒng)江湖’的戰(zhàn)略從來沒有停過，從瀏覽器到 OS 再到 go語言 的成功型型。我們可以預(yù)見得到段审，未來的3-5年內(nèi)Dart以及Flutter所能取得的成績。