摘要：派，看說(shuō)完了，說(shuō)到，大家看看淘寶以及各大主流平臺(tái)都采用了我們的建筑方式，所以我不想多說(shuō)，我們的建筑經(jīng)驗(yàn)第一，相信你也認(rèn)同吧。

彬哥，我看今年前端分了倆方向啊，一個(gè)是Flutter和React Native這種，還有就是小程序，淘寶小程序這種微應(yīng)用，我們公司讓我做React Native這塊兒，這是不是對(duì)我未來(lái)發(fā)展好些？以前技術(shù)棧還是Vue，我最近轉(zhuǎn)React了，剛開(kāi)始寫(xiě)第一個(gè)項(xiàng)目，我還看了看uni-app，學(xué)習(xí)成本更低一些，國(guó)內(nèi)好像更吃香？到底第該學(xué)哪個(gè)？

前幾天有個(gè)學(xué)生問(wèn)我上面的問(wèn)題，因?yàn)榍岸思夹g(shù)領(lǐng)域最不缺的就是新技術(shù)，前端開(kāi)發(fā)者比較頭疼的不是沒(méi)有技術(shù)可用，而是可用的技術(shù)太多了，學(xué)不過(guò)來(lái)，也不知道選哪個(gè)。

其實(shí)類似的問(wèn)題爭(zhēng)論在PC時(shí)代就存在過(guò)，太陽(yáng)底下沒(méi)有什么新鮮事。甚至在我們生活中都有類似的選擇問(wèn)題。技術(shù)學(xué)習(xí)者要"看技術(shù)是技術(shù)，然后看技術(shù)不是技術(shù)"。如果你打算理解一項(xiàng)技術(shù)的產(chǎn)生和優(yōu)缺點(diǎn)，就去追問(wèn)他的應(yīng)用場(chǎng)景，或者生活中的應(yīng)用場(chǎng)景。如果一項(xiàng)技術(shù)你找不到生活中的對(duì)應(yīng)，很可能你根本就不理解這項(xiàng)技術(shù)，而只是官方demo或者別人示例代碼的搬運(yùn)工。

今天我就說(shuō)說(shuō)Flutter 、React Native 、 Ionic、 NativeScript 、小程序和PWA哪個(gè)值得學(xué)？

話說(shuō)long long ago，有一個(gè)土豪，他有兩個(gè)兒子大明（IOS）和小明(安卓)，土豪琢磨孩子年齡大了該準(zhǔn)備婚事了，那就得先有房子，另外的家里的門(mén)房和廂房都該翻蓋了，所以他想好好的規(guī)劃一番，對(duì)了還要做好防盜，不能讓閑雜人等進(jìn)來(lái)影響安全。

他找老大談話征求老大對(duì)房子的意見(jiàn)，老大說(shuō)我的婚房要豪華氣派，要高級(jí)裝修，要住起來(lái)非常的舒服，閉路電視、寬帶，能通的就通上，反正也是折騰一回，蓋房子就大事，蓋一次爭(zhēng)取就是村里最好的房子要住很多年呢。

他又找老二談話征求老二對(duì)房子的意見(jiàn)，老二說(shuō)我又不著急結(jié)婚，房子就是個(gè)住的地兒，我呢又在上學(xué)，反正怎么快怎么來(lái)吧，這樣周末和暑假還可以過(guò)來(lái)玩。房子老了，到時(shí)候結(jié)婚了再翻蓋也不遲，現(xiàn)在蓋了將來(lái)也舊了，對(duì)了要方便一些，能讓我的朋友們跟我隨便造。

土豪一聽(tīng)都覺(jué)得有道理，他覺(jué)得都挺有道理，于是發(fā)了一個(gè)公告，尋找各路包工隊(duì)幫蓋房子。

于是發(fā)了一個(gè)招標(biāo)公告：

本人土豪，家資殷實(shí)，誠(chéng)招各路豪杰幫我家蓋房要求：

1.目前有主房?jī)商?，其余廂房、門(mén)房若干，要求盡可能一次性充分利用材料，一次采購(gòu)和加工建筑材料，能夠多個(gè)地方能用。比如攪拌機(jī)攪拌一次攪機(jī)開(kāi)一次就能把各個(gè)房間用的水泥攪拌出來(lái)，能夠做出各個(gè)房子能用的磚塊和柱子。（維護(hù)一套代碼，能夠在跨平臺(tái)運(yùn)營(yíng)，write once,run any where）

2.房子的各項(xiàng)水電煤功能齊全。（能夠充分利用設(shè)備的功能）

3.房子后期維護(hù)方便，最好能讓家人或者我的工人們也能改造房子。（學(xué)習(xí)容易）

4.蓋房成本要盡可能低。（開(kāi)發(fā)和維護(hù)都省錢(qián)）

雖然土豪也覺(jué)得條件有些苛刻（跨平臺(tái)的思路都是受質(zhì)疑的），但是他想我有錢(qián)啊，我想試試（技術(shù)是在嘗試和質(zhì)疑中完善進(jìn)步的）。

還別說(shuō)，才招標(biāo)就來(lái)了5路人馬。每一路人馬都身懷絕技。

他們分別是：

html5 派： 以html5 為首，可以說(shuō)包隊(duì)歷史最老了，其中的PWA團(tuán)隊(duì)是新星，受人關(guān)注。

native派：java、kotlin兩個(gè)團(tuán)隊(duì)瞄著小明的需求去的，Object-C和Swift團(tuán)隊(duì)瞄著老大的需求去的，他們可以說(shuō)最懂各自瞄準(zhǔn)的需求了。

HybridApp派：號(hào)稱融合了h5派和native派的優(yōu)勢(shì)，有很多成熟的住宅建設(shè)經(jīng)驗(yàn)，目前風(fēng)頭正勁。以前有phonegap ，后來(lái)有cordova，最近ionic表現(xiàn)也很搶眼。

純真派：后起之秀，被認(rèn)為是建筑行業(yè)的未來(lái)，可以說(shuō)綜合其它各個(gè)派系的優(yōu)點(diǎn)，一出手變表現(xiàn)驚艷，但是初出茅廬，經(jīng)驗(yàn)上欠缺些。比如 NativeScript 、React Native、Flutter.

小程序派：Taro、WePY 、uni-app 、 mpvue 、 chameleon 這些團(tuán)隊(duì)在專業(yè)的領(lǐng)域比如旅館建筑很有建樹(shù)，實(shí)力不容小覷。

公開(kāi)招標(biāo)會(huì)開(kāi)始了，招標(biāo)主人人開(kāi)始主持：

1.各位都是建筑業(yè)的精英，我們實(shí)行集中陳述，互相答辯的方式。

第一個(gè)問(wèn)題：

1.目前有主房?jī)商祝溆鄮?、門(mén)房若干，要求盡可能一次性充分利用材料，一次采購(gòu)和加工建筑材料，能夠多個(gè)地方能用。比如攪拌機(jī)攪拌一次攪機(jī)開(kāi)一次就能把各個(gè)房間用的水泥攪拌出來(lái)，能夠做出各個(gè)房子能用的磚塊和柱子。（維護(hù)一套代碼，能夠在跨平臺(tái)運(yùn)營(yíng)，write once,run any where）

這個(gè)需求各路豪杰誰(shuí)想說(shuō)說(shuō)？

html5 派的PWA直接站起來(lái)，因?yàn)檫@個(gè)就是他的強(qiáng)項(xiàng)??！

PWA開(kāi)口了，大家都知道H5作為資歷最老的建筑團(tuán)隊(duì)，從一開(kāi)始就主張所有平臺(tái)通用，目前我們所有的建筑技術(shù)都是可以通用的，不管是住宅，商用還是，寫(xiě)字樓，相比native派只能在具體的領(lǐng)域很厲害，我們還是優(yōu)勢(shì)很明顯的，而是我們有望成為下一代的通用標(biāo)準(zhǔn)。還記得我們當(dāng)初我們公司的杰作ajax嗎？不就成了數(shù)據(jù)交互事實(shí)標(biāo)準(zhǔn)了嗎？

沒(méi)想到還沒(méi)到答辯環(huán)節(jié)，PWA一開(kāi)口就懟人了，但是這句話確實(shí)懟的native派沒(méi)話說(shuō)。

HybridApp派，看PWA說(shuō)完了，說(shuō)到，大家看看淘寶以及各大主流平臺(tái)都采用了我們的建筑方式，所以我不想多說(shuō)，我們的建筑經(jīng)驗(yàn)第一，相信Flutter你也認(rèn)同吧。

雖然Flutter被人戳中了軟肋，很不爽，但是還是點(diǎn)了點(diǎn)頭。對(duì)于前輩還是要尊重的。

純真派見(jiàn)HybridApp派坐下了，站起來(lái)，說(shuō)到，我們這一派都是精英中的精英，比如react native、nativeScrtip,它沒(méi)好意思說(shuō)自己，我們?cè)诮ㄖI(yè)的表現(xiàn)大家也有目共睹了。

