APP跨平臺開發技術分析

瀟瀟瀟暮雨發表於2019-03-13

這篇文章將嘗試從技術商用的角度,對目前流行的幾大 APP 跨平臺開發技術進行分析對比,讓大家在學習選擇時多一個參考物件。

背景

APP 跨平臺開發是目前比較熱門的方向,採用 web 框架開發,以 web 的開發體驗快速構建應用,提高了迭代的效率。同時 web 開發方式大多使用動態語言,能夠繞過原生開發限制動態載入,因此具備熱載入、熱更新的能力。用跨平臺技術開發的應用無論效能還是使用者體驗都很接近原生應用。

Flutter 是 Google 新推出的一款幫助開發者開發高質量原生應用的全新APP跨平臺 UI 框架,它的目標是解決了移動開發中跨平臺、高效能問題,一經推出就受到開發者的廣泛關注。

下面將介紹幾大流行的跨平臺開發技術,並從使用成本、開發效率、一致性、動態性和效能等方面作更深入的分析,提供更具體的參考。

以下是本文目錄

15407787894735.jpg

幾種技術方案

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 使用了哪些跨平臺開發技術,如下圖:

15397040604754.jpg

去除遊戲和系統應用,使用 React Native/weex 的應用共 79 款,行業使用率 18.9%。

開發效率

社群

選擇一個技術時,社群生態是一個重要的考量。一個繁榮的社群,有很多成熟的工具、庫、工程體系、最佳實踐可以供我們使用和借鑑。

那麼如何衡量一個開源社群的活躍度?

為簡單起見,我們以開發者數量和變化趨勢作為指標來衡量社群生態是否繁榮?在 github 上統計各個技術的倉庫數量(2018-10-16),以此分析背後的開發者數量,這裡加入了另外兩種技術作為參照物,以便更好地對比分析社群活躍度,其中 Weex 作為不活躍社群的基準,Objective-C 作為原生社群的基準。

注:Objective-C 倉庫數量為 396,668,因數量太大沒放到下圖中。

15396802894141.jpg

下圖是倉庫數量變化趨勢圖,以半年為節點,統計了最近一年半的變化趨勢。

15396807671703.jpg

綜合來年,目前 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 萬條資料,其中每行有兩個本地圖示,效果如下:

15402000864577.gif

安裝包體積

iOS

根據測試,兩個 Demo 中,Flutter 安裝包大小 11.3M。(Flutter 磁碟佔用 31M) React Native 安裝包大小 1.4M。(均使用 AD Hoc 匯出的包) iOS 原生安裝包 28k。

安卓

Android 原生安裝包大小:1.5M Flutter 安裝包大小:8M React Native 安裝包大小:8M

15404353035273.jpg

由於 Flutter SDK 中自帶一套渲染引擎,包括 Dart VM,Dart 標準庫,libskia,Dart UI 庫等庫,因此包體積比較大。安卓端自帶了 Skia 2D 繪圖引擎,所以 Flutter Android SDK 要比 iOS SDK 小很多。

React Native SDK 體積較小,iOS 上 900K,安卓上較大。

啟動時間

Flutter 應用的啟動時間 = Flutter SDK 初始化時間 + 原生初始化時間,因此 Flutter 啟動耗時長一些。

15404362605649.jpg

記憶體/CPU

iOS

Flutter

15401895784128.jpg

15401896033126.jpg

React Native

15401897669442.jpg

15401897765515.jpg

安卓

image-flutter.png

image-rn.png

image-android.png

FPS

Demo 總共一萬條資料,從頭劃到底,監測到的 FPS 變化。

iOS

Flutter

15401993802630.jpg

Flutter 並沒有達到官方宣稱的穩定 60幀/s,在快速划動的時,還是出現丟幀的現象。平均下來 FPS 為 50.5。

React Native

15401995245238.jpg

React Native 在高效能場景下表現很糟糕,頁面渲染跟不上滑動速度,多次出現白屏現象。

Android

Flutter 滑動很流暢,未出現白屏現象

React Native 滑動很流暢,但是多頁之後頁面渲染跟不上滑動速度,多次出現白屏現象。

總結

Flutter 是今年剛推出的新技術,與較成熟的 React Native 相比,顯得不太公平。也許一兩年後,才能一較高下。不過通過上面的對比分析可以看出,Flutter 在跨平臺一致性和效能上都比較好,這是一個非常有競爭力和潛力的技術,值得大家去了解和學習。

最後總結對比以下這兩種技術的優缺點

15407789877774.jpg

參考資料: 移動應用架構演變及泛前端趨勢下移動團隊破局

閒聊 Flutter

React Native VS Flutter評測

關於Flutter iOS安裝包大小的解讀

Flutter原理簡解

Flutter VS React Native

如何評價 Google 的 Fuchsia、Android、iOS 跨平臺應用框架 Flutter?

京東金融客戶端初探Flutter框架

掘金 AMA - 聽閒魚客戶端架構師宗心談 Flutter 和他的團隊

Flutter KO React Native? 讓時間去決定吧...

相關文章