跨平台真的香嗎？

曾幾何時(shí)，以RN爲代表的跨平台的技術一經(jīng)推出。得到無數掌聲。也爲互聯網創業者看到新的希望。他們一度認爲，跨平台是萬能(néng)的。可以幫助他們解決一切問題，甚至一些技術經(jīng)理，覺得不趕上跨平台技術的大潮。就(jiù)仿佛就(jiù)落伍了。跨平台的方案，一套又一套的推出。技術一代又一代演進(jìn)，一直到今天，有人力推，有觀望，有人嗤之以鼻。這(zhè)是爲什麼(me)呢。我將(jiāng)在下面(miàn)的文章進(jìn)行深入分析一下。

APP 跨平台開(kāi)發(fā)是目前比較熱門的方向(xiàng)，采用 web 框架開(kāi)發(fā)，以 web 的開(kāi)發(fā)體驗快速構建應用，提高了叠代的效率。同時(shí) web 開(kāi)發(fā)方式大多使用動态語言，能(néng)夠繞過(guò)原生開(kāi)發(fā)限制動态加載，因此具備熱加載、熱更新的能(néng)力。用跨平台技術開(kāi)發(fā)的應用無論性能(néng)還(hái)是用戶體驗都(dōu)很接近原生應用。

Flutter 是 Google 新推出的一款幫助開(kāi)發(fā)者開(kāi)發(fā)高質量原生應用的全新APP跨平台 UI 框架，它的目标是解決了移動開(kāi)發(fā)中跨平台、高性能(néng)問題，一經(jīng)推出就(jiù)受到開(kāi)發(fā)者的廣泛關注。

下面(miàn)將(jiāng)介紹幾大流行的跨平台開(kāi)發(fā)技術，并從使用成(chéng)本、開(kāi)發(fā)效率、一緻性、動态性和性能(néng)等方面(miàn)作更深入的分析，提供更具體的參考。

幾種(zhǒng)技術方案

webview

利用 安卓和 iOS 上的 webview 容器，APP 能(néng)夠執行 html、css 和 js 腳本，展示 web 頁面(miàn)。如果需要原生功能(néng)就(jiù)添加 bridge 供 javascript 調用。具有開(kāi)發(fā)效率高、跨平台、支持動态發(fā)布等特點，它是目前應用最廣泛最成(chéng)熟的一種(zhǒng)方案。

React Native/Weex

React Native 和 Weex 這(zhè)類方案，使用 javascript 來構建界面(miàn)，在運行時(shí)翻譯成(chéng)原生組件展示出來，實際上所有界面(miàn)都(dōu)是用原生組件。支持跨平台，性能(néng)和用戶體驗高于 webview，接近原生應用，是當前熱門的跨平台開(kāi)發(fā)技術。

Flutter

Flutter 使用了一種(zhǒng)全新的方式，自己重寫了一個平台無關的渲染引擎，它隻提供畫布，所有的 UI 組件、渲染邏輯都(dōu)是在這(zhè)個引擎上處理的。最大程度上保證了各平台下的一緻性，同時(shí)也擁有媲美原生的高性能(néng)體驗。

注：基于 webview 的框架目前已廣泛在 APP 開(kāi)發(fā)中應用，各種(zhǒng)利弊都(dōu)已得到充分驗證，這(zhè)個技術具有開(kāi)發(fā)效率、跨平台、動态發(fā)布等方面(miàn)的優點，但缺點也明顯，性能(néng)和用戶體驗上都(dōu)很糟糕。接下來，我們重點對(duì) React Native 和 Flutter 進(jìn)行分析對(duì)比。

使用成(chéng)本

學(xué)習曲線

React Native 采用 js 語言，基于 React，對(duì)于前端工程師比較友好(hǎo)，上手成(chéng)本低。

Flutter 使用 Dart 作爲它的開(kāi)發(fā)語言，Dart 跟 Java 有點像，比較簡單，上手也容易。但畢竟是門新語言，多少會(huì)有些障礙。

