作者丨瀟瀟瀟瀟瀟瀟瀟
https://www.jianshu.com/p/3cd9c3c66b09
這篇文章將嘗試從技術商用的角度，對目前流行的幾大 APP 跨平臺開發技術進行分析對比，讓大家在學習選擇時多一個參考對象。
背景
APP 跨平臺開發是目前比較熱門的方向，採用 web 框架開發，以 web 的開發體驗快速構建應用，提高了迭代的效率。同時 web 開發方式大多使用動態語言，能夠繞過原生開發限制動態加載，因此具備熱加載、熱更新的能力。用跨平臺技術開發的應用無論性能還是用戶體驗都很接近原生應用。
Flutter 是 Google 新推出的一款幫助開發者開發高質量原生應用的全新APP跨平臺 UI 框架，它的目標是解決了移動開發中跨平臺、高性能問題，一經推出就受到開發者的廣泛關注。
下面將介紹幾大流行的跨平臺開發技術，並從使用成本、開發效率、一致性、動態性和性能等方面作更深入的分析，提供更具體的參考。
以下是本文目錄
幾種技術方案
webview
利用 安卓和 iOS 上的 webview 容器，APP 能夠執行 html、css 和 js 腳本，展示 web 頁面。如果需要原生功能就添加 bridge 供 javascript 調用。具有開發效率高、跨平臺、支持動態發佈等特點，它是目前應用最廣泛最成熟的一種方案。
React Native/Weex
React Native 和 Weex 這類方案，使用 javascript 來構建界面，在運行時翻譯成原生組件展示出來，實際上所有界面都是用原生組件。支持跨平臺，性能和用戶體驗高於 webview，接近原生應用，是當前熱門的跨平臺開發技術。
Flutter
Flutter 使用了一種全新的方式，自己重寫了一個平臺無關的渲染引擎，它只提供畫布，所有的 UI 組件、渲染邏輯都是在這個引擎上處理的。最大程度上保證了各平臺下的一致性，同時也擁有媲美原生的高性能體驗。
注：基於 webview 的框架目前已廣泛在 APP 開發中應用，各種利弊都已得到充分驗證，這個技術具有開發效率、跨平臺、動態發佈等方面的優點，但缺點也明顯，性能和用戶體驗上都很糟糕。接下來，我們重點對 React Native 和 Flutter 進行分析對比。
使用成本
學習曲線
React Native 採用 js 語言，基於 React，對於前端工程師比較友好，上手成本低。
Flutter 使用 Dart 作為它的開發語言，Dart 跟 Java 有點像，比較簡單，上手也容易。但畢竟是門新語言，多少會有些障礙。
接入成本
如果是全新的項目，接入 React Native/Flutter 成本較低，但對於混合開發，接入到現有項目，將是一個巨大的工程。
我們需要考慮如何集成 SDK 到現有項目，原生頁面與 React Native/Flutter 頁面如何跳轉傳值，如何封裝原生模塊供與 React Native/Flutter 調用，如何打包 React Native/Flutter 與 bundle 集成，如何部署發佈，如何跨端聯調等。
成熟度
React Native 是在 2015 年發佈的，經過 3 年多的發展，已經比較成熟。React Native 社區發展也很活躍，貢獻了大量的開源代碼。
而 Flutter 是在今年 6 月份才推出發佈預覽版，社區也剛剛發展。所以，Flutter 還需要時間。
以 Github 上打開的 issue 的數量來看，截止到 2018-10-28，React Native 有 689 個，Flutter 有 4097，這也說明了 Flutter 目前尚不穩定。
行業採用
在安卓系統中，通過分析 apk 使用的庫，統計到前 100 的 APP 使用了哪些跨平臺開發技術，如下圖：
去除遊戲和系統應用，使用 React Native/weex 的應用共 79 款，行業使用率 18.9%。
開發效率
社區
選擇一個技術時，社區生態是一個重要的考量。一個繁榮的社區，有很多成熟的工具、庫、工程體系、最佳實踐可以供我們使用和借鑑。
那麼如何衡量一個開源社區的活躍度？
為簡單起見，我們以開發者數量和變化趨勢作為指標來衡量社區生態是否繁榮？在 github 上統計各個技術的倉庫數量（2018-10-16），以此分析背後的開發者數量，這裡加入了另外兩種技術作為參照物，以便更好地對比分析社區活躍度，其中 Weex 作為不活躍社區的基準，Objective-C 作為原生社區的基準。
注：Objective-C 倉庫數量為 396,668，因數量太大沒放到下圖中。
下圖是倉庫數量變化趨勢圖，以半年為節點，統計了最近一年半的變化趨勢。
綜合來年，目前 React Native 社區生態最好，而且還在穩定增長，Flutter 由於發佈時間比較短，社區生態還不成熟，但增長速度相當快，未來很有潛力。
熱加載
Flutter 使用了兩種編譯模式，開發階段使用 JIT 編譯，代碼可以在運行時編譯；release 階段，ios 使用 AOT 編譯，編譯器在程序運行前編譯，生成 app.framwork，android 使用了 Core JIT 編譯，dart 轉化為二進制模式，在 VM 啟動前載入。
React Native/Flutter 都支持熱加載功能，利用熱加載，修改代碼後無須重新運行 APP，只需保存代碼後即可在手機或模擬器上立即看到效果。相比原生開發，大大提升了開發速度。
Debug
把 React Native/Flutter 接入原生應用，會讓項目變得更加複雜，增加了我們開發和維護的難度。尤其是在 debug 時，有時需要跨 React Native/Flutter 和原生，深入底層原生代碼來追蹤問題。
React Native/Flutter 原生部分的 crash 也難以收集，通常我們需要自己來收集 crash 現場信息。
一致性
兼容性
React Native 沒有真正實現跨平臺，實際開發中，我們需要去適配和橋接兩端的差異性，這帶來了額外的開發成本。
Flutter 相對來說做到了真正的跨平臺，一套代碼在兩端運行基本沒有兼容性問題。
動態性
熱更新
React Native 支持熱更新。
Flutter 的機制目前還不支持熱更新功能，仍然需要發版。
性能
為了更準確地測量數據，以下性能測試，均使用低端設備，跨平臺開發框架使用目前的穩定版本。
其中iOS端設備為 iphone 6， 開發環境，React Native 版本：0.50.4，Flutter 版本：0.9.4。 測試環境，Release 模式。
分別用 Flutter 和 React Native 實現同一個 Demo。Demo 只有一個長列表頁面，展示隨機生成的 1 萬條數據，其中每行有兩個本地圖標，效果如下：
安裝包體積
iOS
根據測試，兩個 Demo 中，Flutter 安裝包大小 11.3M。（Flutter 磁盤佔用 31M） React Native 安裝包大小 1.4M。(均使用 AD Hoc 導出的包) iOS 原生安裝包 28k。
安卓
Android 原生安裝包大小：1.5M Flutter 安裝包大小：8M React Native 安裝包大小：8M
由於 Flutter SDK 中自帶一套渲染引擎，包括 Dart VM，Dart 標準庫，libskia，Dart UI 庫等庫，因此包體積比較大。安卓端自帶了 Skia 2D 繪圖引擎，所以 Flutter Android SDK 要比 iOS SDK 小很多。
React Native SDK 體積較小，iOS 上 900K，安卓上較大。
啟動時間
Flutter 應用的啟動時間 = Flutter SDK 初始化時間 + 原生初始化時間，因此 Flutter 啟動耗時長一些。
內存/CPU
iOS
Flutter
React Native
安卓
FPS
Demo 總共一萬條數據，從頭劃到底，監測到的 FPS 變化。
iOS
Flutter
Flutter 並沒有達到官方宣稱的穩定 60幀/s，在快速划動的時，還是出現丟幀的現象。平均下來 FPS 為 50.5。
React Native
React Native 在高性能場景下表現很糟糕，頁面渲染跟不上滑動速度，多次出現白屏現象。
Android
Flutter 滑動很流暢，未出現白屏現象
React Native 滑動很流暢，但是多頁之後頁面渲染跟不上滑動速度，多次出現白屏現象。
總結
Flutter 是今年剛推出的新技術，與較成熟的 React Native 相比，顯得不太公平。也許一兩年後，才能一較高下。不過通過上面的對比分析可以看出，Flutter 在跨平臺一致性和性能上都比較好，這是一個非常有競爭力和潛力的技術，值得大家去了解和學習。
最後總結對比以下這兩種技術的優缺點
參考資料： 移動應用架構演變及泛前端趨勢下移動團隊破局
閒聊 Flutter
React Native VS Flutter評測
關於Flutter iOS安裝包大小的解讀
Flutter原理簡解
Flutter VS React Native
如何評價 Google 的 Fuchsia、Android、iOS 跨平臺應用框架 Flutter？
京東金融客戶端初探Flutter框架
掘金 AMA - 聽閒魚客戶端架構師宗心談 Flutter 和他的團隊
Flutter KO React Native? 讓時間去決定吧...
閱讀更多 互聯網技能圖譜 的文章
關鍵字: 瀟瀟 開發技術 Objective-C
