2021年，跨端是否已成趨勢？Android 開發還有必要學 Flutter 嗎？

語言: CN / TW / HK
時間 2022-07-05 20:15:19

theme: smartblue

由於手機APP的執行受不同作業系統的限制，目前大多數的移動APP應用開發仍然需要針對不同的系統環境進行單獨的開發。不過，為了降低開發成本、提高程式碼複用率，減少開發者對多個平臺差異適配的工作量一直是跨平臺開發框架追求的目標。

但是目前，很多開發者還不不確定應該選擇哪種技術來快速且低成本的開發應用程式，不過如果你熟知跨平臺的發展歷史，那麼2021年可供大家選擇的跨平臺方案主選項只有兩個：Flutter或者React Native。

在正式進行對比之前，首先需要明確一點，即Flutter和React Native這兩個框架都是構建跨平臺移動應用程式的優質框架，但有時做出正確的決定取決於業務使用的角度。因此，我們選取了九個重要的引數，用於兩者的比較：

  • 由誰提供技術支援？
  • 框架的市場份額佔比。
  • Dart Vs JavaScript
  • 技術架構
  • 效能
  • 是否對開發者友好，便利性和社群支援
  • UI元件和定製
  • 程式碼的可維護性
  • 開發者的工作成本

技術支援：谷歌 VS Facebook

Flutter與React Native兩大框架背後都站著科技巨頭，分別是谷歌和Facebook，所以從這個角度來看兩者未來會在競爭中變得更加完善，畢竟他們背後都自己的利益鏈。

首先，我們來看一下Flutter，Flutter是2017年由谷歌正式推出，是一個先進的應用程式軟體開發工具包（SDK），包括所有的小部件和工具，理論上可以讓開發者的開發過程更容易和更簡單。廣泛的小工具選擇使開發人員能夠以一種簡單的方式建立和部署視覺上有吸引力的、原生編譯的應用程式，用於多個平臺，包括移動、網路和桌面，都使用單一的程式碼庫。因此，Flutter應用程式開發公司有更好的機會，可以確保你更快、更快、更可靠的應用程式開發解決方案。

事實上，Flutter早再2015年Dart開發者峰會上便以“Sky”的身份亮相，Flutter具有幾大買點：首先它是免費的，而且是開源的；其次，該架構基於流行的反應式程式設計，因為它遵循與Reactive相同的風格；最後，歸功於小部件體驗，Flutter應用程式有一個令人愉快的UI，整體來說轉化為應用程式看起來和感覺都不錯。

我們再來看一下React Native，React Native也是Facebook在2015年推出的一個跨平臺原生移動應用開發框架。React Native主要使用的是JavaScript開發語言，對於使用同一程式碼庫為iOS和Android開發應用程式來說非常方便。此外，它的程式碼共享功能可以更快的開發和減少開發時間。像其他跨平臺技術一樣，Flutter允許開發者使用相同的程式碼庫來構建獨立的應用程式，因此，相比原生應用程式更容易維護。

當然，Flutter和React Native都支援熱過載功能，允許開發者直接在執行中的應用程式中新增或糾正程式碼，而不必儲存應用程式，從而加速了開發過程。除此之外，React Native是基於一種非常流行的語言--JavaScript，開發者更易上手；React元件包裹著現有的原生代碼，並通過React的宣告性UI正規化和JavaScript與本地API進行互動，React Native的這些特點使開發人員的工作速度大大加快。

市場份額：五五開的格局正在改變

整體上來說，這兩者的市場份額是十分相近的，但Flutter在最近有後來居上之勢。2019年和2020年全球軟體開發公司使用的最佳跨平臺移動應用開發框架時，其結果是42%的開發者更願意留在React Native，而39%的開發者選擇了Flutter。根據StackOverFlow的資料，68.8%的開發者喜歡使用Flutter進行進一步的開發專案，而57.9%的開發者對使用React Native技術進行應用開發進一步表現出興趣。

不同的市場報告有不同的統計數字，Flutter、React Native究竟孰強孰弱或許只能從一些市場趨勢中窺見一二：

  • 市場趨勢一：谷歌Google Trends的統計數字顯示，在過去12個月的分析中，Flutter的搜尋指數已反超React Native。

  • 市場趨勢二：更年輕的Flutter在Github上擁有16.8萬名成員和11.8萬顆星的社群，而更成熟的React Native在Github僅有20.7萬名成員和9.46萬顆星。

    image.png

  • 趨勢三：根據Statista的資料，React Native以42%的市場份額力壓Flutter，但Flutter與React Native的差距正變得越來越小，其在一年內市場份額從30%急劇躍升至39%。

image.png

語言對比：Dart Vs JavaScript

Flutter所採用的Dart開發語言是谷歌2011年在丹麥奧爾胡斯舉行的GOTO大會上亮相的，Dart是一門面向物件的、類定義的、單繼承的語言，它的語法類似C語言，可以轉譯為JavaScript，支援介面(interfaces)、混入(mixins)、抽象類(abstract classes)、具體化泛型(reified generics)、可選型別(optional typing)和sound type system，並且具有AOT與JIT編譯器，Dart的最大優勢在於速度，執行比JavaScript快2倍，不過Dart作為一門較新的語言，開發者還需要熟悉Java或C++的應用程式開發工作才更易上手。

