最火移動端跨平台方案盤點:React Native、weex、Flutter

最火移動端跨平臺方案盤點:React Native、weex、Flutter

如上圖,Flutter 主要分為 Framework 和 Engine,我們基於Framework 開發App,運行在 Engine 上。Engine 是 Flutter 的獨立虛擬機,由它適配和提供跨平臺支持,目前猜測 Flutter 應用程序在 Android 上,是直接運行 Engine 上 所以在是不需要Dalvik虛擬機(這是比kotlin更徹底,拋棄JVM的糾纏?)

如下圖,得益於 Engine 層,Flutter 甚至不使用移動平臺的原生控件, 而是使用自己 Engine 來繪製 Widget (Flutter的顯示單元),而 Dart 代碼都是通過 AOT 編譯為平臺的原生代碼,所以 Flutter 可以 直接與平臺通信,不需要JS引擎的橋接。同時 Flutter 唯一要求系統提供的是 canvas,以實現UI的繪製。咦?這麼想來,支持web端也沒問題吧!

最火移動端跨平臺方案盤點:React Native、weex、Flutter

在Flutter中,大多數東西都是widget,而widget是不可變的,僅支持一幀,並且在每一幀上不會直接更新,要更新而必須使用Widget的狀態。無狀態和有狀態 widget 的核心特性是相同的,每一幀它們都會重新構建,有一個State對象,它可以跨幀存儲狀態數據並恢復它。

Flutter 上 Android 自帶了 Skia,Skia是一個 2D的繪圖引擎庫,跨平臺,所以可以被嵌入到 Flutter的 iOS SDK中,也使得 Flutter Android SDK要比 iOS SDK小很多。

熱門話題: 為什麼Flutter會選擇 Dart作為開發語言?

八卦消息認為: “是因為 Drat 項目組就在 Flutter 隔壁而被選上”。

實際上真實的原因是: 早期的Flutter團隊評估了十多種語言,並選擇了Dart,因為它符合他們構建用戶界面的方式。

Dart之所以成為Flutter不可或缺的一部分,根本原因還是因為其具有以下特性:

1) Dart是AOT(Ahead Of Time)編譯的,編譯成快速、可預測的本地代碼,使Flutter幾乎都可以使用Dart編寫。這不僅使Flutter變得更快,而且幾乎所有的東西(包括所有的小部件)都可以定製;

2) Dart也可以JIT(Just In Time)編譯,開發週期異常快,工作流顛覆常規(包括Flutter流行的亞秒級有狀態熱重載);

3) Dart可以更輕鬆地創建以60fps運行的流暢動畫和轉場。Dart可以在沒有鎖的情況下進行對象分配和垃圾回收。就像JavaScript一樣,Dart避免了搶佔式調度和共享內存(因而也不需要鎖)。由於Flutter應用程序被編譯為本地代碼,因此它們不需要在領域之間建立緩慢的橋樑(例如,JavaScript到本地代碼)。它的啟動速度也快得多;

4) Dart使Flutter不需要單獨的聲明式佈局語言,如JSX或XML,或單獨的可視化界面構建器,因為Dart的聲明式編程佈局易於閱讀和可視化。所有的佈局使用一種語言,聚集在一處,Flutter很容易提供高級工具,使佈局更簡單;

5) 開發人員發現Dart特別容易學習,因為它具有靜態和動態語言用戶都熟悉的特性。

並非所有這些功能都是Dart獨有的,但它們的組合卻恰到好處,使Dart在實現Flutter方面獨一無二。因此,沒有Dart,很難想象Flutter像現在這樣強大。

有關此話題的詳細文章請見《 為什麼Flutter會選擇 Dart ? 》。

5、React Native、weex、Flutter 3種方案橫向對比

