Flutter 與 RN （跨平台開發）

Flutter是什么

Flutter 由 Google 的工程師團隊打造，用於創建高性能、跨平台的移動應用。Flutter 針對當下以及未來的移動設備進行優化，專注於 Android and iOS 低延遲的輸入和高幀率。

Flutter 可以給開發者提供簡單、高效的方式來構建和部署跨平台、高性能移動應用；給用戶提供漂亮、快速、jitter-free 的 app 體驗。

Beta1版本於2018年2月27日在2018 世界移動大會公布 ;Beta2版本2018年3月6日發布;1.0版本於2018年12月5日(北京時間)發布 .

Flutter 的主要組件:

• 一個高度優化， mobile-first 2D 渲染引擎 (保護對 text 優秀的支持 )

• 一個 functional-reactive 框架 (可選的，你也可以引入你自己的框架)

• 一組 Material Design 部件 (可選的，你也可以引入你自己的部件)庫 ，工具，和一個用於 Atom 的插件。

• Flutter的開發語言是Dart

一個開源的 Flutter 應用實例：FlutterOSC

RN（React Native）是什么

 React Native (簡稱RN)是Facebook於2015年4月開源的跨平台移動應用開發框架，是Facebook早先開源的JS框架 React 在原生移動應用平台的衍生產物，支持iOS和安卓兩大平台。RN使用Javascript語言，類似於HTML的JSX，以及CSS來開發移動應用，因此熟悉Web前端開發的技術人員只需很少的學習就可以進入移動應用開發領域。

 

React Native使你能夠在Javascript和React的基礎上獲得完全一致的開發體驗，構建世界一流的原生APP。

React Native着力於提高多平台開發的開發效率 —— 僅需學習一次，編寫任何平台。(Learn once, write anywhere)

Facebook已經在多項產品中使用了React Native，並且將持續地投入建設React Native。

React Native主要特性如下：

• 原生的iOS組件

React Native主張“Learn once, write everywhere”而非其他跨平台工具一直宣揚的“Write once, run everywhere”。通過React Native，開發者可以使用UITabBar、UINavigationController等標准的iOS平台組件，讓應用界面在其他平台上亦能保持始終如一的外觀、風格。

• 異步執行

JavaScript應用代碼和原生平台之間所有的操作都采用異步執行模式，原生模塊使用額外線程，開發者可以解碼主線程圖像、后台保存至磁盤、無須顧忌UI等諸多因素直接度量文本設計布局。

• 觸摸處理

React Native引入了一個類似於iOS上Responder Chain響應鏈事件處理機制的響應體系，並基於此為開發者提供了諸如TouchableHighlight等更高級的組件。

• React Native的開發語言是React

移動端跨平台開發技術演進

現在主流的移動開發平台是Android和iOS，之前還有過windows phone，每個平台的開發技術都不太一樣。大家都是針對每個平台開發應用。自然有人就會覺得這樣效率低下，想進行跨平台開發。從最開始的Hybrid混合開發技術，到RN的橋接技術，到現在新興的Flutter技術，跨平台開發技術一直在演進。

以往最早的Hybrid開發，主要依賴於WebView。但是WebView是一個很重的控件，很容易產生內存問題，而且復雜的UI在WebView上顯示的性能不好。react-native技術拋開了WebView，利用JavaScriptCore來做橋接，將js調用轉為native調用，只犧牲了小部分性能獲取的跨平台開發，這是一大進步。所以現在react-native很流行的原因。

 

上圖react-native框架原理

 

Flutter實現跨平台采用了更為徹底的方案。它既沒有采用WebView也沒有采用JavaScriptCore，而是自己實現了一台UI框架，然后直接系統更底層渲染系統上畫UI。所以它采用的開發語言不是JS，而Dart。據稱Dart語言可以編譯成原生代碼，直接跟原生通信。

上圖是Flutter框架原理圖

 

Flutter將UI組件和渲染器從平台移動到應用程序中，這使得它們可以自定義和可擴展。Flutter唯一要求系統提供的是canvas，以便定制的UI組件可以出現在設備的屏幕上，以及訪問事件（觸摸，定時器等）和服務（位置、相機等）。這是Flutter可以做到跨平台而且高效的關鍵。另外Flutter學習了RN的UI編程方式，引入了狀態機，更新UI時只更新最小改變區域。

系統的UI框架可以取代，但是系統提供的一些服務是無法取代的。Flutter在跟系統service通信方式，采用的是一種類似插件式的方式，或者有點像遠程過程調用RPC方式。這種方式據說也要比RN的橋接方式高效。

Flutter與RN異同

簡單總結一下Flutter與RN的異同。

• 都實現了移動開發跨平台
• 界面的編寫都很類型，采用響應式視圖，維護了一個狀態機，只更新改變的最小區域界面
• 都支持熱重載hot reload，開發調試非常方便
• 調用系統的service仍然需要封裝接口，仍然還是需要懂得native開發
• RN采用JS語言開發，基於React，受眾更多。Dart語言受眾小
• Flutter的UI框架性能貌似更高一些，但是直接丟棄了原生UI框架。而RN還是可以自己利用原生框架，兩個各有好處。Flutter的兼容性高，RN可以利用原生已有的優秀UI
• Flutter的第三方庫還很少，RN發展的早，雖然也還不完善，但是比Flutter好
• RN的界面布局更像網頁布局，而Flutter的布局更像native布局
• Flutter在跨平台這方面做得更徹底一些

Flutter、RN、原生對比

認知：

比較內容	Flutter	RN
平台實現	通過Dart虛擬機編譯成機器碼	Virtual Dom映射到原生View，通過ART虛擬機編譯成機器碼
繪制引擎	Skia	JS V8+Skia/OpenGL ES
使用語言	Dart	React
上手難度	一般	難
框架程度	重	較重
社區	豐富，谷歌力捧	活躍，FaceBook支持
軟件發布	支持熱更新（暫未開放）	支持熱更新

 

1、包體積原生比較小，Flutter和RN不相上下（Ios系統需要引入Skia庫，最終包體積Flutter會明顯大於RN），由於Flutter和RN框架中需要一些C++依賴庫，導致包體積比原生大了很多。
2、啟動時間，Flutter（冷熱啟動時間）>RN=原生
3、內存占用，在高端手機上，flutter占用內存是大於RN的，但是低端手機Flutter的內存占用會低於RN，RN內存占用不穩定，頁面剛生成的時候內存占用會高一點, 之后緩慢回落。
4、CPU占用，RN明顯高於Flutter和原生，這會導致手機性能降低、耗電量增加、發熱更厲害
5、主觀感受，Flutter要比RN更加流暢，體驗感更好，但是和原生仍有不小差距，不過Flutter還很年輕，官方宣稱其性能會接近原生，甚至超過原生體驗，隨着Google不斷的改進相信在不遠的將來會實現這個可能。