360度全方位觀測：React Native與Flutter的跨平臺王位之爭

360度全方位觀測：React Native與Flutter的跨平臺王位之爭

做者 | Krissnawat Kaewsanmuang譯者 | 王強編輯 | Yonie

咱們身處科技高速發展的時代；互聯網突飛猛進，移動應用程序開發產業也在大踏步前進。多年來，移動應用的市場需求呈爆發式增加；衆多企業都在開發本身的移動應用程序，或者用於促銷本身的產品，或者用來向客戶提供更好的服務。

衆所周知，主導全球市場的兩大移動平臺分別是 iOS 和 Android。當一家企業決定開發本身的移動應用時，他們須要分別爲 iOS 和 Android 平臺部署功能相同的應用程序。爲此，開發人員須要學習兩個平臺的不一樣語言和開發流程，從而在兩大平臺上構建表現基本一致的應用版本。爲了解決這個問題，跨平臺框架應運而生，幫助開發者構建可同時適用於 iOS 和 Android 平臺的移動應用。現在最流行的兩大跨平臺應用開發框架就是 React Native 和 Flutter。

跨平臺框架發展歷史

谷歌和 Facebook 的競爭關係始於 Web 產業。谷歌的 AngularJS 是 Web 應用開發市場中最流行的 Javascript 框架之一。與此同時，由 Facebook 構建的 React 則是在 Web 應用程序開發流程中普遍應用的 JavaScript 庫。通常認爲 Angular JS 和 React JS 是 Web 社區中的一對熱門競爭對手。不久前，隨着市場對跨平臺移動應用程序的需求開始增長，Facebook 推出了用於構建跨平臺移動應用程序的 React Native 平臺。不久谷歌也推出了 Flutter 予以正面迴應。

React Native：2015 年 3 月 Facebook 正式發佈了 React Native。

Flutter：谷歌於 2019 年 5 月正式推出 Flutter。

Flutter 進入這一領域的時間較晚。在 Flutter 崛起以前，React Native 已經在移動應用程序開發社區中名聲大噪。

   架構   

選擇任何開發框架時必需要考慮不一樣框架的基礎架構，React Native 和 Flutter 在這方面有很大區別。

React Native：它基於 Facebook 本身使用的 Flux 架構。它的設計理念是一種稱爲 Javascript 橋的 JS 運行時環境。這種橋是用來同原生線程通訊的。RN 的代碼用 Javascript 編寫，而後在運行時編譯爲原生代碼。

Flutter：Flutter 使用 Dart 框架，後者又使用 Skia C++ 引擎。相比 React Native 的 Flux 架構，Dart 框架不須要任何橋接工具來通訊，由於它已經內置了所需的大部分組件。它的體積相對更大一些。Skia C++ 引擎提供了所需的各類協議、通道和組合。

與 Flutter 相比 React Native 的架構性能較差，由於後者使用了 Javascript 橋。Flutter 的架構五臟俱全，功能完善。

編程語言

對於開發人員來講，開發任何應用程序都首先要考慮所使用的編程語言。市面上存在許多編程語言，大多數開發人員也掌握多種編程語言的技能。下面來對比一下 React Native 和 Flutter 中使用的語言。

React Native：React Native 中使用的編程語言是 Javascript。Javascript 是世界上最流行的語言之一，也是萬維網（WWW）的 三大核心技術之一。

Flutter：相比之下，Flutter 使用的 Dart 語言既不受歡迎也沒那麼流行。Dart 語言誕生於 2011 年，由谷歌推出。Dart 很是簡單易學，由於它支持大多數面向對象的理念。

稍微懂一些 Web 開發的人就會了解 Javascript。它是最流行的語言之一。大多數 Web 框架，如 Angular、React、Vue 等也都是用 Javascript 構建的。但 Flutter 使用的 Dart 語言還很年輕。它在編程社區中不爲人知。

   安裝   

選擇好框架以後，開始工做的第一步就是安裝框架。一般來講這是一個使人頭痛的問題，對新手而言尤爲如此。React Native 和 Flutter 的安裝流程也是不同的。

React Native：開發人員須要使用 Node 包管理器（亦即 NPM）在 Windows 或 Linux 中安裝 React Native。熟悉 JavaScript 的開發人員天然也會熟悉 NPM，畢竟這是每天都會用到的工具。NPM 支持本地或全局安裝，具體取決於用戶的選擇。對於 macOS 來講，除了 NPM 還須要 Homebrew 包管理器。

Flutter：安裝 Flutter 不須要任何軟件包管理器。它能夠直接從 GitHub 下載到指定的平臺上。在 macOS 系統中咱們須要設置路徑。

使用 NPM 很是簡單。即便對不用 JavaScript 後臺開發人員來講，NPM 學起來也很容易，只需在命令行中輸入幾條命令便可。並且 NPM 在 Web 開發領域應用普遍，因此學會它是頗有意義的。相比之下，Flutter 須要先從 GitHub 下載而後才能安裝，有幾個安裝步驟可能會很麻煩。Flutter 還須要某種包管理器才能得到較好的安裝流程。

用戶界面組件和 API

跨平臺應用開發框架的重點在於平臺對 原生組件 的支持水平。原生組件是原生應用程序的關鍵所在。另外一大重要因素是 API，合格的框架應該提供良好的 API 用來訪問原生模塊。

React Native：與 React 同樣，React Native 也提供 UI 渲染和設備 API。它嚴重依賴 第三方模塊 來支持原生組件。React Native 的 UI 渲染功能的確很是出色，但它在很大程度上依賴於第三方庫。