這算是互相傷害的環節了吧。(///▽///)

最火移動端跨平臺方案盤點:React Native、weex、Flutter

5.1 最終程序大小

以Android平臺為例,上面Apk大小是通過 react-native init、weex create 和 flutter 創建出的工程後,直接不添加任何代碼,打包出來的 release 簽名 apk 大小。從下圖可以看出,其中大比例都是在so庫。

最火移動端跨平臺方案盤點:React Native、weex、Flutter

5.2 社群支持

react native 作為 Facebook 主力開源項目之一,至今已有各類豐富的第三方庫,甚至如 realm、lottie 等開源項目也有 react native 相關的版本,社群實際無需質疑。當然,因為並完全正統開發平臺,第三庫的健壯性和兼容性有時候總是良莠不齊。

weex 其實有種生錯在國內的感覺。其實 weex 的設計和理念都很優秀,性能也不錯,但是對比 react native 的第三方支持,就顯得有點後媽養的。2016年開源至今,社區和各類文檔都顯得有點疲弱,作為跨平臺開發人員,大多時候肯定不會希望,需要頻繁的自己增加原生功能支持,因為這樣的工作一多,反而會與跨平臺開發的理念背道而馳,帶來開發成本被維護難度增加。

Flutter 目前還處理beta階段,但是谷歌的號召力一直很可觀,這一點無需質疑。

5.3 性能區別

理論上 flutter 的性能應該是最好的,但是目前實際體驗中,卻並沒有感受出來太大的差距,和 react native(0.5.0之後)、weex 在性能上個人體驗差異不是很大。當然,這裡並沒有實測渲染的毫秒時間和幀率數據。

5.4 其他區別

Weex的多頁面實現問題:

weex 在 native 端是不支持 的,這一點和 react-native 不同在與,如果在 native 需要實現頁面跳轉,使用 vue-router 將會慘不忍睹:返回後頁面不做特別處理時,是會空白一片。參考官方Demo playground,native 端 的採用 weex.requireModule('navigator') 跳轉 Activity 是才正確實現。

同時,weex中 navigator 跳轉的設計,也導致了多頁面的頁面間通訊的差異。weex在多頁面下的數據通訊,是通過url實現的,比如file://assets/dist/SecondPage.js?params=0,而vuex和vue-router在跨頁面是無法共用的;而 react native 在跨 Actvity 使用時,因為是同一個bundle文件,只要 manager 相同,那麼 router 和 store 時可以照樣使用的,數據通信方式也和當個 Actvity 沒區別。

項目模板:

weex 和 react native 模板代碼模式也不同。weex 的模板是從 cordova 模式修改過來的,根據platform需求,用命令添加固定模塊,而在 .gitignore 對 platforms 文件夾是忽略跟蹤。 react native 在項目創建時模版就存在了,特別是添加第三方插件原生端支持時,會直接修改模板代碼,git代碼中也會添加跟蹤修改。

6、未來趨勢展望

我們選擇框架的時候,很多時候會關注框架的成熟度和生命力不是麼(◐‿◑)。

6.1 React Native

“Airbnb 宣佈放棄使用 React Native,迴歸使用原生技術” : Airbnb 作為 react native 平臺上最大的支持者之一,其開源的lottie 同樣是支持原生和 react native。

Airbnb 在宣佈放棄的文中,也對 react native 的表示了很大量的肯定,而使得他們放棄的理由,其實主要還是集中於項目龐大之後的維護困難,第三方庫的良莠不齊,兼容上需要耗費更多的精力導致放棄。

ps: Lottie庫Airbnb出的是一個能夠幫助解析AE導出的包含動畫信息的json文件。這很好的解決了一個矛盾,設計師可以更專注的設計出各種炫酷的動畫效果,而開發只需要將其加入支持即可。

Facebook 正在重構 React Native,將重寫大量底層。在經歷了開源協議風波後,可以看出 Facebook 對於 react native 還是很看重的。

這些底層重構優化的地方,主要集中於:

1)首先: 改變線程模型。UI 更新不再需要在三個不同的線程上執行,而是可以在任意線程上同步調用 JavaScript 進行優先更新,同時將低優先級工作推出主線程,以便保持對 UI 的響應;

2)其次: 將異步渲染功能引入 React Native 中,允許執行多個渲染並簡化異步數據處理;

3)最後: 簡化橋接,讓它更快、更輕量。原生和 JavaScript 之間的直接調用效率更高,並且可以更輕鬆地構建調試工具,如跨語言堆棧跟蹤。

其他React Native相關文章:

從Android到React Native開發(一、入門)

從Android到React Native開發(二、通信與模塊實現)

從Android到React Native開發(三、自定義原生控件支持)

從Android到React Native開發(四、打包流程和發佈為Maven庫)

6.2 Weex

沒有死!阿里公開Weex技術架構,還開源了一大波組件。 2018年初的新聞可以看出,weex 的遭遇有點類似曾經的 Duddo(Dubbo因為內部競爭被阿里一度放棄維護),這波詐屍後 weex 被託管到了Apache,而github的 weexteam 如今也還保持著更新,希望後續能有多好的發展,拭目以待吧。

6.3 Flutter

Flutter 是 Google 跨平臺移動UI框架,Dart作為谷歌的親兒子在 Flutter 中使用,並且谷歌新操作系統 Fuchsia 支持 Dart,使用 Flutter 作為操作UI框架。這些集合到一起難免讓你懷疑 Android 是否要被谷歌拋棄的想法。

或者如今先 Android 等平臺上推廣 Flutter 與 Dart,就是為了以後跟好的過渡到新系統上,畢竟開發者是操作系統的生命源泉之一。而 Java 與 JVM 或者可以被谷歌完全拋開。當然,目前看起來 Flutter 貌似還缺少一些語法糖,嵌套下來的代碼有點不忍直視,或者到正式版之後,我們更能感受出它的美麗吧。

(原文鏈接: https://www.jianshu.com/p/7e0bd4708ba7 ,內容有改動)


分享到:


相關文章: