我用 Flutter、React Native 和 Ionic 構建了相同的應用程序
在開始尋找最佳的跨平臺移動開發框架的過程中，Flutter、React Native 和 Ionic 是讓我印象深刻的。這三款產品很有吸引力，因為它們承諾在為多個平臺使用單一代碼庫的同時提供良好的性能。
為了開始冒險進入這個新世界，我創建了三個版本的移動應用程序，這些應用程序使用 API 并在屏幕上顯示基本數據。這個想法很簡單：構建一個應用程序，顯示一個隨機國家的詳細信息。我以前在 Python 中做過類似的項目。
迷你液晶顯示屏每天顯示隨機國家/地區的詳細信息
為了公平地比較，該應用程序的所有三個版本都必須滿足以下要求：
- 屏幕加載后，將顯示一個國家/地區
- 在第一個國家/地區出現之前顯示加載中
- 一個圓形按鈕，用于獲取另一個隨機國家/地區
- 整個國家/地區列表僅獲取一次（來自 RESTCountries）
讓我們先深入了解一下我使用 Flutter 構建移動應用程序的經驗。
Flutter
正如 Flutter 網站上所描述的那樣，“Flutter 是 Google 的一個開源框架，用于從單個代碼庫構建漂亮的、原生編譯的多平臺應用程序。它創建于 2017 年，基于面向對象的編程語言 Dart。
在開始開發之前，我花了一個小時閱讀 Flutter 的文檔和觀看教程。Flutter 背后的團隊充滿熱情和吸引力，這激發了我深入研究的動力。
開發環境和 Android 模擬器的設置進行得很順利。這是意料之中的，因為我使用 Google IDE （Android Studio） 來使用 Google 框架 （Flutter） 為 Google 操作系統 （Android） 創建應用程序。
是時候創建應用程序了。計時器打開。在 4 小時內，我制作了這個：
Flutter 應用程序
在開發過程中沒有遇到任何特別復雜的問題。在開發過程中，Android Studio 的建議幫了大忙。還有熱重載？真是省時省力！只需按下 Ctrl+S 鍵，您就能看到您的更改立即反映在設備上，而無需刷新頁面！
盡管在設置和工具方面有很好的體驗，但當我深入開發時，我還是遇到了一個突出的設計模式：小部件的普遍使用。Flutter 的“一切皆小部件”概念變得顯而易見，這導致了大量的嵌套和元素樣式的混合。甚至連填充都是小部件！與我習慣的基于組件的結構相比，這種方法感覺不太直觀。
看看這個例子就明白我的意思了：
class CountryDetails extends StatelessWidget {
final Country country;
const CountryDetails(this.country, {super.key});
@override
Widget build(BuildContext context) {
var formatter = NumberFormat.decimalPattern('en-US');
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Image.network(country.flag, height: 200),
),
CountryProperty('Name: ', country.name),
CountryProperty('Region: ', country.region),
if (country.capitals.isNotEmpty)
CountryProperty('Capital: ', country.capitals[0]),
CountryProperty('Population: ', formatter.format(country.population)),
],
);
}
}在屏幕實際內容的正上方創建填充，這是一個小的 UI 細節，這讓我有輕微的不適感。我只能想象它在具有眾多 UI 要求的場景中會是什么樣子。當這些不同的關注點在同一視野內爭奪注意力時，保持專注將具有挑戰性。
React Native
React Native 由 Meta 于 2015 年創建，是一個開源 JavaScript 框架，可讓您構建原生 Android 和 iOS 應用程序。React Native 已在業界獲得廣泛采用，是 Facebook 和 Instagram 等知名應用程序的基礎。
我以前使用過 React 庫。VS Code 已經安裝好了。我只需要運行 React Native。
哦，那可真是太痛苦了。當我開始使用 React Native 時，與 Flutter 的流暢設置相比，這是一場完全不同的游戲。一開始，我就面臨著兩種管理工作效率的選擇：Expo Go 和 React Native CLI。我沒有意識到這兩個選項是相互排斥的，因此在不了解它們之間區別的情況下，我試圖按照網上的解決方案進行操作。這導致依賴關系一團糟，難以管理。如果您想為 React Native 設置環境，請確保只遵循官方文檔。這樣做，你可能會避免遇到同樣的挫折。
盡管圖像顯示方面的問題尚未解決，應用程序還是在 2.5 小時內完成了。為了確保旗幟顯示出來，我強制調整了寬度和高度，但有時會導致旗幟變形。我根本無法在安卓設備或模擬器上顯示旗幟。它只能在瀏覽器中運行。
React Native 應用程序
React Native 在代碼方面提供了一種簡潔易讀的方法。這種簡潔性來自于 React 基于組件的架構，它促進了模塊化和代碼可重用性。每個組件都是一個 JavaScript 函數。通過使用 JSX（JavaScript XML），React 允許我們編寫類似 HTML 的代碼來描述組件的 UI。在我的示例中，它看起來像這樣：
const CountryDetails = (props) => {
return (
<View>
<Image source={{ uri: props.flag }} style={{ marginBottom: 10, width: 300, height: 200 }} />
<CountryProperty property="Name" value={props.name} />
<CountryProperty property="Region" value={props.region} />
{props.capital && <CountryProperty property="Capital" value={props.capital} />}
<CountryProperty property="Population" value={props.population.toLocaleString("en-US")} />
</View>
)
}Ionic
Ionic 成立于 2012 年，是“一個開源的移動 UI 工具包，用于從 React、Vue 或 Angular 中的單個代碼庫構建現代、高質量的跨平臺移動應用程序。Ionic 將大量投資投入到一組豐富的 UI 組件和有吸引力的用戶界面上，以適應目標平臺。
Ionic Angular 是我選擇的應用程序。Angular 是 Google 于 2016 年構建的成熟框架，用于他們的許多 Web 應用程序。我花了 30 分鐘觀看 Ionic 視頻和閱讀指南。熟悉的 Angular 開發生態系統讓我有信心在短暫的學習期后啟動應用程序。
我按照網站上的說明，從空白模板啟動應用程序。設置完成后，結果是一個生成了多個 JSON 和 TypeScript 配置文件的項目，這讓我很不舒服。“為什么我需要這么多文件”？我想。但至少有了一個中間有文本的應用程序，可以在瀏覽器中快速預覽。
開發過程非常簡單，僅用了 2 個小時即可實現與 Flutter 和 React Native 版本相同的功能。但是如果我說我沒有從 React Native 版本（即 Country 類的構造函數）復制一些代碼，那我就是在撒謊。
Ionic app
Ionic 提供了一組 UI 組件，使 UI 實現變得更加容易。我使用了 Spinner 和Floating Action Button。該文檔提供了簡單的示例，以便無縫集成。
與 React 相反，Angular 不使用 JSX。相反，它使用模板語法。模板是 HTML 的一部分，但添加了更多功能，例如插值、事件綁定和指令。
<ion-content [fullscreen]="true">
<div id="container">
<div *ngIf="currentCountry; else loading">
<img [src]="currentCountry.flag" style="margin-bottom: 10px; width: 300px;"/>
<app-country-property property="Name" [value]="currentCountry.name"></app-country-property>
<app-country-property property="Region" [value]="currentCountry.region"></app-country-property>
<app-country-property *ngIf="currentCountry.capital" property="Capital" [value]="currentCountry.capital"></app-country-property>
<app-country-property property="Population" [value]="currentCountry.population.toLocaleString('en-US')"></app-country-property>
</div>
<ng-template #loading>
<ion-spinner></ion-spinner>
</ng-template>
</div>
</ion-content>通過將 UI 分離為特定的 .html 文件，我的 TypeScript 文件變得只關注邏輯，這可能會減輕在同一屏幕上工作的開發人員之間的協作沖突。
Flutter、React Native 和 Ionic 之間的比較
代碼風格和語言
在我看來，基于 JavaScript 的框架在代碼可讀性和簡單性方面勝出。與 Flutter 相比，我用更少的代碼行實現了相同的功能。我不太喜歡 Flutter 的嵌套代碼風格。它看起來令人困惑且難以閱讀，邊距、填充、大小、元素和邏輯都混淆了，這與 React Native 和 Ionic 相反。您是喜歡 JSX 還是 Angular 模板來實現視圖，最終取決于個人喜好。我傾向于 Angular，因為它的文件結構與將在 DOM 中呈現的內容非常相似。
雖然我以前知道一些 React 和 Angular（但既不是 React Native 也不是 Ionic），這可能影響了開發時間差，但我確實覺得它們比 Flutter 更容易學習。
生態系統
評估框架采用情況的一種有趣方法是檢查使用它們構建的已安裝應用程序的數量。截至 2024 年 4 月，在美國，前 500 名安裝應用程序（來自 Play 商店）中有 12.57% 是使用 React Native 構建的，相比之下，Flutter 占 5.24% 的份額，Ionic 僅占 0.52%。
這三個框架提供了大量的文檔。他們也都在交互式示例上進行了一定程度的投資，但我覺得 React Native 在設置和工具方面有時更令人困惑。我親眼目睹了我對 Expo Cli 和 React Native Cli 的迷失方向。這并不完全是 React Native 的錯：有許多非官方的指南，有許多不同的方法來啟動應用程序。React Native 在構建項目時也提供了很大的自由度，盡管它帶來了很多解決方案，但在某些領域提出了缺失的文檔和不明確的最佳實踐。
Flutter 的采用率正在增長，超過了 React Native 和 Ionic 的公共 GitHub 存儲庫的數量。盡管如此，當我們比較語言而不是框架時，比 Dart 大 16 歲的 JavaScript 仍然是采用率的明顯贏家。JavaScript 是為前端開發而生的，但現在也被廣泛用于服務器端。整個 JavaScript 生態系統充滿了所有類型的資源，包括用于眾多用例的第三方庫。如果你學習 Flutter，你只是在學習 Flutter。如果你使用 React Native 或 Ionic 進行構建，您將學習如何使用標準技術構建 Web 組件。
工具
熱重載
為了在瀏覽器中進行測試，所有三個框架都將在進行更改時重新加載應用程序。在我的手動測試中，他們三個在代碼更改后執行了非常快的重新加載，在 1-2 秒后顯示另一個隨機國家/地區，其中包括對國家 API 的 1 次調用。
在 Android 設備或模擬器中進行測試時，Flutter 憑借 Hot Reload 取得了勝利。更改文件足以更新視圖，而無需刷新整個頁面。它只是重建小部件樹。然而，在 React Native 和 Ionic 中，文件中的任何更改都會觸發整個頁面的刷新（包括額外的 API 調用），這使得比較 UI 更改之前和之后的難度略有增加。盡管在某些情況下，React Native 應該能夠通過快速刷新來保留狀態，但在我的測試中，它沒有，顯示出與 Ionic 的 Live Reload 相同的結果。
遠程調試
這些框架使用不同的調試方法;總而言之，我們可以通過瀏覽器遠程調試 Android 應用程序。在我的測試中，Flutter 是打開應用程序（已安裝）進行無線調試的最快方法。
- Flutter: 10 秒
- React: 17 秒
- Ionic: 21 秒
Flutter DevTools 具有簡單直觀的界面，其中包含許多可以在著名的 Chrome 開發者工具中找到的功能。我發現有趣的是，有一個選項可以放慢動畫速度來幫助微調它們。它還包括應用內 UI 調試功能，這將有助于更好地了解實現的設計規范，例如邊距和大小。
Flutter 開發工具
Flutter 應用內調試
說到Chrome開發者工具，調試Ionic應用程序類似于調試標準網站，這是一個很大的優點。熟悉此界面簡化了調試過程。從性能到網絡，以及快速嘗試 CSS 更改的可能性，Chrome 開發者工具都能滿足我們的需求。Ionic 是這三個框架中唯一不提供任何應用內調試功能的框架。
圖片
盡管 React Native 具有應用內調試功能，例如性能疊加、網絡信息和元素檢查器，但在遠程調試方面，它仍然落后于 Flutter 和 Ionic。React Native 提供 React DevTools，它專注于應用程序的組件層次結構。也可以使用 Hermes 引擎，該引擎將允許（僅）使用 Chrome 開發者工具的一些功能進行調試。
React DevTools
應用大小
雖然我還沒有探索任何減少發布.apk大小的方法，但 Ionic 產生了 3.2MB 的文件大小，而 Flutter 產生了 18.1MB 和 React Native 25.2MB。安裝后，它們分別占用了 9.61MB、34.66MB 和 55.47MB。
用戶體驗
構建具有一致和現代外觀的跨平臺移動應用程序對于提供無縫的用戶體驗至關重要。Flutter 的預構建 UI 組件和 Ionic 的自適應樣式功能都確保了 Android 上的 Material Design 和 iOS 上的 Cupertino 的一致性。換句話說，Flutter 和 Ionic 使 UI 組件的外觀適應目標平臺。
使用 React Native，必須依賴第三方庫才能開發出符合 Material Design 的用戶界面。對于許多開發人員來說，維護額外的依賴關系很容易成為禁忌。當我不得不在 React Native 版本的浮動操作按鈕中實現更多樣式時，我感受到了其中的差異，最終獲得了與 Flutter 和 Ionic 相似的用戶界面。
性能
從理論上講，當它編譯為原生代碼時，Flutter 應該比 React Native 運行得更快，因為后者依賴于 JavaScript 橋接。這是一種用于允許 JavaScript 代碼訪問移動設備的本機功能的技術。這樣的過程可能會給應用程序的性能帶來開銷。Ionic 是三者中速度較慢的，因為它運行在 Web 視圖（用戶不可見的瀏覽器）上。然而，Ionic 指出，它比 React Native 慢的神話只是......一個神話。
鑒于其幾乎不存在的性能要求，我無法用我的應用程序測試這種比較。
結論
我有興趣更深入地研究 Flutter 的代碼風格，盡管我還沒有完全接受它。關于最佳實踐，有很多東西需要學習，而熱重載功能似乎是調試的游戲規則改變者。盡管如此，將現有的 TypeScript、HTML 和 CSS 知識轉移到移動應用程序的開發中也非常有吸引力。對 JavaScript 生態系統的熟悉和建立的信心使我傾向于暫時將 Flutter 放在一邊。
從開發到調試，包括與現有 Web 庫的集成，構建 Ionic 應用程序感覺就像構建傳統的 Web 應用程序一樣。這讓我相信，提高我在 Ionic 開發方面的技能不僅會提高我作為移動開發人員的熟練程度，還會提高我作為 Web 開發人員的熟練程度。與 React Native 相比，Ionic 在實現遵循 Android 和 iOS 設計原則的接口方面也取得了勝利。
重要的是要承認，雖然獲得了有價值的見解，但許多方面，如代碼組織、關注點分離和組件可重用性，可能只會隨著項目的發展而變得明顯。
正如移動開發行業所顯示的那樣，無論使用哪種框架，都可以開發出性能良好并能使用本地功能的優秀應用程序。因此，不要低估選擇一個自己喜歡的框架的重要性。與其花幾個小時在網上尋找答案，為什么不使用示例應用程序進行探索呢？
希望你能從我的故事和我作為跨平臺移動開發學徒的角度，度過一段愉快的時光。
我的應用
- Flutter 應用程序 https://github.com/fmmagalhaes/random_country_flutter
- React Native 應用程序 https://github.com/fmmagalhaes/RandomCountryReactNative
- Ionic 應用程序 https://github.com/fmmagalhaes/random-country-ionic-angular
原文：https://medium.com/@fmmagalhaes/i-built-the-same-app-with-flutter-react-native-and-ionic-33ff8b358562
