5G到來，App的未來，是JavaScript，F(xiàn)lutter還是Native ？

Native App

React
Native（RN）發(fā)布于2015年，也是使用JavaScript語言進(jìn)行跨平臺APP的開發(fā)。與H5開發(fā)不同的是，它使用JS橋接技術(shù)在運行時編譯成各個平臺的Native代碼，其使用的技術(shù)Facebook的Flux技術(shù)。

其特點是：

* 使用JavaScript語言，由于JS被廣泛地使用，所以RN也很容易被接受。
* RN依賴JS的運行時環(huán)境，也就是JS橋接技術(shù)。其使用Facebook的Flux架構(gòu)。
* RN僅提供了UI渲染和設(shè)備訪問的API，很多功能必須依賴第三方庫來實現(xiàn)對本地組件的使用。
* 生態(tài)目前比較完善，使用的公司也比較多，特別是對JS比較熟悉的同學(xué)容易上手。
* 支持熱部署，開發(fā)過程中可以節(jié)約很多時間。
但是它也并不是完美的：

* 它的渲染方式還是調(diào)用各個平臺的原生控件，有時需要針對不同的平臺做不同的優(yōu)化。
* 其性能相對于H5有很大的提高，但是并沒有完美解決，白屏，丟幀問題依然存在。
傳統(tǒng)的原生APP開發(fā)模式，有IOS和AOS兩大系統(tǒng)，需要各自語言開發(fā)各自APP。

目前也有很多跨平臺應(yīng)用使用React Native。它也是跟Flutter對比的主要對象。

優(yōu)點：其優(yōu)點是目前的生態(tài)相對比較成熟

缺點：開發(fā)和發(fā)布成本高

* 舉個栗子：網(wǎng)易管家APP （Tab1，Tab2）
* 應(yīng)用技術(shù)：Swift，OC，JAVA
WebApp


常被人提起的H5技術(shù)，其實就是網(wǎng)頁+JavaScript。比如目前的一些流行的JS框架Vue，React，AngularJS等都是為了構(gòu)建網(wǎng)頁。針對移動端構(gòu)建出來的網(wǎng)頁可以實現(xiàn)在跨平臺的功能，但是其缺點也很明顯：

* 渲染效率低下，用戶體驗差。很多H5在iOS平臺表現(xiàn)尚可，但是在Android上特別是一些低端機上的表現(xiàn)確實讓人不敢恭維。
* 網(wǎng)頁調(diào)用設(shè)備硬件相關(guān)API比較困難，而且支持的功能較少，實現(xiàn)此類需求是H5的短板。
* 移動端的網(wǎng)站，常被稱為H5應(yīng)用，說白了就是特定運行在移動端瀏覽器上的網(wǎng)站應(yīng)用。一般泛指 SPA(Single Page
* Application)模式開發(fā)出的網(wǎng)站，與MPA（Multi-page Application，再后面做介紹）對應(yīng)。
優(yōu)點 ：開發(fā)和發(fā)布成本最低

缺點 ：性能和體驗不能講是最差的，但也受到瀏覽器處理能力的限制，多次下載同樣會占用用戶一定的流量

* 舉個栗子：網(wǎng)易管家APP（Tab3）
* 應(yīng)用技術(shù)：ReactJS，RegularJS等
Hybrid App

* 混合模式移動應(yīng)用，介于web-app、native-app這兩者之間的app，兼具“Native App良好交互體驗的優(yōu)勢”和“Web App跨平臺
* 開發(fā)的優(yōu)勢”（百度百科解釋）
* 主要的原理是，由Native通過JSBridge等方法提供統(tǒng)一的API，然后用HTML+CSS實現(xiàn)界面，JS來寫邏輯，調(diào)用API，最終的頁
面在webview中顯示，這種模式下，Android、iOS的API一般有一致性，Hybrid App所有有跨平臺效果。

優(yōu)點： 開發(fā)和發(fā)布都比較方便，效率介于Native App、Web App之間

缺點： 學(xué)習(xí)范圍較廣，需要原生配合

