跨平臺(tái)真的香嗎？
曾幾何時(shí)，以RN為代表的跨平臺(tái)的技術(shù)一經(jīng)推出。得到無數(shù)掌聲。也為互聯(lián)網(wǎng)創(chuàng)業(yè)者看到新的希望。他們一度認(rèn)為，跨平臺(tái)是萬能的?？梢詭椭麄兘鉀Q一切問題，甚至一些技術(shù)經(jīng)理，覺得不趕上跨平臺(tái)技術(shù)的大潮。就仿佛就落伍了?？缙脚_(tái)的方案，一套又一套的推出。技術(shù)一代又一代演進(jìn)，一直到今天，有人力推，有觀望，有人嗤之以鼻。這是為什么呢。我將在下面的文章進(jìn)行深入分析一下。
APP 跨平臺(tái)開發(fā)是目前比較熱門的方向，采用 web 框架開發(fā)，以 web 的開發(fā)體驗(yàn)快速構(gòu)建應(yīng)用，提高了迭代的效率。同時(shí) web 開發(fā)方式大多使用動(dòng)態(tài)語言，能夠繞過原生開發(fā)限制動(dòng)態(tài)加載，因此具備熱加載、熱更新的能力。用跨平臺(tái)技術(shù)開發(fā)的應(yīng)用無論性能還是用戶體驗(yàn)都很接近原生應(yīng)用。
Flutter 是 Google 新推出的一款幫助開發(fā)者開發(fā)高質(zhì)量原生應(yīng)用的全新APP跨平臺(tái) UI 框架，它的目標(biāo)是解決了移動(dòng)開發(fā)中跨平臺(tái)、高性能問題，一經(jīng)推出就受到開發(fā)者的廣泛關(guān)注。
下面將介紹幾大流行的跨平臺(tái)開發(fā)技術(shù)，并從使用成本、開發(fā)效率、一致性、動(dòng)態(tài)性和性能等方面作更深入的分析，提供更具體的參考。
幾種技術(shù)方案
webview
利用 安卓和 iOS 上的 webview 容器，APP 能夠執(zhí)行 html、css 和 js 腳本，展示 web 頁面。如果需要原生功能就添加 bridge 供 Javascript 調(diào)用。具有開發(fā)效率高、跨平臺(tái)、支持動(dòng)態(tài)發(fā)布等特點(diǎn)，它是目前應(yīng)用最廣泛最成熟的一種方案。
React Native/Weex
React Native 和 Weex 這類方案，使用 javascript 來構(gòu)建界面，在運(yùn)行時(shí)翻譯成原生組件展示出來，實(shí)際上所有界面都是用原生組件。支持跨平臺(tái)，性能和用戶體驗(yàn)高于 webview，接近原生應(yīng)用，是當(dāng)前熱門的跨平臺(tái)開發(fā)技術(shù)。
Flutter
Flutter 使用了一種全新的方式，自己重寫了一個(gè)平臺(tái)無關(guān)的渲染引擎，它只提供畫布，所有的 UI 組件、渲染邏輯都是在這個(gè)引擎上處理的。最大程度上保證了各平臺(tái)下的一致性，同時(shí)也擁有媲美原生的高性能體驗(yàn)。
注：基于 webview 的框架目前已廣泛在 APP 開發(fā)中應(yīng)用，各種利弊都已得到充分驗(yàn)證，這個(gè)技術(shù)具有開發(fā)效率、跨平臺(tái)、動(dòng)態(tài)發(fā)布等方面的優(yōu)點(diǎn)，但缺點(diǎn)也明顯，性能和用戶體驗(yàn)上都很糟糕。接下來，我們重點(diǎn)對(duì) React Native 和 Flutter 進(jìn)行分析對(duì)比。
使用成本
學(xué)習(xí)曲線
React Native 采用 js 語言，基于 React，對(duì)于前端工程師比較友好，上手成本低。
Flutter 使用 Dart 作為它的開發(fā)語言，Dart 跟 Java 有點(diǎn)像，比較簡(jiǎn)單，上手也容易。但畢竟是門新語言，多少會(huì)有些障礙。
接入成本
如果是全新的項(xiàng)目，接入 React Native/Flutter 成本較低，但對(duì)于混合開發(fā)，接入到現(xiàn)有項(xiàng)目，將是一個(gè)巨大的工程。
我們需要考慮如何集成 SDK 到現(xiàn)有項(xiàng)目，原生頁面與 React Native/Flutter 頁面如何跳轉(zhuǎn)傳值，如何封裝原生模塊供與 React Native/Flutter 調(diào)用，如何打包 React Native/Flutter 與 bundle 集成，如何部署發(fā)布，如何跨端聯(lián)調(diào)等。
成熟度
React Native 是在 2015 年發(fā)布的，經(jīng)過 3 年多的發(fā)展，已經(jīng)比較成熟。React Native 社區(qū)發(fā)展也很活躍，貢獻(xiàn)了大量的開源代碼。
而 Flutter 是在今年 6 月份才推出發(fā)布預(yù)覽版，社區(qū)也剛剛發(fā)展。所以，F(xiàn)lutter 還需要時(shí)間。
以 Github 上打開的 issue 的數(shù)量來看，截止到 2018-10-28，React Native 有 689 個(gè)，F(xiàn)lutter 有 4097，這也說明了 Flutter 目前尚不穩(wěn)定。當(dāng)然國(guó)內(nèi)已經(jīng)開發(fā)出了基于Flutter的應(yīng)用。
兼容性
React Native 沒有真正實(shí)現(xiàn)跨平臺(tái)，實(shí)際開發(fā)中，我們需要去適配和橋接兩端的差異性，這帶來了額外的開發(fā)成本。
Flutter 相對(duì)來說做到了真正的跨平臺(tái)，一套代碼在兩端運(yùn)行基本沒有兼容性問題。
動(dòng)態(tài)性
熱更新
React Native 支持熱更新。
Flutter 的機(jī)制目前還不支持熱更新功能，仍然需要發(fā)版。
性能
為了更準(zhǔn)確地測(cè)量數(shù)據(jù)，以下性能測(cè)試，均使用低端設(shè)備，跨平臺(tái)開發(fā)框架使用目前的穩(wěn)定版本。
其中iOS端設(shè)備為 iphone 6，
開發(fā)環(huán)境，React Native 版本：0.50.4，F(xiàn)lutter 版本：0.9.4。
測(cè)試環(huán)境，Release 模式。
分別用 Flutter 和 React Native 實(shí)現(xiàn)同一個(gè) Demo。Demo 只有一個(gè)長(zhǎng)列表頁面，展示隨機(jī)生成的 1 萬條數(shù)據(jù)，其中每行有兩個(gè)本地圖標(biāo)，效果如下：
Flutter 并沒有達(dá)到官方宣稱的穩(wěn)定 60幀/s，在快速劃動(dòng)的時(shí)，還是出現(xiàn)丟幀的現(xiàn)象。平均下來 FPS 為 50.5
React Native 在高性能場(chǎng)景下表現(xiàn)很糟糕，頁面渲染跟不上滑動(dòng)速度，多次出現(xiàn)白屏現(xiàn)象。
Android
Flutter
滑動(dòng)很流暢，未出現(xiàn)白屏現(xiàn)象
React Native
滑動(dòng)很流暢，但是多頁之后頁面渲染跟不上滑動(dòng)速度，多次出現(xiàn)白屏現(xiàn)象
總體來說，這些跨平臺(tái)方案，在性能上，在啟動(dòng)速度，跟原生的應(yīng)用都有很大的差距。
開發(fā)的建議
1。如果你的app已經(jīng)開發(fā)了很多年，幾年下來已經(jīng)形成一個(gè)龐大項(xiàng)目，可能不太適合進(jìn)行混合開發(fā)，無論性能，還是開發(fā)難度比較大。
2，如果你們做一個(gè)小型的app,作為技術(shù)探索還是可以的。
3，對(duì)于創(chuàng)業(yè)公司來說，跨平臺(tái)的app開發(fā)解決方案，確實(shí)可以提升產(chǎn)品的體驗(yàn)。我們公司也嘗試的開發(fā)了基于Flutter技術(shù)應(yīng)用。
4.一個(gè)重要的一點(diǎn)，RN技術(shù)其實(shí)在app store進(jìn)行審核上也會(huì)遇到一些麻煩，蘋果是堅(jiān)決制止熱更新功能的使用。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。