小程序派聽(tīng)著他們的闡述，因?yàn)榭吹酵梁赖哪敲炊嘈枨蟾杏X(jué)自己實(shí)現(xiàn)不了，所以心虛想看看再說(shuō)，所以暫時(shí)這一輪棄權(quán)。

好，主持人又開(kāi)始說(shuō)話了，我們看第二個(gè)問(wèn)題：

2.房子的各項(xiàng)水電煤功能齊全。（能夠充分利用設(shè)備的功能）

剛才被懟的native派一下子站了起來(lái)，我就問(wèn)一句話，說(shuō)到能夠把房子的功能蓋到極致，我們派說(shuō)第二，哪個(gè)團(tuán)隊(duì)敢說(shuō)第一？H5你們敢嗎？

因?yàn)檫@個(gè)問(wèn)題native派派優(yōu)勢(shì)性很大，所以過(guò)。

主持人繼續(xù)，我們看第三個(gè)問(wèn)題：

3.房子后期維護(hù)方便，最好能讓家人或者我的工人們也能改造房子。（學(xué)習(xí)容易）

h5又站起來(lái)了，你就說(shuō)我們干活快不快吧？native？

native無(wú)話，

HybridApp派，我們也不慢。

h5很仔細(xì)的說(shuō)，比我呢？

純真派雖然維護(hù)挺快，但是因?yàn)樽约河昧薲art所以讓人去學(xué)還是存在一定困難的。

這個(gè)問(wèn)題又過(guò)了，能讓家人或者我的工人們也能改造房子。這點(diǎn)心虛，所以不說(shuō)話。

主持人繼續(xù)，我們看第四個(gè)問(wèn)題：

4.蓋房成本要盡可能低。（開(kāi)發(fā)和維護(hù)都省錢(qián)）

h5又站起來(lái)了，你們就說(shuō)我蓋房子成本低不低吧？native。

native確實(shí)貴，被H5懟的真忍不住反駁，你那個(gè)也要叫房子？四處漏風(fēng)，水電都不通。

主持人說(shuō)一會(huì)答辯，土豪皺了皺眉。

HybridApp派和純真派說(shuō)，我們也不慢啊。

主持人一看這要杠上，所以說(shuō)，這樣吧我們開(kāi)始答辯，大家說(shuō)說(shuō)你們打算怎么干，依次發(fā)言。

html5說(shuō)到，我打算搭一個(gè)木頭架子（html），然后外面貼上鐵皮，一刷油漆完事(css)，里面可以安個(gè)電風(fēng)扇(js)。

native說(shuō)到，你這個(gè)不就是活動(dòng)板房嗎？煤電燃?xì)庠趺唇鉀Q？

PWA說(shuō)我們打算逐步解決這個(gè)問(wèn)題，比如大明家可以安裝空調(diào)，因?yàn)樗曳孔蛹茏涌梢杂娩摻畹?，門(mén)房因?yàn)楸容^老舊了，裝空調(diào)費(fèi)勁，但是我們可以裝空調(diào)。

native，笑道，你是在蓋豬圈呢嗎？native起來(lái)發(fā)言，我呢打算先挖坑，然后里面水泥澆筑，然后用壓路機(jī)軋上200趟，然后我去山里拉石頭，把石頭磨得方方正正，然后壘起來(lái)，保證一百年不倒，重點(diǎn)是里面各種高級(jí)裝修，閉路電視、監(jiān)控只要是老大想裝的，我們?nèi)苎b。

HybridApp笑了，你上次給村長(zhǎng)兒子結(jié)婚蓋的房子，人家兒子都上小學(xué)了，你完工了嗎？

主持人說(shuō)，你打算怎么干？

我呢主結(jié)構(gòu)采用native的那套保證兼顧，裝修和墻壁使用h5的，又快有時(shí)會(huì)。

純真派問(wèn)道，那前輩，活動(dòng)板墻壁冬天取暖很費(fèi)空調(diào)費(fèi)啊，保暖性能也不好，怎么解決呢？

HybridApp,無(wú)話。因?yàn)榧冋媾芍肋@次小程序就是來(lái)陪標(biāo)的，所以根本不放在眼里，所以闡述自己的想法。

我能打地基的時(shí)候采用native的方式，而主體建筑我采用混凝土鋼筋結(jié)構(gòu)，雖然沒(méi)有把石頭打磨平整一整塊石頭那種方式堅(jiān)固，但是也是絕對(duì)堅(jiān)固能夠滿足建筑的堅(jiān)固需求的。同時(shí)混凝土澆筑速度快，同時(shí)能夠解決內(nèi)部精裝和HybridApp的建筑方式保暖、通風(fēng)問(wèn)題。