* 舉個栗子：網(wǎng)易云音樂，我愛我家App
應(yīng)用技術(shù)： PhoneGap，AppCan，Wex5

React Native App

Facebook發(fā)現(xiàn)Hybrid App存在很多缺陷和不足，于是發(fā)起開源的一套新的APP開發(fā)方案RN App。。使用JSX語言寫原生界面，

js通過JSBridge調(diào)用原生API渲染UI交互通信。

優(yōu)點： 效率體驗接近Native App，發(fā)布和開發(fā)成本低于Native App

缺點： 學(xué)習(xí)有一定成本，且文檔較少，免不了踩坑

舉個栗子：Facebook、youtube、discord、QQ、百度等等



WEEX App

* 阿里巴巴開發(fā)團隊在RN的成功案例上，重新設(shè)計出的一套開發(fā)模式，站在了巨人肩膀上并有淘寶團隊項目做養(yǎng)料，廣受關(guān)注，
2016年4月正式開源，并在v2.0版本官方支持Vue.js，與RN分庭抗禮。

優(yōu)點： 開發(fā)效率和體驗上跟RN不相上下，并且跨平臺性更強

缺點： 剛剛起步，社區(qū)沒有RN活躍

* 舉個栗子：淘寶、天貓、餓了么等
* Flutter 咸魚正在使用 ， 而且他們也推薦大家嘗試新技術(shù) 來自谷歌，不過貌似國內(nèi)崗位少，有人說寫這個35歲后可以出國。（我等將信將疑）


Flutter介紹

Flutter是Google推出的開源移動應(yīng)用開發(fā)框架。開發(fā)者可以通過開發(fā)一套代碼同時運行在iOS和Android平臺。


它使用Dart語言進(jìn)行開發(fā)，并且最終編譯成各個平臺的Native代碼，這樣既保證了開發(fā)效率，也保證了各個平臺的運行效率。其相當(dāng)于從頭到尾重寫了一套UI框架，不依賴具體平臺的組件。其所有的組件都是"Widget"。渲染引擎則依靠高效渲染庫Skia實現(xiàn)。

Flutter也看到了目前的跨平臺解決方案并不完美，所以它借鑒了React
Native的一些思想，做出了很大的優(yōu)化。它將代碼編譯成原生代碼，并且直接在各個平臺中使用其高效渲染引擎Skia進(jìn)行渲染，沒有橋接，不調(diào)用平臺相關(guān)控件。

這種設(shè)計思想完美解決了不同平臺的性能問題。

歸功于其設(shè)計思想，我們可以真正實現(xiàn)一套代碼，運行不同的平臺。在其推出之后，關(guān)注的開發(fā)者數(shù)量和相關(guān)的教程的增長速度遠(yuǎn)超當(dāng)時的React Native。

其特點包括：

* 使用Google自主開發(fā)的Dart語言。Dart語言是一個強類型的語言，很好地支持面向?qū)ο?，并且易于學(xué)習(xí)和使用。
* 使用谷歌自己的Skia渲染引擎，Android自帶Skia引擎，iOS平臺上Flutter也會把Skia引擎打包到APP中，實現(xiàn)高效渲染。
* 目前有非常豐富的視圖組件，可以點擊這里
<https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2Fflutter.dev%2Fdocs%2Fdevelopment%2Fui%2Fwidgets>
查看其組件目錄，包括Android上常用的材料設(shè)計（Material
Design）的UI風(fēng)格，和iOS風(fēng)格（Cupertino）。由于其渲染不依賴各平臺相關(guān)組件，所以運行在不同平臺上的效果是一致的。
* 同樣支持熱部署，開發(fā)時可以像網(wǎng)頁開發(fā)一樣實時看到效果。
目前它存在的一些問題是：

* 國內(nèi)學(xué)習(xí)資源目前并不豐富，使用Flutter的公司也比較少。
* 相關(guān)的生態(tài)還沒有React Native那樣豐富，但是其發(fā)展速度大大超過了React Native。
總結(jié)

