App的跨平臺開發,還香嗎?一篇文章深入為你剖析

跨平臺真的香嗎?

曾幾何時,以RN為代表的跨平臺的技術一經推出。得到無數掌聲。也為互聯網創業者看到新的希望。他們一度認為,跨平臺是萬能的。可以幫助他們解決一切問題,甚至一些技術經理,覺得不趕上跨平臺技術的大潮。就彷彿就落伍了。跨平臺的方案,一套又一套的推出。技術一代又一代演進,一直到今天,有人力推,有觀望,有人嗤之以鼻。這是為什麼呢。我將在下面的文章進行深入分析一下。

App的跨平臺開發,還香嗎?一篇文章深入為你剖析

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

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

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

App的跨平臺開發,還香嗎?一篇文章深入為你剖析

幾種技術方案

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 目前尚不穩定。當然國內已經開發出了基於Flutter的應用。

兼容性

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 萬條數據,其中每行有兩個本地圖標,效果如下:

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

App的跨平臺開發,還香嗎?一篇文章深入為你剖析

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

App的跨平臺開發,還香嗎?一篇文章深入為你剖析

Android

Flutter

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

React Native

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

總體來說,這些跨平臺方案,在性能上,在啟動速度,跟原生的應用都有很大的差距。

開發的建議

1。如果你的app已經開發了很多年,幾年下來已經形成一個龐大項目,可能不太適合進行混合開發,無論性能,還是開發難度比較大。

2,如果你們做一個小型的app,作為技術探索還是可以的。

3,對於創業公司來說,跨平臺的app開發解決方案,確實可以提升產品的體驗。我們公司也嘗試的開發了基於Flutter技術應用。

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


分享到:


相關文章: