混合動力：Flutter 的優勢和好處
已發表: 2022-03-11Flutter 是來自 Google 的混合移動應用程序開發平台，於 2018 年底發布 1.0。雖然它是混合開發框架列表中的新成員，但其背後的偉大理念使其迅速在開發人員中流行起來。
我在本文中的目標是探索這些想法並寫下我使用 Flutter 的經驗，以及為什麼我覺得它是混合移動應用程序開發的未來。
儘管市場上有較舊的混合應用程序框架，但越來越多的知名公司選擇 Flutter 用於他們的移動應用程序。 雖然 Flutter 展示頁面列出了其中的很多內容，但這裡有一些值得注意的應用程序將 Flutter 用於整個應用程序或用於重要功能：
- Google Ads 應用
- GrabFood 的 GrabMerchant 應用程序
- 阿里巴巴集團的閒魚應用，下載量超過5000萬
- 紐班克
- 易趣汽車應用程序
儘管 Flutter 框架功能相當強大，但它仍然相對較新。 為了平衡起見，我還將討論一些您在使用 Flutter 之前應該注意的限制。
我希望讀完這篇文章後，你對 Flutter 的優缺點有了一個很好的了解，並且有足夠的信息來決定你是否應該在下一個移動應用項目中使用 Flutter。
Flutter 優勢（從開發角度）
作為開發者，這是我最熟悉的觀點，也可以分享最多的信息。
快速學習曲線
Flutter 給開發者帶來的第一個驚喜就是它上手的速度有多快。 完成安裝過程並設置工作開發環境只需不到 30 分鐘。 從那裡開始，您就可以創建您的第一個 Flutter 應用程序了。
流行的編輯器集成
Flutter 還具有出色的編輯器集成。 我個人使用 Android Studio，但有一些說明可用於設置 IntelliJ、VSCode 或 Emacs。
清潔發展進程
與我之前使用混合應用程序框架的經驗相比，開發過程也感覺更乾淨。 例如，當我使用 WebViews 顯示包含許多元素（大約 100 個左右）的列表時，我必須處理高 CPU 使用率，尤其是當用戶滾動列表時。 我通過使用專門為此製作的 Ionic 框架元素解決了這些問題。 在 Flutter 中，有一種公認的顯示列表的方式，即ListView ，它具有開箱即用的驚人性能。
實時重新加載
另一件讓我驚喜的事情是實時重新加載功能。 作為一名全棧開發人員，我習慣於像 BrowserWatch 這樣在瀏覽器中提供實時重載的框架。
原生開發沒有這些（但我認為 Apple 的 SwiftUI 在 iOS 開發方面取得了一些進展）。 Android 和 iOS 開發人員通常需要編寫代碼，然後等待其編譯並加載到設備或模擬器上，然後才能看到更改。
Flutter 提供（a la React Native）實時重新加載機制，一旦開發人員點擊“保存”，應用程序代碼就會重新加載到設備上。 這會立即提供反饋，從而加快開發速度。
表現
應用程序性能是 Flutter 慢慢成為贏家的另一個指標。
由於 Flutter 框架正在積極開發中，因此有很多地方可以進行性能優化。 這在 Flutter 1.17 中很明顯，它在較新的 iOS 設備上將渲染性能提高了多達 50%，並將某些類型的工作負載的內存消耗降低了多達 70%。
跨平台一致性
在兩個移動平台上真正一致的 UI 是 Flutter 的另一個顯著特點。 因為 Flutter 使用自己的渲染引擎（稍後會詳細介紹），所以 iOS 和 Android 上的 UI完全相同。 開發人員不再需要處理特定於平台的樣式問題以使一切看起來與設計完全相同：該保證是框架的一部分。
語言、工具和擴展
我認為應該在這裡提到的其他三個較小但仍然很重要的方面是：
- Dart 是 Flutter 應用程序的編程語言，上手非常簡單。 但它也是一種相當強大的語言，最初是由 Google 打算取代 JavaScript。 如果開發人員對 JavaScript 或其他類 C 語言有任何經驗，他們將在一兩天內輕鬆上手 Dart。
- 默認工具鏈中包含一個強大的插件管理器 (pub)，並且可以通過 pub.dev 插件存儲庫獲得一個龐大的插件庫。
- 創建插件以利用本機平台功能非常容易，因此如果開發人員需要訪問尚未存在插件的平台功能，編寫一個代碼並不太難。
Flutter 優勢（從業務角度）
大多數企業認為 Flutter 的最大好處是只需為 iOS 和 Android 平台僱用一個團隊。 然而，許多企業忽略的一個更重要的好處是更快的上市時間。 利用上一節中的開發優勢，較小的開發團隊可以使用 Flutter 更快地構建具有原生性能的漂亮應用程序，從而在兩個平台上提供相同的用戶體驗。
Flutter 確實允許開發人員構建一些真正漂亮的用戶界面。 看看谷歌和聯想最近的一項挑戰，即為聯想智能時鐘構建漂亮的鐘面 UI。 獲勝者是 Mickel Andersson 的Particle Clock ，它不僅優雅獨特，還展示了 Flutter 中的高性能動畫。
對於考慮使用 Flutter 但不確定它是否正確的企業，可以逐步利用 Flutter：現有的移動應用程序可以一次集成 Flutter 一個部分。 事實上，這就是大多數大公司開始使用 Flutter 的方式，通過在 Flutter 中構建他們現有應用程序的一小部分，然後在看到好處後慢慢替換其他部分。
使用 Flutter 之前要考慮的限制
公平地說，作為較新的 Flutter，並沒有像React Native 等其他混合移動應用程序框架那樣經過實戰考驗——畢竟，React Native 的最終用戶範圍涵蓋了 Facebook、Instagram、Skype 和 Discord 的移動應用程序。
“我應該使用 Flutter 嗎？”的默認答案是，目前，謹慎的是。 這是因為項目經理仍然需要考慮他們需要哪些高級功能（如果有的話），並在承諾使用之前確保這些功能在 Flutter 中可用。 特別值得一提的是，一個團隊可能需要哪些庫和插件來構建一個特定的應用程序。 作為移動應用程序框架中的新成員，Flutter 沒有 React Native 所具有的廣泛的庫和插件範圍。
例如，Flutter 中的相機支持還沒有完成，縮放和閃光控制還不是官方相機插件的一部分。 對我來說，這並不是什麼大問題，因為當我需要在我正在構建的應用程序中集成照片/視頻功能時，我能夠找到第三方插件。
您可能會錯過的另一個主要插件是谷歌地圖。 沒有 Dart 原生的 Google Maps 插件，雖然有一個插件允許將 Google Maps 集成到 Flutter 代碼中，但它使用了 Flutter 的功能（平台視圖），這些功能仍處於開發人員預覽狀態。
還有一件事不會影響許多項目，但您應該注意的是，目前，Flutter 不支持任何 3D 功能。 該團隊目前只專注於 2D。 但是大多數應用程序不使用任何 3D 功能，因此對於大多數開發人員來說，這不應該是一個大問題。
我的 Flutter 經驗中的一些建議
在過去兩年中發布了三個 Flutter 應用程序後，我學到了很多我希望在剛開始時就被告知的東西。 我將在此處列出它們，希望它們對您的 Flutter 開發之旅有所幫助。
Flutter非常容易上手。 我從 App Brewery 的精彩課程開始。 然而，在完成了最初的幾個模塊之後，我認為我已經學到了足夠的東西並開始構建我推出的第一個應用程序。
由於我不耐煩，我跳過了該課程中的一些模塊，這些模塊被證明很重要，我不得不通過犯錯來艱難地學習這些模塊的課程。 具體來說，如果我學習了一些 Flutter 最佳實踐，我在第一次使用 Flutter 進行應用程序開發時會做得更好：
- 如何模塊化和結構化我的 Flutter 應用程序代碼。
- 狀態管理如何工作。
- 如何在我的 Flutter 應用程序的不同頁面上對用戶進行身份驗證並跟踪身份驗證狀態。
- 如何使用 Firebase 消息包集成通知。
我最終學習了所有這些東西，但首先必須犯很多錯誤。 我重寫了我構建的第一個應用程序的重要部分。 然而，在我的第二個 Flutter 應用程序中，我從錯誤中吸取了教訓，最終做得更好、更快。
您可以通過搜索 Google 輕鬆找到許多資源，以了解我上面列出的概念。 您可以從查看 Flutter 網站上的 Learn More 頁面上的鏈接開始。
我發現的另一件事是，由於 Flutter 的新功能，沒有一種模式可以用於構建您的應用程序。 來自主要基於 Django 的開發生涯，我習慣於知道 MVC 是在我的 Django 應用程序中使用的模式。 iOS 在它所遵循的 MVVM 模式中也有明顯的贏家。 Android 有一套關於如何最好地構建應用程序的指南。
Flutter 沒有這樣的架構模式可以“戰勝”許多可能性。 起初，這讓我很艱難。 最後，在開發了許多 Flutter 應用程序之後，我認為最好選擇一種架構並堅持下去。
我個人將provider包用作依賴注入和變更管理框架。 我的 Flutter 應用也大致分為三行：
- 視圖，它們是構建應用程序的小部件，包括屏幕。 我使用
Provider包中的Consumer小部件將服務和模型注入到我的視圖中，這樣我就可以根據可用數據構建 UI。Consumer小部件還會在狀態更改時重建視圖，這是我的應用程序對狀態更改做出反應的方式。 - 模型，它們是我用來保存結構化數據的普通舊對象。
- 服務/控制器，大部分業務邏輯都在其中。 API接口也在這裡編碼，可以檢索和發送數據到API。 這些 API 接口提供和接受模型來傳遞數據。
bloc 庫也值得考慮作為provider包的替代方案。 它的架構略有不同，它使用事件流和狀態流來連接視圖和模型。
與使用provider庫相比，這是一種管理狀態的稍微複雜的方法，但如果您有一個複雜的應用程序，您正在對來自多個源的相同數據進行更改並且需要從多個位置響應這些更改，則它會有所回報。
如果您最終不使用 BLoC 或provider ，則必須想出一些方法來管理整個應用程序的狀態，尤其是在涉及通知的情況下。
Flutter 與其他混合框架的比較
反應原生
React Native 是迄今為止最流行和最成功的混合移動應用程序框架，並且有充分的理由。 它採用了流行且製作精良的前端 Web 框架 React，並允許數百萬前端開發人員也開始編寫移動應用程序。 我相信，如果開發人員必須找到時間和動力來學習原生 iOS 和 Android 開發 SDK，那麼我們今天擁有的許多出色的移動應用程序將永遠不會被開發出來。
在這種背景下，我有信心說 Flutter 最終將成為領先的混合移動應用程序框架。 有幾個原因。
React Native 組件用 JavaScript 代碼描述並翻譯成原生控件。 這意味著用戶在應用程序的 iOS 和 Android 版本中獲得不同的 UI 感覺。 如果開發人員正在嘗試為他們的用戶實現原生體驗，這很好。
然而，這也意味著，如果開發人員想要在兩個移動平台上擁有相同、一致的 UI，他們必須努力將原生組件的樣式設置為看起來相同，或者完全使用不同的組件以在兩個移動平台上提供相同的外觀和感覺平台。
將此與 Flutter 進行對比，Flutter 框架在所有支持的平台上都提供了自己的小部件。 沒有翻譯發生，因為 Flutter 不依賴原生控件來繪製 UI。 相反，它使用自己的控件庫。 Flutter 的小部件庫確實提供了看起來像原生控件的小部件，但它們是完全可選的。
這種方法有其優點和缺點。 最大的優點是您現在在兩個平台上都擁有完全相同的應用程序。 但你確實放棄了一些東西來實現這一目標。
由於 Flutter 使用自己的小部件而不是使用原生小部件，因此您不能像在 React Native 上做最少的工作一樣使用提供自定義控件的大量現有庫。 在 React Native 中，圍繞任何現有的原生控件編寫一個小包裝器並讓它工作非常簡單。 這也是目前 Flutter 沒有穩定的 Google Maps 實現的原因。
但是，嵌入本機控件的功能目前正在開發中，並且處於開發人員預覽版中，這意味著您可以使用它，但可能不得不應對錯誤。 與 React Native 相比，一旦發布，它將關閉 Flutter 中這個相當大的功能漏洞。
當你想要創建一個全新的組件時，同樣的 Flutter 特性——使用它自己的小部件庫而不是原生的小部件庫——也提供了巨大的好處。 在 React Native 中，您必須構建一個平台原生組件並通過綁定將其導入您的應用程序。
使用 Flutter，您可以直接在 Dart 代碼中構建自定義組件。 您可以使用諸如CustomPainter之類的小部件完全控制 UI，這些小部件可讓您繪製所需的任何內容，並且您擁有一個可用的小部件庫，可讓您實現自定義動畫。 你永遠不需要跳出 Dart 代碼庫來構建這些自定義小部件。
我認為這是 Flutter 最大的好處之一。 你可以從 Dart 代碼中完全控制你的 UI，並且不再需要擔心學習你正在開發的平台的原生 SDK。
阿帕奇科爾多瓦
Apache Cordova 與其說是一個框架，不如說是一個瀏覽器包裝器。 使用 Cordova，您可以使用 Web 技術構建您的應用程序：HTML、CSS 和 JavaScript。 Cordova 為您提供了一種在移動平台上運行此 Web 應用程序的方法，並在 JavaScript 中公開本機平台 API，以便您的應用程序可以與平台交互。
為 Cordova 構建了許多不同的框架。 我過去使用過的著名的之一是 Ionic 框架。 它提供了一組外觀和行為類似於原生平台組件的 UI 組件。 但是，這些組件是使用 HTML/CSS/JavaScript 實現的。
Cordova 和 Ionic 的開發體驗非常好，如果您已經是 Web 開發人員，上手速度非常快。 因為您正在使用 Web 技術構建應用程序，所以您可以使用整個 Web 生態系統。 想想成千上萬個基於 HTML/CSS/JavaScript 的小型組件和庫，您可以使用其中的大部分（如果不是全部）。 這意味著您需要的大多數“小部件”已經在線提供給您。
不過，這也是一個缺點。 因為您使用 Web 技術來構建您的應用程序，所以需要非常小心地確保該應用程序的外觀和感覺就像一個移動應用程序，而不僅僅是一個縮小到可以在移動設備上運行的網站。
雖然 Cordova 是開發 MVP 甚至是應用程序的前幾個版本的好方法，但我在 Flutter 中構建的第一個應用程序是 Ionic 應用程序的移植。 我們得到的性能改進，尤其是在有大量內容需要滾動的視圖中，從第一次交互中就很明顯了。
賽馬林
我對 Xamarian 沒有任何經驗，因此無法公平地比較兩者。 但是，在我的研究過程中，我確實遇到了一篇很好的文章，可以進行公平的比較。
雖然這篇文章最終將 Flutter 和 Xamarian 打成平手，但我可以自信地說，如果我正在閱讀它並且必須在這兩個框架之間做出選擇，我會選擇 Flutter，因為它的亮點在於我更看重。
Flutter 技術概述
Flutter：混合應用框架的“遊戲引擎”
在混合移動應用程序框架中，Flutter 具有獨特的方法。 它不會將 UI 委託給本機平台，也不會使用 Web 視圖。 相反，Flutter 使用自己的渲染引擎來繪製 UI。 這類似於遊戲如何使用生成其 UI 的所有部分的遊戲引擎，而不是使用本機控件。
Flutter 使用經過實戰考驗的高性能 Skia 圖形引擎來繪製移動應用程序中的所有內容。 使用 Skia 提供了我能想到的兩個主要好處，儘管我確信 Flutter 背後的 Google 工程師有更多的想法：
- 您的應用在所有平台上看起來都完全相同，而無需為每個平台進行定制。
- 您的應用程序將獲得出色的性能，類似於本機應用程序，因為沒有中間層必須將您的代碼轉換為本機平台代碼來繪製小部件。
一切都是小部件
Flutter 文檔將 Flutter 稱為“React 風格的框架”。 這在通過將較小的小部件（React 術語中的組件）組合在一起來構建應用程序的方式中很明顯。
然而，Flutter 將一切都是小部件的方法比我使用過的任何其他框架都更進一步。
一個簡單的例子是填充。 對於大多數框架，填充是 UI 元素的屬性。 在 Flutter 中， Padding是一個小部件，它可以將其他小部件包裹在自身內部，並在其子小部件周圍添加填充。
更獨特的是， InheritedWidget沒有 UI，也不提供任何用戶交互。 它唯一的工作是將信息添加到小部件樹中，以便在樹深處的某個點上，您可以提取該信息。
例如，您的應用程序的根 - MaterialApp小部件 - 可以使用InheritedWidget將身份驗證服務注入到小部件樹中。 現在，在其他頁面的樹的深處，例如您的用戶個人資料頁面，您可以使用一種方法來提取該身份驗證服務並使用它。
這一切都是小部件方法確實需要一些時間來適應。 但是一旦您熟悉了它，它就會成為在您的應用程序中構建功能的強大方式。
Flutter、Dart 和挖掘源碼
Flutter 與 Dart 密切相關。 雖然核心渲染引擎是用 C/C++ 構建的，但這只是 Flutter 的一小部分。
Flutter 的大部分代碼庫都是用 Dart 編寫的，Flutter 團隊選擇它有很好的理由。 但對我來說最大的好處是我可以輕鬆查看框架的源代碼——以及它提供的所有不同的小部件——並從中學習。
這是一個比許多開發人員意識到的更強大的優勢。 我建議大多數開發人員嘗試在他們的框架/庫的代碼中找到答案，因為這不僅可以幫助他們了解幕後發生的事情，而且還可以讓他們接觸到高質量、精心設計的代碼，這是一種可靠的方式成長為開發人員。
原生平台互操作性
雖然 Flutter 提供了 UI 層，業務邏輯通過純 Dart 包輕鬆處理，但要訪問本地平台的功能，如地理定位和攝像頭控制，使用 pub.dev 的第三方包是最簡單的策略。
但是，如果您需要的某些功能無法通過現有包獲得，那麼自己編寫一個並不太難。 我自己沒有構建任何平台原生包，但出於好奇，我查看了很多人的源代碼。
儘管我不是原生應用程序開發人員，但我能夠大致了解這些插件的原生部分，並了解它們如何通過消息傳遞連接到 Dart 運行時。 對於有經驗的原生平台開發人員來說，創建一個新的包來利用原生功能將非常容易。
你應該在下一個項目中使用 Flutter 嗎？
希望本文為您提供了足夠的信息來決定您是否可以在移動應用程序項目中使用 Flutter。 我試圖對 Flutter 給出一個平衡的描述，列出優缺點。
雖然沒有人可以為您做出決定，但我可以就如何解決在我的下一個移動應用程序中使用 Flutter 的問題給您一些臨別建議。 如果 Flutter 的優勢可以提供一個應用程序需要的所有能力，我會選擇它。
這是因為，除了 Flutter 目前缺乏的幾個領域之外，它的所有其他方面都是我在過去一年開發和推出五種不同的 Flutter 應用程序時所欽佩和依賴的：
- Flutter 易於上手
- 使用從頭開始設計以專注於開發速度的框架可以獲得的速度提升
- 隨時可用的 Dart 庫和第三方包的豐富生態系統
- Flutter 使用一切開發應用程序的不同但非常高效的方式是小部件方法
那些提供移動應用程序開發服務的人最好認真看看 Flutter，如果他們還沒有的話。
最後，我將指出 Flutter 的最後一個優勢：它擁有我使用過的任何庫或框架的一些最佳文檔。 我很少在谷歌上搜索 Flutter 問題，但 Flutter 自己網站上的頁面沒有回答這個問題。
作為 Google Cloud 合作夥伴，Toptal 的 Google 認證專家可根據公司最重要項目的需求提供給他們。