土豪心里似乎明朗了一些，基本上小程序打醬油、PWA不能立馬滿足所有需求，H5因?yàn)楣δ苋笔С鼍?，集中點(diǎn)就在HybridApp和純真派上。HybridApp雖然成熟，但是確實(shí)性能不好，功能上也不如純真派來(lái)的直接，但是又不想重復(fù)村長(zhǎng)兒子的悲劇。但是一想到純真派的經(jīng)驗(yàn)不足，就想多問(wèn)一些。

于是主持人問(wèn)到，純真派你們能詳細(xì)說(shuō)說(shuō)嗎？

這句話無(wú)疑就相當(dāng)于說(shuō)，我覺(jué)得純真派有戲，那么競(jìng)爭(zhēng)就變成派系內(nèi)部了，也就是三大主角。

react native、flutter、NativeScript .

react native先發(fā)言，

我們隸屬于fackbook公司，依托于react，語(yǔ)法上沿用了react，我們使用javascript，可以很好的維護(hù)。

不用HybridApp的Webview，徹底擺脫了Webview讓人不爽的交互和性能問(wèn)題，有較強(qiáng)的擴(kuò)展性，這是因?yàn)镹ative端提供的是基本控件，JS可以自由組合使用，可以直接使用Native原生的動(dòng)畫(huà)。

rn說(shuō)了一堆專業(yè)術(shù)語(yǔ)顯得自己很專業(yè)聽(tīng)的土豪一頭霧水，但是感覺(jué)很厲害。

flutter打斷道，說(shuō)的好像你蓋完老大的房子的東西就直接能用到老二家似的，況且你看看你建筑的那些組件的bug還用我說(shuō)嗎？

rn說(shuō)，我們確實(shí)存在一些問(wèn)題，但是我們?cè)趪L試解決。

flutter落井下石，嘗試解決？就是一堆坑沒(méi)解決唄。

rn反擊道，就算是沒(méi)解決也比你還沒(méi)遇到好吧？再說(shuō)了你那個(gè)破dart，你覺(jué)得非專業(yè)人員能學(xué)會(huì)嗎？

NativeScript 一聽(tīng)這么說(shuō)，心虛了，自己的東西比他們兩個(gè)都復(fù)雜，趕緊閉嘴。

看來(lái)剩下就是flutter和rn的論戰(zhàn)了，不過(guò)也沒(méi)有什么新意，flutter總是強(qiáng)調(diào)自己的磚瓦石灰各種模塊多豐富，蓋房子多快，性能多好，然后rn總強(qiáng)調(diào)自己的學(xué)習(xí)不用學(xué)其它語(yǔ)言就js就行。

想到這里，主持人說(shuō)答辯結(jié)束，我總結(jié)一下，各方觀點(diǎn)：

1.h5開(kāi)發(fā)快修改成本低于，能夠跨平臺(tái)，但是因?yàn)闃?biāo)準(zhǔn)更新緩慢，所以功能支持不完善。

2.HybridApp，方案成熟，應(yīng)用很多，性能不是很好（相比f(wàn)lutter和rn）

3.native 功能全，但是不能跨平臺(tái)，開(kāi)發(fā)慢。

4.rn 學(xué)習(xí)成本低（比HybridApp高，比f(wàn)lutter低），坑比較多。

5.flutter 優(yōu)勢(shì)明顯，但是需要學(xué)dart，但是組建豐富。

是這樣嗎？

大家點(diǎn)頭。

土豪考慮，綜合一聽(tīng)其實(shí)王道還是h5，奈何它太慢了，感覺(jué)不是別人做的太好了，而是它做的太差了。小程序不考慮了，native不考慮成本太高，開(kāi)發(fā)慢，不跨平臺(tái)。因?yàn)榇髢鹤又苯Y(jié)婚（主營(yíng)業(yè)務(wù)、核心需求），所以采納HybridApp比較穩(wěn)妥，二兒子不著急結(jié)婚所以讓flutter去蓋（次要業(yè)務(wù)）。rn就不考慮了，不過(guò)好像因?yàn)橹暗膸渴莚eact蓋的，所以react native接受翻蓋會(huì)容易些，所以這塊給他們吧。

所以最終宣布：

大兒子的房子HybridApp中標(biāo)，

二兒子的房子flutter中標(biāo)，

廂房和門(mén)房因?yàn)橹熬褪莚eact弄的，所以reaact native中標(biāo)！

3月23號(hào)，前端職業(yè)規(guī)劃師Maxwell，在線live為大家講解跳槽、面試相關(guān)的實(shí)戰(zhàn)攻略。