Flutter：另外一方面，Flutter 擁有豐富的組件可選，如 UI 渲染組件、測試、設備 API 訪問、導航、有狀態管理等許多庫。它幾乎不須要任何第三方庫。此外，Flutter 還帶有用於 Material Design 的小部件。Flutter 還提供了一個名爲 Cupertino 的 IOS 風格小部件，用於建立渲染水平更高的應用程序。

React Native 在很大程度上依賴於第三方庫提供豐富的組件和 API 訪問，這一點有利有弊。開發人員能夠自由選擇所需的第三方庫，但這種選擇可能也會成爲一種負擔。而 Flutter 附帶了建立跨平臺移動應用程序所需的全部組件類型，開發人員使用 Flutter 時無需尋求任何第三方庫。

社區支持

任何技術的發展過程當中社區都起着相當重要的做用。現在，開發人員自發造成社區並分享他們正在研究的技術的相關知識。在社區中分享開發經驗和解決問題的技巧是頗有意義的。

React Native：自 2015 年正式發佈以來，React Native 蓬勃發展，廣受歡迎。GitHub 上的 React Native 社區很是龐大，每一年都會舉辦不少線上 / 線下論壇和研討會。

Flutter：Flutter 最先於 2017 年推出，相比之下還很年輕。它的社區規模還不是很大，但它正在快速增加。谷歌每一年都花很大力氣推廣這個平臺，也舉辦不少論壇和研討會。

React Native 很是流行，應用普遍，已經擁有了一個成熟的社區。而 Flutter 還很年輕，沒那麼受歡迎。但 Flutter 的社區正在快速成長，谷歌在全力推廣它。

   測試   

測試是全部開發流程的重要組成部分。任何嚴肅的技術都帶有測試支持。在跨平臺移動應用程序開發領域，單元測試、集成測試和 UI 級別的測試等都很是重要。

React Native：React Native 沒有不少測試選項。它的確支持初級單元測試，可是當涉及集成和 UI 級別測試時，React Native 仍是須要依賴第三方庫。Appium 和 Detox 是 React Native 應用程序經常使用的兩種測試工具。

Flutter：Flutter 爲單元和集成測試提供了豐富的工具。它還提供了用於測試應用程序的小部件和 UI 的工具。此外，Flutter 針對應用測試等文檔支持也很完善。

React Native 依舊要依賴第三方庫來作測試，而 Flutter 則提供了許多優秀的測試工具。在測試 Flutter 應用程序時，開發人員不須要尋求第三方庫的支持。

CI/CD 支持

不論是什麼類型的應用程序，不管是 Web 平臺也好仍是移動平臺也罷，都必須具有持續集成和持續交付的能力。CI/CD 能夠用來持續接收反饋並儘可能避免錯誤。但若是沒有完善的文檔和資源支持，持續集成和持續交付用起來會很是麻煩。

React Native：React Native 的文檔一直都不怎麼樣，並且在持續集成和持續交付方面根本就沒有官方文檔。對於開發人員來講，沒有合適的文檔就很難使用 CI/CD 了。還好互聯網上總有一些資源可供選擇。

Flutter：如前所述，Flutter 提供的文檔大都很出色。Flutter 的文檔專門有一部分具體介紹持續集成和持續交付的設置。

設置 CI/CD 很依賴文檔和資源支持。React Native 沒有提供任何官方文檔，而 Flutter 爲 CI/CD 單獨提供了詳細指南，不只對新手很友好，對有經驗的開發者來講也很方便。

流行程度

一項技術受歡迎的程度是影響開發者選擇的一個主要因素。毫無疑問，React Native 和 Flutter 都是最受歡迎的跨平臺移動應用程序開發框架，可是哪一個更受歡迎呢？

React Native：React Native 在 GitHub 上拿到了超過八萬顆星。Github 上的問題還不到六百個。2019 年的今天，React Native 是很是受歡迎的技術，相比幾年前影響力加強了不少。

Flutter：Flutter 比 React Native 年輕不少，但它也在 GitHub 上拿到了超過七萬兩千顆星，只比 React Native 少八千。顯然 Flutter 的影響力增加很是迅速，但它在 GitHub 上的問題有超過五千個，比 React Native 多不少。

React Native 在跨平臺移動開發社區很是受歡迎，而 Flutter 的影響力也在不斷增加。但 Flutter 畢竟更年輕，使用的仍是沒那麼流行的編程語言，因此處境有點差。

   結論   

在跨平臺移動應用程序開發領域，React Native 和 Flutter 都是最好的選擇之一。二者都有本身的優勢和缺點。React Native 使用了 Javascript 而且與 React JS 有許多類似之處，因此有許多開發人員選擇了它而非 Flutter。Flutter 很年輕，使用的是較新的編程語言。可是 Flutter 帶有許多 React Native 缺乏的內置功能。React Native 很大程度上依賴於第三方庫，這一點有利有弊。它把選擇權都交給了開發人員。

毫無疑問，這兩種技術在將來都會是熱門選擇。

在此處查看React Native 文檔: https://facebook.github.io/react-native/docs/getting-started.html

在此處查看 Flutter 文檔: https://flutter.dev/docs

英文原文: https://kriss.io/react-native-vs-flutter-2019-comparison/

 活動推薦

GMTC 全球大前端技術大會首次落地華南，走入大灣區深圳。

往屆咱們請到了來自 Google、Twitter、Instagram、阿里、騰訊、字節跳動、百度、京東、美團等國內外一線公司的頂級前端專家，分享了關於小程序、Flutter、Node、RN、前端框架、前端安全、前端工程化、移動 AI 等 50 多個熱門技術專題。目前深圳站正式啓動，7 折最低價售票通道已經開啓，詳細請諮詢：13269078023（同微信）。