Flutter vs React Native，誰纔是跨平臺應用開發的最佳利器？

隨着移動應用的需求愈來愈大，許多企業開始將焦點轉移到移動應用的開發上。經過引入新技術、新平臺和新框架，移動應用開發者可以建立劃時代的移動應用。

近年來，跨平臺應用開發很是流行，經過跨平臺的應用開發者編寫一份代碼就能同時爲 Android、iOS、Windows 等多個平臺同時開發應用程序。

在衆多的開發利器中，React Native 是著名的跨平臺移動應用開發工具之一，它是由 Facebook 開發的，且是目前的最爲活躍的開發者社區之一。

不過 Google 在 2017 年的 Google I/O 開發者大會上發佈了他們本身的軟件開發工具（SDK）：Flutter。今天，咱們就來比較一下這兩個框架。

1.Flutter 是什麼?

Flutter 的設計目標是在 iOS 和 Android 系統上建立高質量界面，它是 Google 的移動開發框架。同時，它也是免費的開源工具，能和現有代碼共同使用，甚至在最近愈來愈受歡迎。

Flutter 的優點在於：

• 快速開發

Flutter 擁有熱加載功能，只需幾毫秒就能運行應用程序。它的自定義窗體功能也能夠用來建立原生界面。

• 表述式、靈活的設計

快速交付的功能着重於原生的最終用戶體驗。多層的架構能夠實現徹底的定製化，從而得以實現靈活的設計和快速的渲染。

• 原生性能

窗體覆蓋了全部基本的平臺之間的差別，同時擁有滾動、導航、圖標和字體等功能，同時爲 iOS 和 Android 提供了完整的原生性能。

2.

React

React 是個 JavaScript 庫，其具備高效、靈活的特性，並且使用聲明式來編寫用戶界面。開發者能夠經過小型、獨立的代碼片斷（所謂的「組件」）來構成複雜的 UI。

3.

React 的功能

• 組件——能幫你在大型項目中維護代碼。React 的核心就是組件。
• 單向數據流和 Flux——React 利用 Flux 實現了單向數據流，這是一種應用程序架構，能保證數據流是單向的。

4.Flutter 和 React Native 的比較

5.Flutter 架構

6.React Native 架構

7.React Native 的社區支持

React Native 由 Facebook 於 2013 年開發。最多見的問題的解決方案都列在了 React Native 的開發文檔和指南中。社區論壇中還有許多開發者，對用戶天天遇到的問題作出了關鍵的貢獻，並輔助用戶解決這些問題。

經過閱讀貢獻者手冊，查閱 Roadmap，分析其餘人的工做，你也能夠爲社區作出貢獻。你也能夠尋找在社區中被詢問次數最多的、最流行的功能。

8.Flutter 的社區支持

Flutter 文檔足夠讓你開始進行應用程序開發了。

Flutter Gallery 在其網站上演時了全部 Flutter 組件，你也能夠參照 Flutter 的 GitHub 中的實現。

Flutter 的網絡不像 React Native 那麼強大。可是，Google 的 Flutter 團隊提供的幫助很是好。

他們提供了許多方法讓你提交問題。

9.技術棧

React Native 是個 JavaScript 庫，而 Flutter 是個 SDK，使用的是徹底不一樣的編程語言 Dart。

10.JavaScript

JavaScript 最初的建立目的只是 Web 開發，但如今已經有了大量的其餘函數庫，已經變得很是龐大，不多有地方沒有它的身影。

React Native 將動態的 JavaScript 代碼在運行時編譯成原生視圖。其他的代碼運行在應用程序內部封裝的虛擬機內。

11.Dart

Dart 是個通用語言，由 Google 開發。它能夠用來構建網站、服務器、移動應用，也能用於物聯網設備。

Dart 受到了許多語言的影響。最強的影響來自 Java。Java 程序員能夠很容易注意到二者之間的類似性。

Dart 是個面向對象的編程語言，支持抽象、封裝、繼承、多態等。

Dart 程序能夠在如下兩種模式下運行：

• 檢查模式

這種模式會啓用動態類型和斷言。若是代碼中提供了靜態類型，就能夠打開類型斷言。在開發和測試階段建議使用檢查模式，有助於捕捉代碼中類型不匹配的錯誤。

• 生產模式

這是全部 Dart 程序的默認模式。它能讓程序運行得更快。

儘管 Dart 提供了不少社區支持，但它仍然比不過 JavaScript 等其餘主流語言，所以連知道 Dart 的人都不多。

Flutter 的框架使用函數式反應式編程，它受到了 React 的啓發。

雖然 Flutter 是用 Dart 寫的，但它借鑑了 React 最好的功能，幫助開發者創建漂亮、跨平臺的移動應用。

12.React Native 的用戶界面

使用 React Native 的體驗很像使用不帶 CSS 框架的 HTML。

與 Flutter 應用不一樣，使用 React Native 時，必須使用一些第三方庫，由於 React Native 自己不提供UI組件

咱們須要使用如 React Native、React Native Material Design、Shoutem 和其餘 UI 庫。

13.Flutter 的用戶界面

Flutter 有本身的 UI 組件，其引擎能將組件渲染到 Android 和 iOS 平臺上。大多數組件都符合 Material Design 的標準。

Flutter 內置的組件能夠用來開發應用程序的界面。這些組件叫作窗體（widget）。這裏咱們只需選擇正確的窗體並傳遞正確的屬性，就能得到須要的界面。

Flutter 中的每一個窗體都由本身的屬性，能夠嵌套在其餘組件中。窗體也能調用父組件的屬性。

在 React Native 中，使用原生模塊和用戶界面組件只需橋接就能夠。但在 Flutter 中沒法這樣作，由於 Flutter 有本身的渲染引擎。