運用于跨平臺開發(fā)的語言還有很多，如PWA，Uni
App等。個人看來，F(xiàn)lutter最具有發(fā)展?jié)摿Φ钠渲幸粋€，雖然Flutter目前并不是非常流行，但是筆者相信它是跨平臺解決方案的未來。如果谷歌的新系統(tǒng)Fuchsia
OS能像當(dāng)今的Android這樣如日中天，甚至替代掉Android的話，F(xiàn)lutter的發(fā)展也會迎來它的頂峰。

如果你想做一個企業(yè)名片之類的東西，讓更多人知道自家產(chǎn)品，那也許一個網(wǎng)站就夠了；但如果產(chǎn)品核心功能只有native
app才能提供，或者你想要確保用戶有更好的體驗、更強的黏性，那可能就需要做native app。

閱讀更多

一波Flutter酷炫特效來襲
<https://yq.aliyun.com/go/articleRenderRedirect?url=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzI3OTU0MzI4MQ%3D%3D%26amp%3Bmid%3D2247487701%26amp%3Bidx%3D1%26amp%3Bsn%3Df9f650709cdc87fbaa83528e00f704dd%26amp%3Bchksm%3Deb477c4bdc30f55d2329fb1d7240369eee0f9ff15bddca9a91a4abc880d052861d2738a576a4%26amp%3Bscene%3D21%23wechat_redirect>

金三銀四，2019最新面試實戰(zhàn)總結(jié)
<https://yq.aliyun.com/go/articleRenderRedirect?url=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzI3OTU0MzI4MQ%3D%3D%26amp%3Bmid%3D2247487513%26amp%3Bidx%3D1%26amp%3Bsn%3D9c9a3feddc59c7bc153daf76fd306253%26amp%3Bchksm%3Deb477c87dc30f5917181c0099020636e50d0e1270615fd4c66f11d3341ecc86f1f888256d32e%26amp%3Bscene%3D21%23wechat_redirect>

從來不糾結(jié)算法，冒泡排序這樣優(yōu)化？
<https://yq.aliyun.com/go/articleRenderRedirect?url=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzI3OTU0MzI4MQ%3D%3D%26amp%3Bmid%3D2247487711%26amp%3Bidx%3D1%26amp%3Bsn%3D15ba8febff5e498abf51e819b3fd540d%26amp%3Bchksm%3Deb477c41dc30f5574448d7e5e5e05c868116ea8cddf79174b9525a64c468f3ed0bd91f51ffb7%26amp%3Bscene%3D21%23wechat_redirect>

動畫：一招學(xué)會TCP的三次握手和四次揮手
<https://yq.aliyun.com/go/articleRenderRedirect?url=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzI3OTU0MzI4MQ%3D%3D%26amp%3Bmid%3D2247487654%26amp%3Bidx%3D1%26amp%3Bsn%3Dcd111579a44515ed2138065d24a01f02%26amp%3Bchksm%3Deb477c38dc30f52ede3055544f82830c7b25eb820b0c8fdb27d160d0d51222e0bba6a273e5eb%26amp%3Bscene%3D21%23wechat_redirect>

關(guān)于Gradle， 搞定Groovy閉包這一篇就夠了
<https://yq.aliyun.com/go/articleRenderRedirect?url=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzI3OTU0MzI4MQ%3D%3D%26amp%3Bmid%3D2247487745%26amp%3Bidx%3D1%26amp%3Bsn%3D9d1df391010bbe974cfbfb40c8f3f3bd%26amp%3Bchksm%3Deb477d9fdc30f4892d5a602f6b8498293be27b1567ef55cb59a103cd42f8eaf0edc823675845%26amp%3Bscene%3D21%23wechat_redirect>

最后如果對技術(shù)比較感興趣，歡迎關(guān)注我的微信公眾號：終端研發(fā)部，id：codeGooger，一起進(jìn)階技術(shù)

• ? 上一篇： 前端小團隊建設(shè)（實用前端開發(fā)規(guī)范，推薦收藏）
• ? 下一篇：FreeSql （一）入門