5G到來，App的未來，是JavaScript，Flutter還是Native ？

codeGoogle發表於2019-04-28

APPJavaScriptFlutter

Native App

React Native（RN）釋出於2015年，也是使用JavaScript語言進行跨平臺APP的開發。與H5開發不同的是，它使用JS橋接技術在執行時編譯成各個平臺的Native程式碼，其使用的技術Facebook的Flux技術。

其特點是：

使用JavaScript語言，由於JS被廣泛地使用，所以RN也很容易被接受。
RN依賴JS的執行時環境，也就是JS橋接技術。其使用Facebook的Flux架構。
RN僅提供了UI渲染和裝置訪問的API，很多功能必須依賴第三方庫來實現對本地元件的使用。
生態目前比較完善，使用的公司也比較多，特別是對JS比較熟悉的同學容易上手。
支援熱部署，開發過程中可以節約很多時間。

但是它也並不是完美的：

它的渲染方式還是呼叫各個平臺的原生控制元件，有時需要針對不同的平臺做不同的優化。
其效能相對於H5有很大的提高，但是並沒有完美解決，白屏，丟幀問題依然存在。

傳統的原生APP開發模式，有IOS和AOS兩大系統，需要各自語言開發各自APP。

目前也有很多跨平臺應用使用React Native。它也是跟Flutter對比的主要物件。

優點：其優點是目前的生態相對比較成熟

缺點：開發和釋出成本高

舉個例子：網易管家APP （Tab1，Tab2）
應用技術：Swift，OC，JAVA

WebApp

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

渲染效率低下，使用者體驗差。很多H5在iOS平臺表現尚可，但是在Android上特別是一些低端機上的表現確實讓人不敢恭維。
網頁呼叫裝置硬體相關API比較困難，而且支援的功能較少，實現此類需求是H5的短板。
移動端的網站，常被稱為H5應用，說白了就是特定執行在移動端瀏覽器上的網站應用。一般泛指 SPA(Single Page
Application)模式開發出的網站，與MPA（Multi-page Application，再後面做介紹）對應。

優點：開發和釋出成本最低

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

舉個例子：網易管家APP（Tab3）
應用技術：ReactJS，RegularJS等

Hybrid App

混合模式移動應用，介於web-app、native-app這兩者之間的app，兼具“Native App良好互動體驗的優勢”和“Web App跨平臺
開發的優勢”（百度百科解釋）
主要的原理是，由Native通過JSBridge等方法提供統一的API，然後用HTML+CSS實現介面，JS來寫邏輯，呼叫API，最終的頁

** 面在webview中顯示，這種模式下，Android、iOS的API一般有一致性，Hybrid App所有有跨平臺效果。**

優點： 開發和釋出都比較方便，效率介於Native App、Web App之間

缺點： 學習範圍較廣，需要原生配合

舉個例子：網易雲音樂，我愛我家App

** 應用技術：** PhoneGap，AppCan，Wex5

React Native App

Facebook發現Hybrid App存在很多缺陷和不足，於是發起開源的一套新的APP開發方案RN App。。使用JSX語言寫原生介面，

js通過JSBridge呼叫原生API渲染UI互動通訊。

優點： 效率體驗接近Native App，釋出和開發成本低於Native App

缺點： 學習有一定成本，且文件較少，免不了踩坑

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

WEEX App

阿里巴巴開發團隊在RN的成功案例上，重新設計出的一套開發模式，站在了巨人肩膀上並有淘寶團隊專案做養料，廣受關注，

2016年4月正式開源，並在v2.0版本官方支援Vue.js，與RN分庭抗禮。

優點： 開發效率和體驗上跟RN不相上下，並且跨平臺性更強

缺點： 剛剛起步，社群沒有RN活躍

舉個例子：淘寶、天貓、餓了麼等
Flutter 鹹魚正在使用，而且他們也推薦大家嘗試新技術來自谷歌，不過貌似國內崗位少，有人說寫這個35歲後可以出國。（我等將信將疑）

Flutter介紹

Flutter是Google推出的開源移動應用開發框架。開發者可以通過開發一套程式碼同時執行在iOS和Android平臺。

它使用Dart語言進行開發，並且最終編譯成各個平臺的Native程式碼，這樣既保證了開發效率，也保證了各個平臺的執行效率。其相當於從頭到尾重寫了一套UI框架，不依賴具體平臺的元件。其所有的元件都是"Widget"。渲染引擎則依靠高效渲染庫Skia實現。

Flutter也看到了目前的跨平臺解決方案並不完美，所以它借鑑了React Native的一些思想，做出了很大的優化。它將程式碼編譯成原生程式碼，並且直接在各個平臺中使用其高效渲染引擎Skia進行渲染，沒有橋接，不呼叫平臺相關控制元件。

這種設計思想完美解決了不同平臺的效能問題。

歸功於其設計思想，我們可以真正實現一套程式碼，執行不同的平臺。在其推出之後，關注的開發者數量和相關的教程的增長速度遠超當時的React Native。

其特點包括：

使用Google自主開發的Dart語言。Dart語言是一個強型別的語言，很好地支援物件導向，並且易於學習和使用。
使用谷歌自己的Skia渲染引擎，Android自帶Skia引擎，iOS平臺上Flutter也會把Skia引擎打包到APP中，實現高效渲染。
目前有非常豐富的檢視元件，可以點選這裡檢視其元件目錄，包括Android上常用的材料設計（Material Design）的UI風格，和iOS風格（Cupertino）。由於其渲染不依賴各平臺相關元件，所以執行在不同平臺上的效果是一致的。
同樣支援熱部署，開發時可以像網頁開發一樣實時看到效果。

目前它存在的一些問題是：

國內學習資源目前並不豐富，使用Flutter的公司也比較少。
相關的生態還沒有React Native那樣豐富，但是其發展速度大大超過了React Native。

總結

運用於跨平臺開發的語言還有很多，如PWA，Uni App等。個人看來，Flutter最具有發展潛力的其中一個，雖然Flutter目前並不是非常流行，但是筆者相信它是跨平臺解決方案的未來。如果谷歌的新系統Fuchsia OS能像當今的Android這樣如日中天，甚至替代掉Android的話，Flutter的發展也會迎來它的頂峰。

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