這裏是 Flutter 窗體（flutter.io/widgets/）的一…

14.React Native 中的樣式

React Native 中的樣式用 JavaScript 定義。全部 React Native 的核心組件都支持一個名爲 style 的屬性。

樣式名稱和值和 Web 上的 CSS 很類似。

惟一的區別就是，在 React Native 中的樣式名稱是用大小寫混合的。因此要定義背景色，須要使用 backgroundColor，而不是 background-color。

15.Flutter 中的樣式

Flutter 中的樣式用法跟 React Native 不太同樣。下面這段 React Native 代碼定義了字體樣式和其餘文本屬性，都由 CSS 處理。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
export default class LotsOfStyles extends Component {
 render() {
 return (
 <View style={styles.greybox}>
 <Text>Lorem Ipsum</Text>
 </View>
 );
 }
}
const styles = StyleSheet.create({
 greybox: {
 backgroundColor: #e0e0e0,
 width: 320px;
 height: 240px;
 font: 900 24px Georgia;
 }
})
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
複製代碼

若是用 Flutter 實現同一段代碼，將會是這樣：

var container = new Container( // grey box
 child: new Text(
 "Lorem ipsum",
 style: new TextStyle(
 fontSize: 24.0
 fontWeight: FontWeight.w900,
 fontFamily: "Georgia",
 ),
 ),
 width: 320.0,
 height: 240.0,
 color: Colors.grey[300],
);
複製代碼

16.Flutter 的優勢和缺點

咱們來更仔細低看看它的優缺點。

使用 Flutter 的五個優勢

• 寫代碼更快

Flutter 意味着更快、更動態的移動應用開發。代碼中的改變能夠當即在應用程序中看到，這就是所謂的熱加載，只需花幾毫秒，能幫助開發者更快地添加功能、修復 Bug 和試驗各類新東西。

熱加載也十分適合開發者和設計師之間的合做，能夠試驗各類應用程序的外觀並當即看到效果。

換句話說，Flutter 可讓設計師和測試者一塊兒與開發者在 UI 上工做。

絕大多數代碼變動均可以熱加載。但有一些變動須要從新啓動應用，這些是熱加載的限制。

相比之下，在原生應用程序開發時，整個項目須要從新構建，這須要花很長時間，有時甚至會花上幾分鐘。

• 一段代碼，兩個平臺

開發者只需寫一次代碼，就能在 Android 和 iOS 兩個平臺上運行。

Flutter 並不依賴於平臺，由於它有本身的窗體和設計，因此你能夠在兩個平臺上擁有一樣的應用。固然，須要時你也能夠作出不一樣的應用。

• 更少的測試

兩個平臺一樣的應用意味着須要的測試更少。QA 過程能夠更快，由於只須要測試一份代碼。開發者只須要編寫一份測試代碼。

QA 專員的工做也會變少，由於他們只須要測試一個應用。若是不一樣平臺上的應用有差別，那麼這些差別須要在各自的平臺上測試。

• 招用戶喜歡的設計

Flutter 的設計方式使得開發者很容易建立本身的窗體，或定製已有的窗體。你能夠瀏覽許多 Flutter 窗體的例子（flutter.io/widgets/）、M… Design 的例子（flutter.io/widgets/mat… Cuptertino 窗體的例子（flutter.io/widgets/cup…

• 舊設備上也有一樣的應用界面

即便在舊版本的 Android 和 iOS 平臺上，應用的外觀也是同樣的。適配舊設備不須要額外的工做。Flutter 能在 Android Jelly Bean 以後的版本和 iOS 8 以後的版本上運行。

缺點

• Flutter 依然是 Beta 狀態

在 2018 年 4 月，Flutter 發佈了 beta 2 版。Flutter 團隊尚未發佈穩定版本。

「咱們仍然在嘗試將 API 穩定下來，同時根據用戶的反饋對系統的各個部分進行改進。一些關鍵功能還沒法用於大範圍的應用。」Flutter 官網如是說。

這就是說，之後還會有更多的改變和改進。

• 庫和支持

很不錯，但用於原生開發還略顯不足。

Flutter 很優秀，有許多函數庫提供了不少功能。

可是，Flutter 依然很年輕，所以不必定能在函數庫中找到全部須要的功能。也就是說，開發者須要自行建立這些功能，有可能會花不少時間。

• 持續集成的支持

由於 Flutter 依然是 Beta 狀態，它尚未受到 Travis、Jenkins 等 CI 平臺的普遍支持。

爲了實現自動構建、自動測試和自動部署，開發團隊必須開發並維護本身的腳本。

17.React Native 的問題

React Native 也只須要一份代碼（JavaScript）。它的視圖組件在 iOS 和 Android 中的行爲不同。

儘管 React Native 有大量的社區支持，爲咱們提供了許多優秀的插件和庫，但這也意味着這些庫可能會和已有項目衝突。

18.Flutter 的問題

若是你習慣了 JSX 環境，Fluttter 的 UI 代碼看上去有點無聊，並且在 UI 變得複雜以後代碼的可讀性也會變差。

與 React Native 相比，Flutter 的資源彷佛並很少。主要緣由就是 Flutter 的基礎尚未 React Native 那麼穩定。但做爲 Beta 版，Flutter 的資源已經有了巨大的成長。

19.結論

React Native 和 Flutter 都有本身的優缺點。React Native 有更多的社區支持，Flutter 依然很年輕，而 React Native 已經鋪好了路。

Flutter 看上去很吸引人，但還須要一些改進，還須要一些時間才能展現出潛力。

按期分享Android高級技術和麪試分享，歡迎關注，喜歡文章的朋友點個贊叭~