而React Native則採用的為已經在IT行業廣泛應用多年的Javascript語言，類似於HTML的JSX，以及CSS來開發移動應用，因此熟悉Web前端開發的技術人員只需很少的學習就可以進入移動應用開發領域，不過JavaScript執行緒需要時間來初始化，所以導致React Native在最初渲染之前需要花費大量時間來初始化執行，不過React Native已經發布了升級線路，並且會在最近開源升級的版本，相信隨著React Native新版本的釋出，效能上將會追平Flutter。

技術架構

如果單從技術上講，Flutter絕對是一個先進的跨平臺技術方案，它提供了一個分層的架構，以確保高度的定製化，而React Native依賴於其他軟體來構建反應元件，並使用JavaScriptBridge來橋接原生本地模組的連線。橋接會影響效能，即使發生輕微的變化，而Flutter可以在沒有橋接的情況下管理一切。

Flutter提供的分層的架構，為簡單快速的UI定製鋪平了道路。它被認為可以讓你完全控制螢幕上的每一個畫素，並允許移動應用開發公司整合疊加和動畫圖形、文字、影片和控制元件，沒有任何限制。

Flutter移動平臺與其他Web平臺的架構略有差異，不同平臺相同的公共部分就是Dart部分，即Dart Framework。Flutter的公共部分主要實現了兩個邏輯：第一，開發人員可以通過Flutter Ui系統編寫UI，第二使用Dart虛擬機器及Dart語言可以編寫跟平臺資源無關的邏輯。同時這也是Flutter跨平臺的核心，和Java程式可以在Linux,Window，MacOs同時執行， Web程式可以在任意平臺執行類似。通過Dart虛擬機器，UI及和系統無光的邏輯都可以用Dart語言編寫，執行在Dart虛擬機器中，是跨平臺的。

而React Native依賴於其他軟體來構建反應元件，其架構整體上分為三大塊：Native、JavaScript 與 Bridge，其中Native 管理UI 更新及互動，JavaScript 呼叫 Native 能力實現業務功能，Bridge 在二者之間傳遞訊息。React Native 中主要有 3 個執行緒，應用中的主執行緒UI Thread、進行佈局計算和構造 UI 介面的執行緒Shadow Thread與React 等 JavaScript 程式碼都在這個執行緒執行任務的JS Thread。

正因其依賴於其他軟體來構建反應元件，因此在啟動上會受到以下，必須先初始化 React Native 執行時環境（即Bridge），Bridge 準備好之後開始 run JS，最後開始 Native 渲染。從架構上來看，Flutter確實性能更高，也更符合當下跨平臺開發的需求。

image.png

學習成本和社群支援

當涉及到構建企業應用程式時，社群支援是必須檢查的因素。而React Native和Flutter都在行業中發展了多年，並且在谷歌與Facebook兩大巨頭的支援下都有最新的技術更新與廣泛的社群支援。而隨著每一個遞增的版本和技術更新，社群對該框架的興趣和需求逐漸增加。讓我們瞭解一下這兩個框架在社群參與方面的情況。

React Native在2015年推出，其社群一直處於成長階段，Github上對該框架的貢獻者數量就是證明。但是，儘管Flutter還很年輕，也比較新，但它正在已開始顯示後來居上之勢。

image.png

程式碼的可維護性

無論你開發的應用程式多麼出色，為了使其順利執行，不斷地升級和除錯是必要的。與Flutter相比，用React Native維護程式碼真的很困難。

在React Native中，當你為了開發適配不同系統的應用程式時就需要分開編寫適配程式碼，它會干擾框架的邏輯，從而減慢了開發過程。另外，在React Native應用程式中，大多數本地元件都有一個第三方庫的依賴性，所以維護這些過時的庫確實是一個具有挑戰性的任務。

對於Flutter來說，由於程式碼邏輯相對簡單，不需要適配不同的作業系統，維護程式碼就要容易得多，允許移動應用程式開發人員輕鬆發現問題，為外部工具和支援第三方庫提供資料支撐。

此外，與使用React Native的熱重新載入功能相比，在Flutter中釋出質量更新和對應用程式進行即時更改所花費的時間也比React Native表現更好。

開發成本

無論是一個初創公司還是一個先進的網際網路企業，開發成本總是大家比較關心的內容。因此，當你選擇僱用反應原生開發公司或Flutter應用程式工程師時，你可能需要評估他們的費率，不同的地方有不同的開發成本。

因此，在正式啟動專案之前，無論是Flutter還是React Native，都需要考慮開發人員的素質，如經驗、專業知識、專案處理等開發成本問題，以評估開發人員的實際小時費用，下面是Flutter和React Native的一個開發成本的問題。

image.png

除此之外，在選擇Flutter還是React Native的問題上，我們還需要考慮他們的自定義開發能力。 Flutter和React Native都有一套屬於自己的UI元件和小工具。並且，Flutter就以其漂亮的UI原生型小部件而聞名，這些小部件由框架的圖形引擎進行渲染和管理。

而React Native只提供了適應平臺的基本工具，如按鈕、滑塊、載入指示燈等基礎元件，如果需要開發複雜的功能，就需要使用第三方組元件。

結尾

有一起學習的小夥伴可以關注下我的公眾號——❤️程式猿養成中心❤️ 每週會定期做技術分享。快加入和我一起學習吧！

「」
「」