接入成(chéng)本

如果是全新的項目，接入 React Native/Flutter 成(chéng)本較低，但對(duì)于混合開(kāi)發(fā)，接入到現有項目，將(jiāng)是一個巨大的工程。

我們需要考慮如何集成(chéng) SDK 到現有項目，原生頁面(miàn)與 React Native/Flutter 頁面(miàn)如何跳轉傳值，如何封裝原生模塊供與 React Native/Flutter 調用，如何打包 React Native/Flutter 與 bundle 集成(chéng)，如何部署發(fā)布，如何跨端聯調等。

成(chéng)熟度

React Native 是在 2015 年發(fā)布的，經(jīng)過(guò) 3 年多的發(fā)展，已經(jīng)比較成(chéng)熟。React Native 社區發(fā)展也很活躍，貢獻了大量的開(kāi)源代碼。

而 Flutter 是在今年 6 月份才推出發(fā)布預覽版，社區也剛剛發(fā)展。所以，Flutter 還(hái)需要時(shí)間。

以 Github 上打開(kāi)的 issue 的數量來看，截止到 2018-10-28，React Native 有 689 個，Flutter 有 4097，這(zhè)也說(shuō)明了 Flutter 目前尚不穩定。當然國(guó)内已經(jīng)開(kāi)發(fā)出了基于Flutter的應用。

兼容性

React Native 沒(méi)有真正實現跨平台，實際開(kāi)發(fā)中，我們需要去适配和橋接兩(liǎng)端的差異性，這(zhè)帶來了額外的開(kāi)發(fā)成(chéng)本。

Flutter 相對(duì)來說(shuō)做到了真正的跨平台，一套代碼在兩(liǎng)端運行基本沒(méi)有兼容性問題。

動态性

熱更新

React Native 支持熱更新。

Flutter 的機制目前還(hái)不支持熱更新功能(néng)，仍然需要發(fā)版。

性能(néng)

爲了更準确地測量數據，以下性能(néng)測試，均使用低端設備，跨平台開(kāi)發(fā)框架使用目前的穩定版本。

其中iOS端設備爲 iphone 6，

開(kāi)發(fā)環境，React Native 版本：0.50.4，Flutter 版本：0.9.4。

測試環境，Release 模式。

分别用 Flutter 和 React Native 實現同一個 Demo。Demo 隻有一個長(cháng)列表頁面(miàn)，展示随機生成(chéng)的 1 萬條數據，其中每行有兩(liǎng)個本地圖标，效果如下：

Flutter 并沒(méi)有達到官方宣稱的穩定 60幀/s，在快速劃動的時(shí)，還(hái)是出現丢幀的現象。平均下來 FPS 爲 50.5

React Native 在高性能(néng)場景下表現很糟糕，頁面(miàn)渲染跟不上滑動速度，多次出現白屏現象。

Android

Flutter

滑動很流暢，未出現白屏現象

React Native

滑動很流暢，但是多頁之後(hòu)頁面(miàn)渲染跟不上滑動速度，多次出現白屏現象

總體來說(shuō)，這(zhè)些跨平台方案，在性能(néng)上，在啓動速度，跟原生的應用都(dōu)有很大的差距。

開(kāi)發(fā)的建議

1。如果你的app已經(jīng)開(kāi)發(fā)了很多年，幾年下來已經(jīng)形成(chéng)一個龐大項目，可能(néng)不太适合進(jìn)行混合開(kāi)發(fā)，無論性能(néng)，還(hái)是開(kāi)發(fā)難度比較大。

2，如果你們做一個小型的app,作爲技術探索還(hái)是可以的。

3，對(duì)于創業公司來說(shuō)，跨平台的app開(kāi)發(fā)解決方案，确實可以提升産品的體驗。我們公司也嘗試的開(kāi)發(fā)了基于Flutter技術應用。

4.一個重要的一點，RN技術其實在app store進(jìn)行審核上也會(huì)遇到一些麻煩，蘋果是堅決制止熱更新功能(néng)的使用。