Cross-platform mobile development跨平台行動開發

A deep dive into the most popular frameworks: React Native, Flutter, native-first, and web-based technologies, and how to pick the right approach深入探討最流行的框架：React Native、Flutter、原生為先、網路技術，以及如何挑選正確的方法

These days, it seems almost everyone owns a smartphone. In the US, 91% of adults have one, in Europe, this figure is 89%, while in India, Deloitte predicts 75% of adults will have a smartphone by 2026. In total, there are an estimated 4.8 billion smartphone users in the world, which is an incredible number! This means that for tech startups and tech businesses that build consumer products, it’s a baseline expectation for them to be usable on smartphones, and for there to be a mobile app for the product.
如今，似乎幾乎每個人都擁有智慧型手機。在美國，91% 的成人擁有智慧型手機，在歐洲，這個數字是 89%，而在印度，德勤預測到 2026 年，75% 的成人將擁有智慧型手機。全球總計估計有 48 億名智慧型手機使用者，這是一個驚人的數字！這意味著，對於建立消費性產品的科技新創公司和科技企業而言，能在智慧型手機上使用這些產品，並為產品提供行動應用程式，是最基本的期望。

So, how do you build mobile apps? There’s plenty of choice: you can build a native mobile app for iOS using Swift or Objective C as a programming language, make one for Android using Java or Kotlin, and of course, you can develop a web app for desktop and mobile web users. All this adds up to three separate codebases and plenty of business logic replication.
那麼，如何建立行動應用程式呢？您有很多選擇：您可以使用 Swift 或 Objective C 作為編程語言為 iOS 建立原生行動應用程式，使用 Java 或 Kotlin 為 Android 製作應用程式，當然，您也可以為桌上型電腦和行動網路使用者開發網頁應用程式。所有這些加起來就是三個獨立的程式碼庫和大量的業務邏輯複製。

Or you can do what startups like social media newcomer Bluesky did: have one codebase that powers the web, native iOS, and native Android apps. For Bluesky, a single developer wrote the initial version of all three apps using React Native and Expo. We cover more on this in the article, Inside Bluesky’s engineering culture.
或者，您也可以像社交媒體新貴 Bluesky 等創業公司一樣：擁有一個代碼庫，為網頁、原生 iOS 和原生 Android 應用程式提供動力。對 Bluesky 而言，單一開發人員使用 React Native 和 Expo 寫出所有三個應用程式的初始版本。我們會在「Bluesky 的工程文化」一文中詳細介紹。

There are cross-platform frameworks and approaches that offer a way to use a single codebase to power multiple native apps and a website. A decade ago, most cross-platform technologies were in their early stages, but things are shifting; in October 2022, we covered whether more cross-platform development could lead to less native iOS and Android hiring by startups.
有一些跨平台框架和方法，提供了一種使用單一程式碼來支援多個原生應用程式和網站的方式。十年前，多數跨平台技術還處於早期階段，但現在情況正在轉變；在 2022 年 10 月，我們曾報導過更多跨平台開發是否會導致初創公司減少僱用原生 iOS 和 Android 應用程式。

Today’s article looks into current cross-platform development approaches, covering:
今天的文章將探討目前的跨平台開發方法，內容包括

1. The ecosystem. Most apps remain fully native, with Flutter and React Native (RN) the clear leaders for cross-platform development. RN is more popular in the US and UK, and apps built with it tend to generate more money.
   生態系統。大多數應用程式仍是完全原生，Flutter 和 React Native (RN) 是跨平台開發的佼佼者。RN 在美國和英國較受歡迎，使用 RN 建立的應用程式往往能創造更多收益。

2. React Native. The framework of choice for many Meta, Microsoft, Amazon, and Shopify apps, and at places whose web teams work with React.
   React Native。許多 Meta、Microsoft、Amazon 和 Shopify 應用程式，以及網頁團隊使用 React 的地方，都會選擇這個框架。

3. Flutter. Built and championed by Google, and the framework for most cross-platform apps.
   Flutter.由 Google 建置並提倡，也是大部分跨平台應用程式的框架。

4. Native-first approaches. Kotlin multiplatform, Swift-based frameworks (Skip, Scade), .NET MAUI (C#), NativeScript (JavaScript), and Unity.
   原生為先的方法。Kotlin 多平台、基於 Swift 的框架 (Skip、Scade)、.NET MAUI (C#)、NativeScript (JavaScript) 和 Unity。

5. Web-based frameworks. Cordova, Capacitor, Ionic, and Progressive Web Apps.
   基於 Web 的框架。Cordova、Capacitor、Ionic 和 Progressive Web Apps。

6. Choosing the right framework. A mental model for identifying key differences between all these technologies. In the end, most teams choose React Native or Flutter.
   選擇正確的架構。識別所有這些技術之間關鍵差異的心智模型。最後，大多數團隊選擇 React Native 或 Flutter。

The bottom of this article could be cut off in some email clients. Read the full article uninterrupted, online.
在某些電子郵件用戶端中，這篇文章的底部可能會被切掉。請不中斷地線上閱讀全文。

1. The ecosystem  1.生態系統

What are the most popular cross-platform frameworks? Interesting research by Appfigures looked at all the top apps on the iOS App Store and Android’s Google Play, peeked into their binaries, and categorized them by the framework used:
最受歡迎的跨平台框架有哪些？Appfigures 進行了一項有趣的研究，檢視 iOS App Store 和 Android 的 Google Play 上所有最頂尖的應用程式，窺探它們的二進位檔，並根據所使用的框架進行分類：

The most popular frameworks for iOS and Android apps. Source: Appfigures
最流行的 iOS 和 Android 應用程式框架。來源：Appfigures

Other research published on Statista suggests Flutter and React Native are the most popular choices, followed by Cordova, Unity, and Ionic:
Statista 發表的其他研究顯示，Flutter 和 React Native 是最受歡迎的選擇，其次是 Cordova、Unity 和 Ionic：

Cross-platform mobile adoption trends (2020-2023) based on a survey of 30,000 respondents. Flutter was used by 46% of respondents, and RN by 35% in 2023. Data source: Statista
跨平台行動應用趨勢 (2020-2023 年) 基於 30,000 名受訪者的調查。46% 的受訪者使用 Flutter，35% 的受訪者在 2023 年使用 RN。資料來源：Statista

Leaders: Flutter and React Native. These are the two most popular frameworks, but it can be tricky to identify which one is the most popular: on iOS, there are more React Native-powered, and on Android, Flutter apps outnumber React Native ones. However, there are simply more Android apps than iOS ones, which is why there are more Flutter apps than React Native ones, overall. React Native has been around since 2015, and Flutter since 2017.
領導者：Flutter 和 React Native。這兩個是最流行的框架，但要辨別哪一個是最流行的可能很困難：在 iOS 上，使用 React Native 的較多；在 Android 上，Flutter 應用程式的數量超過 React Native。不過，Android 應用程式的數量比 iOS 多，這也是 Flutter 應用程式的數量比 React Native 多的原因。React Native 自 2015 年起就已存在，而 Flutter 則自 2017 年起。

Shrinking: Cordova and Ionic. As per the Statista survey, both frameworks have smaller but shrinking market shares, with about 10-12% of survey participants using them. Their usage is likely more common at companies which were building cross-platform apps before React Native and Flutter emerged, and remain content to ship WebView-based applications.
縮小：Cordova 和 Ionic。根據 Statista 的調查，這兩個框架的市場佔有率都較小，但正在萎縮，約有 10-12% 的調查參與者使用這兩個框架。在 React Native 和 Flutter 出現之前，這些公司可能較常使用它們來建置跨平台應用程式，而且仍然滿足於出貨以 WebView 為基礎的應用程式。

Growth potential: Kotlin Multiplatform (KMP). This technology has modest adoption rates, but seems to be gaining momentum. JetBrains is investing heavily in it, while the Kotlin language is popular with native mobile developers, especially with Android folks.
成長潛力：Kotlin Multiplatform (KMP)。這項技術的採用率不高，但似乎正逐漸成長。JetBrains 正大力投資於此，而 Kotlin 語言深受原生行動開發人員的喜愛，尤其是 Android 使用者。

React Native or Flutter more popular?
React Native 或 Flutter 更受歡迎？

New data from the 2024 Stack Overflow Developer Survey offers pointers. Below is a breakdown of the mobile cross-platform frameworks used by circa 6,500 respondents:
來自 2024 年 Stack Overflow 開發人員調查的新資料提供了一些指標。以下是約 6,500 位受訪者所使用的行動跨平台框架明細：

Cross-platform mobile framework usage by developers. Data source: Stack Overflow
開發人員使用跨平台行動框架的情況。資料來源：Stack Overflow

From this data, it’s clear that Flutter and React Native are the most popular by a distance, with more users than all other frameworks, combined. But which is the most popular, overall? To find out, let’s slice and dice the data; firstly by narrowing it down to only professional developers by removing hobbyist users:
從這些資料來看，很明顯 Flutter 和 React Native 是最流行的，使用者人數比其他所有框架加起來還要多。但總體來說，哪個最受歡迎呢？為了找出答案，讓我們來切分這些資料；首先剔除業餘使用者，縮小範圍至專業開發人員：

Framework usage by professional developers of cross-platform apps. Source: Stack Overflow Developer Survey
跨平台應用程式的專業開發人員使用 Framework 的情況。資料來源：Stack Overflow 開發人員調查

Flutter is used by slightly more engineers, though the difference is perhaps smaller than before. What happens if we consider per-country usage? Let’s start with the US, UK, Canada and Australia:
使用 Flutter 的工程師略多，不過差異可能比之前小。如果我們考慮每個國家的使用情況會如何？讓我們從美國、英國、加拿大和澳洲開始：

Flutter vs React Native usage by country. Source: Stack Overflow Developer Survey
Flutter vs React Native 在各國的使用率。資料來源：Stack Overflow 開發人員調查

Let’s look at other countries with a higher number of responses – the Netherlands, France, Poland, Brazil, Germany, and India:
讓我們看看其他回應數較多的國家 - 荷蘭、法國、波蘭、巴西、德國和印度：

Flutter vs React Native usage by country. Source: Stack Overflow Developer Survey
Flutter vs React Native 在各國的使用率。資料來源：Stack Overflow 開發人員調查

Developer framework preference seems to be linked to location. Germany and India somewhat prefer Flutter, while the US and UK tend towards React Native. I don’t have an explanation of the difference in preference by country; specifically: why Flutter is so much more favored in Germany, but React Native more popular in the US and UK. If you have any thoughts on this, please share in the comment section, below.
開發人員對框架的偏好似乎與地點有關。德國和印度有點偏好 Flutter，而美國和英國則傾向 React Native。我無法解釋不同國家偏好的差異；特別是：為什麼 Flutter 在德國更受青睞，而 React Native 在美國和英國卻更受歡迎。如果您有任何想法，請在下方的評論區分享。

Flutter powers more apps, but React Native ones earn more revenue. It’s hard to accurately measure developers’ preferences, but determining the number of apps using each framework is easier. Appfigures did exactly this by tracking all apps released in a year and found that Flutter was used by 11% of apps released in 2024, while 7% used React Native:
Flutter 提供更多的應用程式，但 React Native 則賺得更多的收入。要精確衡量開發人員的偏好並不容易，但確定使用各框架的應用程式數量則比較容易。Appfigures 正是透過追蹤一年內發佈的所有應用程式，發現在 2024 年發佈的應用程式中，有 11% 使用 Flutter，而 7% 則使用 React Native：

Around 11% of apps released in 2024 used Flutter, 7% used React Native, and 4% Unity. Source: Appfigures
在 2024 年發表的應用程式中，約有 11% 使用 Flutter，7% 使用 React Native，4% 使用 Unity。資料來源：Appfigures資料來源：Appfigures

Appfigures also estimates revenue generated by apps. Despite having fewer users, React Native-built apps on aggregate generated more net revenue ($287M) than Flutter apps ($283M), after Apple and Google’s 30% cuts.
Appfigures 也估算了應用程式所創造的營收。儘管使用者人數較少，但 React Native 建置的應用程式在 Apple 和 Google 減價 30% 之後，總計所產生的淨營收 (2.87 億美元) 仍高於 Flutter 應用程式 (2.83億美元)。

The following section looks into each framework.
下文將探討各個架構。

2. React Native  2.React 原生

React Native appears to be the most popular cross-platform framework in the US and UK markets. What are the likely reasons for this popularity?
React Native 似乎是美國和英國市場上最流行的跨平台框架。如此受歡迎的原因可能是什麼？

• No need for frontend developers to learn a new language. Developers who know JavaScript or TypeScript will have no trouble getting started with React Native, and devs working with React will find the transition especially easy. As we know, React is the most popular frontend framework, with around 70% of frontend developers using it in 2024, as per the State of Frontend 2024 survey.
  前端開發人員無需學習新的語言。熟悉 JavaScript 或 TypeScript 的開發人員在開始使用 React Native 時不會有任何問題，而使用 React 的開發人員也會發現轉換特別容易。我們知道 React 是最流行的前端框架，根據 State of Frontend 2024 的調查，2024 年約有 70% 的前端開發人員使用 React。

• Easy enough to hire for. React’s popularity means it’s a bit easier to hire for this skillset, than for native iOS or Android developers. The challenge of hiring native developers was one reason Coinbase moved to React Native in 2021.
  僱用容易。React 的受歡迎程度意味著，相較於原生 iOS 或 Android 開發人員，僱用此技術組別的人員較為容易。雇用原生開發人員的挑戰是 Coinbase 在 2021 年轉移到 React Native 的原因之一。

• Expo. The Expo framework is built to simplify development with React Native, and is especially useful for teams. It helped boost adoption of React Native; without Expo, developers must set up both Android Studio and Xcode, manage emulators and simulators, and manage the native code. React Native’s own documentation recommends using Expo when getting started, as doing so without it makes the work several times more complex. Most of Expo is open source, but some services like Expo Application Services (EAS) have paid tiers.
  Expo.Expo 框架是為了簡化使用 React Native 開發而建立的，對於團隊來說尤其有用。它有助於提高 React Native 的採用率；如果沒有 Expo，開發人員必須同時設定 Android Studio 和 Xcode、管理模擬器和模擬器，以及管理原生程式碼。React Native 本身的說明文件建議在入門時使用 Expo，因為不使用 Expo 會讓工作複雜度增加數倍。Expo 大部分都是開放原始碼，但有些服務如 Expo 應用程式服務 (EAS) 是付費的。

React Native was open sourced by Facebook, in 2015. As the name suggests, this framework allows creating cross-platform apps using syntax similar to React applications. Here’s how a “Hello, World” app looks like using React Native:
React Native 於 2015 年由 Facebook 開放源碼。顧名思義，這個框架允許使用類似 React 應用程式的語法建立跨平台應用程式。以下是使用 React Native 的「Hello, World」應用程式的外觀：

A simple React Native example. Source: React Native documentation
一個簡單的 React Native 實例。來源：React Native 文件

React primitives render to native platform UI elements, which means the compiled app uses the same native UI elements as native iOS and Android apps.
React 原始元素會呈現為原生平台 UI 元素，這表示編譯後的應用程式會使用與原生 iOS 和 Android 應用程式相同的原生 UI 元素。

Check out a behind-the-scenes peek into how the React.js documentary was created from two years ago.
看看兩年前 React.js 記錄片創作的幕後花絮。

Well-known React Native apps
知名的 React Native 應用程式

Some popular apps built with this technology include:
使用此技術建立的一些熱門應用程式包括

Discord. The social platform moved to React Native in 2016 for iOS, and in 2018, two engineers rebuilt the iOS app in React Native at a time when the app already had millions of daily users. The team held off on moving to Android for performance reasons, until in 2022 they moved the Android app to React Native; sharing the same codebase, and keeping iOS and Android-specific UI for each platform.
Discord。這個社群平台在 2016 年將 iOS 移至 React Native，在 2018 年，兩位工程師以 React Native 重建 iOS 應用程式，當時該應用程式已經擁有數百萬的每日使用者。基於效能的考量，團隊暫緩移轉至 Android，直到 2022 年，他們將 Android 應用程式移轉至 React Native；共用相同的程式碼庫，並為每個平台保留 iOS 和 Android 特定的 UI。

It’s worth noting Discord often opts for cross-platform technologies: its desktop apps for Windows, Mac, and Linux are based on Electron; a cross-platform desktop technology based on JavaScript, HTML, and CSS.
值得注意的是，Discord 常常選擇跨平台技術：Windows、Mac 和 Linux 的桌面應用程式都是以 Electron 為基礎；Electron 是一種以 JavaScript、HTML 和 CSS 為基礎的跨平台桌面技術。

Discord’s iOS and Android app. Source: Discord
Discord 的 iOS 和 Android 應用程式。資料來源Discord

Coinbase moved to React Native in 2021, when it had 56 million users and $1.8B in revenue. Moving off native to RN involved migrating more than 200 screens, and retraining more than 30 native-only engineers. Interestingly, Coinbase claimed that moving to RN reduced their cold start time from 3.8 seconds to 2.5 seconds (still quite a lot, to be fair!), and improved reliablity by increasing the crash-free rate from 99.4% to 99.7%.
Coinbase 在 2021 年轉移到 React Native，當時它有 5600 萬使用者和 18 億美元的營收。從原生轉換到 RN 需要遷移 200 多個螢幕，並重新訓練 30 多位只使用原生的工程師。有趣的是，Coinbase 宣稱轉用 RN 後，冷啟動時間從 3.8 秒縮短到 2.5 秒 (說實話，還是很長！)，而且無當機率從 99.4% 提高到 99.7%，改善了可靠度。

A big motivation seemed to be to build more with fewer engineers, and make more consistent app experiences across platforms. The company labelled the transition a success: it reduced the number of codebases from 3 (iOS, Android and Web) to 2 (React Native and React Web), and web engineers could work on the mobile app, and mobile engineers on the web one.
其中一個很大的動機似乎是以更少的工程師建立更多的應用程式，並且在不同的平台上提供更一致的應用程式體驗。該公司將這次轉型稱為成功：它將代碼庫的數量從 3 個（iOS、Android 和 Web）減少到 2 個（React Native 和 React Web），Web 工程師可以負責移動應用程式，而移動工程師則負責 Web 應用程式。

Coinbase app built using React Native. Source: Coinbase
使用 React Native 建立的 Coinbase 應用程式。來源：CoinbaseCoinbase

Shopify went all-in on React Native five years ago. Just this week, the company reflected on how it went, sharing:
五年前，Shopify 全力投入 React Native 的開發。就在本周，該公司反思了它的發展過程，並分享道：

• More productivity: thanks to one codebase powering iOS and Android, and working across both apps
  更高的生產力：由於 iOS 和 Android 採用相同的程式碼基礎，並可在兩個應用程式之間運作

• Performance and reliability: all pages have sub-500ms loads and crash-free rates are above 99.9%. Both are impressive numbers!
  效能與可靠度：所有網頁的載入速度都低於 500 毫秒，無當機率超過 99.9%。兩者都是令人印象深刻的數字！

• TypeScript for the win: using TypeScript makes it easy for devs to transfer between React and React Native.
  TypeScript 的勝利：使用 TypeScript 可以讓開發人員輕鬆地在 React 和 React Native 之間轉換。

• There are downsides: debugging is worse than for native apps, and updating to new React Native versions can be painful.
  但也有缺點：除錯比原生應用程式差，而且更新到新的 React Native 版本可能會很痛苦。

Shopify employs more than 2,000 software engineers, and is one of the largest tech companies to go all-in on this technology. That it’s working for them, five years later, is a strong vote of confidence. Read more about Shopify’s 5-year reflections on RN.
Shopify 擁有超過 2,000 名軟體工程師，是全力投入這項技術的最大科技公司之一。五年之後，這項技術對他們來說仍然有效，這是對他們的強烈信心。閱讀更多有關 Shopify 對 RN 5 年的反思。

Meta, Microsoft, and Amazon are not known for fully React-native apps, but do use plenty of RN functionality in their apps:
Meta、Microsoft 和 Amazon 並非以完全 React-native 應用程式而聞名，但在其應用程式中使用了大量 RN 功能：

• Meta: React Native’s creator utilizes it heavily for Facebook, Instagram, Ads Manager, Messenger, and Meta Horizon. The company recently shared that more than of its 5,000 engineers work with React code, and Meta apps have some clever React Native-related performance enhancements; for example, in the Facebook app, React Native is initialized when a user visits the first React Native surface, and not on app start. This allows for faster app startup.
  Meta：React Native 的創造者在 Facebook、Instagram、Ads Manager、Messenger 和 Meta Horizon 中大量使用 React Native。該公司最近分享，其 5,000 多位工程師都在使用 React 程式碼，而 Meta 應用程式也有一些巧妙的 React Native 相關效能增強功能；例如，在 Facebook 應用程式中，React Native 會在使用者造訪第一個 React Native 表面時初始化，而不是在應用程式啟動時初始化。這可加快應用程式的啟動速度。

• Microsoft: the tech giant uses both React and React Native in products like Windows, XBox, Microsoft Office, Microsoft Teams, and other apps. The Windows maker is a heavy user of this technology for native performance and cross-platform code sharing reasons, as it said in 2022. Microsoft has also started to invest heavily in React Native for Windows and MacOS.
  微軟：這家科技巨頭在 Windows、XBox、Microsoft Office、Microsoft Teams 等產品及其他應用程式中使用 React 與 React Native。Windows 製造商是這項技術的重度使用者，原因是原生效能和跨平台程式碼分享，正如它在 2022 年所說的。微軟也開始大力投資 Windows 和 MacOS 的 React Native。

• Amazon: parts of Amazon Shopping, Amazon Alexa, and Amazon Photos also utilize RN, as per the React Native showcase. Also, Amazon’s Kindle device uses it.
  亞馬遜：根據 React Native 的展示，亞馬遜購物、亞馬遜 Alexa 和亞馬遜照片的部分內容也使用了 RN。此外，亞馬遜的 Kindle 裝置也使用了它。

The home screen of Kindle is rendered with React Native, after Amazon migrated away from a Java-based UI in 2022.
在 Amazon 於 2022 年捨棄以 Java 為基礎的 UI 之後，Kindle 的首頁畫面採用 React Native 繪製。

The Kindle home screen is rendered using React Native. Source: Goodreader
Kindle 首頁畫面使用 React Native 渲染。來源：GoodreaderGoodreader

There are plenty of other, well-known apps building on top of React Native. Bloomberg moved over to this framework shortly after it was launched, back in 2016.
在 React Native 之上建置的知名應用程式還有很多。早在 2016 年，Bloomberg 就在推出後不久轉移到這個框架。

Some high-profile apps that use React Native, even if not built exclusively with it. Source: React Native showcase
一些使用 React Native 的高知名度應用程式，即使並非完全使用 React Native 建立。來源：React Native 展示

3. Flutter  3.翩翩起舞

Flutter was launched in 2017 by Google as a solution for cross-platform development. Initially, it targeted Android developers, allowing them to write code once for separate Android and iOS native applications.
Flutter 於 2017 年由 Google 推出，作為跨平台開發的解決方案。最初，它針對 Android 開發人員，允許他們為獨立的 Android 和 iOS 原生應用程式編寫一次程式碼。

Flutter uses the Dart programming language, a strongly-typed language with similar syntax to C# and Java. A clear downside of Flutter is the requirement to learn Dart. However, this is easy to pick up, especially with experience of Java or Kotlin. Here’s what a simple Flutter application looks like:
Flutter 使用 Dart 程式語言，這是一種強式類型語言，語法與 C# 和 Java 相似。Flutter 的一個明顯缺點是需要學習 Dart。不過，這很易上手，尤其是有 Java 或 Kotlin 經驗的人。以下是一個簡單的 Flutter 應用程式：

A simple Flutter app, written in Dart
以 Dart 寫成的簡單 Flutter 應用程式

RN uses native elements, but Flutter uses its own rendering engine called the Impeller rendering engine. This design choice means Flutter offers consistent UI experience across iOS and Android – and even the web! The rendering engine and the programming language of choice are the biggest differences compared to React Native, and native development. Here is how Jordan Bonnet – formerly the first mobile engineer at Uber and current founder of Flutter user onboarding startup fluo.dev – explained this difference to me:
RN 使用原生元素，但 Flutter 使用自己的渲染引擎，稱為 Impeller 渲染引擎。這樣的設計選擇意味著 Flutter 能在 iOS 和 Android - 甚至是網頁上提供一致的 UI 體驗！與 React Native 以及原生開發相比，渲染引擎和程式語言的選擇是最大的差異。以下是 Jordan Bonnet - 前 Uber 第一位行動工程師，目前 Flutter user onboarding startup fluo.dev 的創辦人 - 如何向我解釋這個差異：

Summarizing the differences between the three platforms. The mental model shared by Jordan Bonnet, cofounder of fluo.dev
總結三個平台的差異。fluo.dev 共同創辦人 Jordan Bonnet 分享的心智模式

Performance: where Flutter flies
效能：Flutter 飛翔的地方

Thanks to having its own rendering engine, Flutter facilitates clever things such as better performance than even native apps can achieve using platform UI elements.
由於 Flutter 擁有自己的呈現引擎，因此能提供更聰明的功能，例如比使用平台 UI 元素的原生應用程式還要優異的效能。

Performance has been a focus for Flutter since its early days. Given Google built Android and low-end Android devices are ubiquitous, the only way for Flutter to gain adoption was to be much more performant than other cross-platform frameworks, to the point of offering similar performance as native apps.
從 Flutter 早期開始，效能就一直是它的重點。由於 Android 由 Google 一手打造，而低階 Android 裝置又無處不在，因此 Flutter 要獲得採用的唯一方法，就是比其他跨平台框架更具效能，甚至提供與原生應用程式相近的效能。

Even in the Flutter 1.0 release in 2018, Google emphasized the focus on performance. In August 2024, software engineer Natesh Bhat tested it against RN and found Flutter consistently used less memory, and had higher frames per second (FPS) at a fraction of RN’s CPU usage. On Android, the performance difference was noticeable:
即使在 2018 年的 Flutter 1.0 版本中，Google 也強調了對效能的重視。2024 年 8 月，軟體工程師 Natesh Bhat 對 RN 進行了測試，發現 Flutter 始終使用較少的記憶體，而且每秒幀數 (FPS) 較高，CPU 使用量僅為 RN 的一小部分。在 Android 上，效能差異十分明顯：

Comparing a ListView performance [scrolling a list] on Flutter vs React Native, on Android. Source: Natesh Bhat
比較 Android 上 Flutter 與 React Native 的 ListView 效能 [捲動清單]。來源：Natesh Bhat

Interestingly, performance differences are more striking on iOS:
有趣的是，iOS 上的效能差異更為顯著：

Comparing a ListView performance [scrolling a list] on Flutter vs React Native, on iOS. Source: Natesh Bhat
比較 iOS 上 Flutter 與 React Native 的 ListView 效能 [捲動清單]。來源：Natesh Bhat

Other benchmarks confirm that Flutter performs better than RN. A December 2024 benchmark by software engineer, Marco Souza, confirmed Flutter uses significantly less memory and CPU, while rendering at a similar FPS rate.
其他基準測試證實 Flutter 的效能優於 RN。軟體工程師 Marco Souza 在 2024 年 12 月進行的一項基準測試證實 Flutter 使用的記憶體和 CPU 遠少於 RN，而渲染的 FPS 率卻與 RN 相近。

Flutter is a more obvious choice for lower-end devices. Given it and RN run with similar FPS in most performance benchmarks, the real difference is in memory and CPU usage. This means that on a high-end device with plenty of memory and dedicated CPU cores, RN might feel as performant as Flutter. In this case, the question is not about performance, but about developer experience and framework preferences.
Flutter 是較低階裝置的明顯選擇。鑑於它和 RN 在大多數效能測試中的 FPS 相近，真正的差異在於記憶體和 CPU 的使用量。這表示在擁有大量記憶體和專用 CPU 核心的高階裝置上，RN 的效能可能與 Flutter 不相伯仲。在這種情況下，問題不在於效能，而是開發人員的經驗和框架偏好。

Flutter for Web  網頁版 Flutter

React Native offers a major benefit: teams can keep using React for their web app. When using RN, there are a few ways to share code:
React Native 提供了一大好處：團隊可以繼續使用 React 來開發網頁應用程式。使用 RN 時，有幾種方式可以分享程式碼：

1. Use RN for the web, so that one codebase powers web, iOS and Android. This is what Bluesky is doing, and how the company managed to build all three platforms with a single engineer, initially.
   在網頁上使用 RN，讓網頁、iOS 和 Android 都能使用同一個程式碼庫。這就是 Bluesky 正在做的事，也是該公司最初如何以單一工程師建立所有三個平台的方法。

2. Share a good part of the RN codebase with the React web app, but not all of it.
   與 React Web 應用程式共用 RN 程式碼庫的大部分，但不是全部。

3. Share no code between React Native and React web, but mobile developers can make changes on the web, and vice versa.
   React Native 與 React Web 之間不共用程式碼，但行動開發人員可以在 Web 上進行變更，反之亦然。

Flutter introduced experimental web support in 2019, and shipped the first production-ready web version in 2021, when announcing Flutter 2.0. In 2023, experienced web developer, David Somekh, summarized his experience with Flutter for Web:
Flutter 在 2019 年推出實驗性網頁支援，並在 2021 年發表 Flutter 2.0 時，出貨了第一個可量產的網頁版本。2023 年，經驗豐富的網頁開發人員 David Somekh 總結了他使用 Flutter for Web 的經驗：

“I can’t even begin to describe how great the Flutter framework is! You get tons of GUI widgets (Components if you are coming from React) That work great and are super easy to work with. Almost every customization you can think of; it’s there!
"我無法形容 Flutter 框架有多棒！您可以使用大量的 GUI 小工具（如果您來自 React，則使用 Components），它們運作起來非常好，而且超級容易上手。幾乎所有您能想到的客製化功能都在這裡！

The developer experience is really top shelf, and the Flutter IDE for VS code is amazing, and you debug super fast with the “hot reload” feature that enables you to see changes immediately without building again. Flutter is used with Dart, which was developed by Google, and I really love it.
開發人員的體驗真的是一流的，用於 VS 程式碼的 Flutter IDE 非常驚人，使用「hot reload」功能可以讓您立即看到變更，無須重新建立，調試速度超快。Flutter 與 Google 開發的 Dart 搭配使用，我真的很喜歡它。

But, things ticked a lot better on mobile than on web. That being said, I still have to say that flutter web is still great, but in my experience just not yet perfect.
但是，移動端的表現比網頁端好很多。話雖如此，我還是得說 Flutter Web 仍然很棒，但就我的經驗而言，還不夠完美。

[For example,] what gets rendered on the screen is not really text, it’s actually an image. So you can’t search in it, you can’t highlight it, and you can’t copy it. And you also don’t have a built-in browser spell check. Which means that users cannot see if the text they are typing has typos. This might seem as something small to some of you, but it’s actually what bothers me about Flutter web the most.
[例如，]顯示在螢幕上的並非真正的文字，它實際上是一張圖片。因此您無法在其中搜尋、反白或複製。而且您也沒有內建的瀏覽器拼字檢查功能。這表示使用者無法看到他們輸入的文字是否有錯字。這對某些人來說可能是小事，但實際上卻是 Flutter Web 最讓我困擾的地方。

Websites created with flutter, after optimization, take about 3–5 seconds to load, until you see the complete page.
使用 flutter 建立的網站，經過最佳化之後，大約需要 3-5 秒才能載入，直到您看到完整的頁面。

​​Buttons can have delayed response, and also the animations can become slower. Overall, even though a website developed withFlutter can really look amazing, it feels less performant than pure HTML / JAVASCRIPT.
按鈕的反應可能會延遲，動畫也會變慢。總體來說，即使使用 Flutter 開發的網站看起來真的很驚人，但它的效能卻不如純 HTML / JAVASCRIPT。

Pressing up and down has no effect on the scrollbar. I am assuming you can write code to fix it (Flutter has an awesome widget called GestureDetector) but it doesn’t work out of the box.”
按上下鍵對捲動條沒有任何影響。我假設您可以寫程式碼來解決這個問題 (Flutter 有一個很棒的小工具，叫做 GestureDetector)，但它並沒有開箱即用"。

David was broadly positive about his Flutter for Web experience, but it just doesn’t seem to be quite “there” yet. Using Flutter for Web is possible, but can lead to:
David 對於他的 Flutter for Web 體驗大致上是正面的，但似乎還不夠「到位」。使用 Flutter for Web 是可行的，但可能會導致：

• A website with poor performance, worse than with HTML and JavaScript
  網站效能不佳，比使用 HTML 和 JavaScript 時還差

• Basic features missing that users are used to: copy-paste, spell checking, “find in page” feature, screen readers not working, and other accessibility issues. All these are due to Flutter’s custom rendering, and not using browser DOM objects
  使用者習慣的基本功能缺失：複製貼上、拼字檢查、「在頁面中尋找」功能、螢幕閱讀器失效，以及其他無障礙問題。所有這些都是因為 Flutter 的自訂呈現，以及未使用瀏覽器 DOM 物件所致。

• SEO issues: Flutter doesn’t render HTML, so search engines can’t parse and index the site
  SEO 問題：Flutter 不會呈現 HTML，因此搜尋引擎無法解析和索引網站

Many of these problems could only be fixed if Flutter abandoned its rendering of all elements, and started to generate DOM objects. However, this would run counter to how Flutter works. If you use Flutter to build a cross-platform mobile app, another technology will likely be needed to build the website.
只有 Flutter 放棄渲染所有元素，並開始產生 DOM 物件，才能解決這些問題。然而，這與 Flutter 的運作方式背道而馳。如果您使用 Flutter 來建立跨平台的行動應用程式，很可能需要另一種技術來建置網站。

High-profile Flutter apps
備受注目的 Flutter 應用程式

Google builds several of its apps using Flutter, which is no surprise given that it created the technology! Google Play, Google Earth, Google Ads, and Google Cloud, are all built on Flutter. Notable exceptions include the company’s biggest apps: Gmail, YouTube, and Maps.
Google 使用 Flutter 建立了多個應用程式，這並不令人意外，因為 Flutter 技術是 Google 一手創造的！Google Play、Google Earth、Google Ads 和 Google Cloud 都是使用 Flutter 建立的。值得注意的例外包括該公司最大的應用程式：Gmail、YouTube 和 Maps。

Honorable mentions: Nubank (banking), Universal Studios (amusement park app), Virgin Money (banking), eBay (shopping), and many many other smaller apps. Flutter seems to be a go-to choice for many auto companies, with BMW, Toyota, and Lucid Motors, all using it for their apps.
榮譽提名：Nubank（銀行業務）、Universal Studios（遊樂園應用程式）、Virgin Money（銀行業務）、eBay（購物）以及許多其他小型應用程式。Flutter 似乎是許多汽車公司的首選，BMW、Toyota 和 Lucid Motors 都使用 Flutter 來開發應用程式。

Overall, Flutter seems to have fewer high-profile apps than RN. Even with the impressive logos in the showcase, actual Flutter usage could be limited to smaller apps, even when a larger company is known to use Flutter. Take Wolt as an example, which is listed among Flutter customers. Wolt has a polished app – which I can attest to, having used it.
總體而言，Flutter 的高知名度應用程式似乎比 RN 少。即使有令人印象深刻的標誌展示，Flutter 的實際使用也可能僅限於較小的應用程式，即使已知有較大的公司使用 Flutter。以 Flutter 客戶中的 Wolt 為例。Wolt 有一個完美的應用程式 - 我可以證明這一點，因為我曾經用過它。

However, it does not use Flutter for any customer-facing app, nor does it have plans to use it for their flagship app. Instead, Wolt built a new app for its 160,000+ merchants to use on their tablets to manage retail delivery, called Merchant lite. Using Flutter allowed them to ship both an Android and iOS app — when they previously only supported iPads. And the team did this rapidly: two devs got it done in just 6 weeks. Read more on how the Wolt team built this app.
然而，Wolt 並未將 Flutter 應用於任何面向客戶的應用程式，也沒有將其用於旗艦應用程式的計劃。相反，Wolt 為其 160,000 多家商戶建立了一個新的應用程式，用於他們的平板電腦上管理零售交付，稱為 Merchant lite。使用 Flutter 使他們能夠同時推出 Android 和 iOS 應用程式，而之前他們只支援 iPad。該團隊迅速完成了這項工作：兩名開發人員在短短 6 周內就完成了這項工作。閱讀更多關於 Wolt 團隊如何建立此應用程式。

Wolt’s Merchant Lite app built with Flutter: Source: Wolt
使用 Flutter 建立的 Wolt Merchant Lite 應用程式: 資料來源: Wolt

Several other well-known logos on the Flutter case study page have a similar story, such as eBay: the e-commerce giant builds a new and smaller app with Flutter. They do this rapidly, and much faster than before. This could well be the first step in using Flutter: and thanks to a positive experience, start to invest more in Flutter, down the line.
Flutter 案例研究頁面上的其他幾個知名標誌也有類似的故事，例如 eBay：這家電子商務巨頭使用 Flutter 建立了一個全新的小型應用程式。他們這樣做的速度很快，比以前快得多。這很有可能是使用 Flutter 的第一步：由於經驗良好，開始對 Flutter 進行更多投資。

Even so, it is notable that apps using React Native are much better-known:
即使如此，值得注意的是，使用 React Native 的應用程式更為人所知：

Apps the React Native team, and ones that the Flutter team showcases as ones built using the respective technologies
React Native 團隊的應用程式，以及 Flutter 團隊展示的使用各自技術建立的應用程式

If success was judged by the profile of companies using a framework for their apps, and how impressive the Showcase pages are, then React Native would win. It boasts Meta, Microsoft, Amazon, and Shopify, whereas Google basically only has itself as a major user. At first, it could also be puzzling that Flutter seems to be hiding some of its most impressive reference apps like Nubank, BMW and eBay deep within the User Showcase — until you realize that the Flutter showcase page lists case studies in reverse chronological order, based on when they were added.
如果成功的判斷標準是應用程式使用框架的公司規模，以及 Showcase 頁面令人印象深刻的程度，那麼 React Native 應該是贏家。它擁有 Meta、微軟、亞馬遜和 Shopify，而 Google 基本上只有自己是主要使用者。一開始，Flutter 似乎將一些最令人印象深刻的參考應用程式，例如 Nubank、BMW 和 eBay 等，深藏在使用者展示頁中，這也可能令人不解 - 直到您發現 Flutter 展示頁是依據新增的時間，以相反的時間順序列出案例研究。

Luckily, frameworks are not judged just by showcase pages: and Flutter seems to be very sticky with developers. Those building a single Flutter app are often hooked, and become Flutter converts for life, thanks to how well the framework works.
幸運的是，框架的好壞並非只由展示頁面決定：Flutter 似乎對開發人員很有黏性。那些只建過一個 Flutter 應用程式的開發人員，往往會因為 Flutter 架構的優異運作而上癮，成為 Flutter 的忠實擁護者。

What CTOs think of Flutter
CTO 對 Flutter 的看法

There are some interesting stats in the 2024 Flutter CTO report by LeanCode, which collated feedback from 281 CTOs:
LeanCode 的 2024 年 Flutter CTO 報告中有一些有趣的統計，該報告整理了 281 位 CTO 的回饋意見：

• Use for prototyping. 65% of companies use it for proof-of-concept applications early in the development cycle.
  用於原型設計。65% 的公司在開發週期的早期將其用於概念驗證應用。

• Concern that Google will “kill” Flutter. 56% of respondents question Google's long-term commitment to the framework, as the tech giant has killed many popular projects: selling off Google Domains, shutting down its games console Stadia, and discontinuing many others. A website tracks products discontinued by Google: it’s currently at 296 and counting.
  擔心 Google 會「殺掉」Flutter。56% 的受訪者質疑 Google 對框架的長期承諾，因為這家科技巨頭已殺掉許多熱門專案：賣掉 Google Domains、關閉遊戲主機 Stadia，以及停止許多其他專案。有個網站追蹤 Google 停產的產品：目前有 296 個，而且還在增加中。

• Major SEO worries for Flutter Web. 43% of respondents were concerned about web limitations, mainly that search engines don’t index pages created with Flutter.
  Flutter Web 的主要 SEO 隱憂。43% 的受訪者擔心網頁限制，主要是搜尋引擎不會索引使用 Flutter 建立的網頁。

• Choosing the right architecture: 62% of respondents found this to be the biggest problem in getting started.
  選擇正確的架構：62% 的受訪者認為這是入門的最大問題。

• Great tooling: only 9% of respondents had issues with the tooling.
  絕佳的工具：只有 9% 的受訪者在工具方面有問題。

The biggest challenges when starting with Flutter. Source: Flutter CTO Report, 2024
開始使用 Flutter 時最大的挑戰資料來源Flutter CTO 報告，2024 年

4. Native-first approaches
4.本機第一的方法

Most modern native applications for iOS are built using Swift, and a majority use Kotlin for Android. Cross-platform solutions which build on both languages are becoming more popular, and a benefit of them is that the native engineering team can continue to use their preferred language, while the framework generates a native app for the other platform.
大多數現代 iOS 原生應用程式都是使用 Swift 建立，而大多數 Android 原生應用程式則使用 Kotlin。以這兩種語言為基礎的跨平台解決方案越來越受歡迎，它們的好處是原生工程團隊可以繼續使用他們偏好的語言，而框架則為另一個平台產生原生應用程式。

Kotlin Multiplatform  Kotlin 多平台

Kotlin Multiplatform (KMP) is a set of tools for the Kotlin language built by JetBrains. Developers write code using Kotlin, and can use this code on iOS and Android, the web, desktop, and even server-side. The framework is relatively new, released as production-ready in November 2023. Kotlin Multiplatform is an extended version of an earlier framework called Kotlin Multiplatform Mobile (KMM), which allows for cross-platform iOS and Android.
Kotlin Multiplatform (KMP) 是 JetBrains 為 Kotlin 語言打造的一套工具。開發人員使用 Kotlin 寫程式碼，並可在 iOS 和 Android、Web、桌面甚至伺服器端使用這些程式碼。該框架相對較新，於 2023 年 11 月發佈可投入生產。Kotlin Multiplatform 是早期框架 Kotlin Multiplatform Mobile (KMM) 的延伸版本，可跨平台使用 iOS 和 Android。

Compose Multiplatform (CMP) is a declarative framework built on KMP and the UI framework Jetpack Compose, that many KMP apps use. The platform supports generating Android, iOS, desktop and web applications, with iOS support in beta, and Web support at the alpha stage. More on CMP.
Compose Multiplatform (CMP) 是建構在 KMP 與 UI 框架 Jetpack Compose 之上的宣告式框架，許多 KMP 應用程式都使用此框架。該平台支援產生 Android、iOS、桌上型電腦與網頁應用程式，其中 iOS 支援處於測試階段，而網頁支援則處於 alpha 階段。更多關於 CMP 的資訊。

Each KMP app includes three modules:
每個 KMP 應用程式包含三個模組：

• shared: where shared iOS and Android business logic lives
  共用：共用 iOS 和 Android 業務邏輯的位置

• composeApp: for Android-specific UI logic and business logic
  composeApp: 用於 Android 特定的 UI 邏輯和商業邏輯

• iosApp: for iOS-specific UI and business logic
  iosApp: 用於 iOS 特定的 UI 和業務邏輯

Structure of a KMP project. Source: KMP
KMP 專案的結構。來源：KMP

However, CMP does not render natively on iOS. While CMP “translates” to using native Android elements, on iOS it draws to a canvas controlled by the Compose runtime, rather than translating to native iOS UI components. CMP is preferred by companies investing heavily in native development, such as:
然而，CMP 並不能在 iOS 上以原生方式呈現。雖然 CMP 可「轉譯」為使用原生 Android 元素，但在 iOS 上，它會繪製到由 Compose runtime 控制的畫布，而非轉譯為原生 iOS UI 元件。大量投資於原生開發的公司會偏好 CMP，例如

• Netflix: Android and iOS studio apps uses KMP
  NetflixAndroid 和 iOS 工作室應用程式使用 KMP

• McDonald’s: uses KMP for their “Global Mobile App”
  麥當勞：在其 「全球移動應用程式 」中使用 KMP

• Quizlet (study tools): moved to KMP for their flashcard apps
  Quizlet (學習工具)：轉移至 KMP 的快閃記憶卡應用程式

A reason to choose KMP is when devs on the mobile team know Swift and Kotlin, and also to get to a point where more mobile code is reused.
選擇 KMP 的原因之一是行動團隊的開發人員瞭解 Swift 和 Kotlin，同時也是為了達到重複使用更多行動程式碼的目的。

Swift-based frameworks  基於 Swift 的框架

Skip: a framework that uses Swift and SwiftUI. Under the hood, it generates Kotlin code with Jetpack Compose UI elements for Android deployment. The framework adds minimal overhead to app binaries; a mere 100KB on iOS and 5MB on Android. Skip uses native rendering and uses native iOS and Android APIs. Beyond the additional compile time, there’s no runtime overhead! More about Skip.
Skip：一個使用 Swift 和 SwiftUI 的框架。在引擎蓋下，它會為 Android 部署產生具有 Jetpack Compose UI 元素的 Kotlin 程式碼。該架構對應用程式二進位的開銷極小；在 iOS 上僅 100KB，在 Android 上僅 5MB。Skip 使用原生渲染，並使用原生 iOS 和 Android API。除了額外的編譯時間外，沒有任何執行時的開銷！更多關於 Skip 的資訊。

How Skip renders a simple text on the screen. Source: Skip
Skip 如何在螢幕上渲染簡單的文字。來源：Skip跳過

Scade: an open-source framework with a clever approach to cross-platform compatibility named Fusion architecture. Fusion generates a “Swift Android API” that maps to the existing Java Android API. More about Scade.
Scade：一個開放源碼的架構，有一個聰明的跨平台相容性方法，命名為 Fusion 架構。Fusion 會產生一個「Swift Android API」，映射到現有的 Java Android API。更多關於 Scade 的資訊。

Fusion libraries generate a “Swift Android API” that maps to Android’s Java API. Source: Scade
Fusion 函式庫可產生「Swift Android API」，對應 Android 的 Java API。資料來源Scade

C#-based: MAUI and Xamarin
基於 C#：MAUI 和 Xamarin

Xamarin was a C#-based cross-platform framework. Founded in 2011, Microsoft acquired the company in 2016, and last year it ended support for Xamarin in favor of the new .NET MAUI framework.
Xamarin 是基於 C# 的跨平台框架。該公司成立於 2011 年，微軟於 2016 年收購該公司，並於去年終止對 Xamarin 的支援，改用新的 .NET MAUI 框架。

.NET MAUI (.NET Multi-platform App UI.) Create iOS, Android, and desktop apps, using C# and XAML, which should be familiar to anyone working in the Microsoft stack. Here’s what a simple app looks like with C# and this framework:
.NET MAUI (.NET Multi-platform App UI.) 使用 C# 和 XAML 創建 iOS、Android 和桌面應用程式，在 Microsoft 堆疊中工作的人應該都很熟悉。以下是使用 C# 和此架構製作的簡單應用程式：

Simple .NET MAUI app. Source: Melissa Houghton
簡單的 .NET MAUI 應用程式。來源：Melissa Houghton

It’s necessary to use Visual Studio for development, plus Xcode to build and deploy iOS apps. More about .NET MAUI.
必須使用 Visual Studio 進行開發，再加上 Xcode 來建立和部署 iOS 應用程式。更多關於 .NET MAUI 的資訊。

JavaScript-based: NativeScript
基於 JavaScript：NativeScript

NativeScript is an open source project that lets developers use JavaScript to build iOS and Android apps. The platform was started in 2015 by Telerik. In 2020, development moved to a smaller studio called nStudio. Here’s what it looks like:
NativeScript 是一個開放原始碼專案，可讓開發人員使用 JavaScript 建立 iOS 和 Android 應用程式。該平台於 2015 年由 Telerik 開發。2020 年，開發工作轉移到一個名為 nStudio 的小型工作室。以下是它的外觀：

“Hello World” in NativeScript. Source: Sara Bine
NativeScript 中的 "Hello World"。來源：Sara Bine

Under the hood, NativeScript uses native APIs. It dynamically creates native UI elements based on the XML definitions in the code at runtime.
在引擎蓋下，NativeScript 使用原生 API。在執行時，它會根據程式碼中的 XML 定義，動態建立原生 UI 元素。

Unity  統一性

Unity is a cross-platform games development platform, best known for use in building video games that run on desktop, consoles, and mobile devices. It's the most popular cross-platform framework, and it’s no surprise that Unity is the third most popular cross-platform framework since a large percentage of all native apps are games:
Unity 是一個跨平台的遊戲開發平台，最為人熟知的是用於建立可在桌上型電腦、遊戲機和行動裝置上運行的視訊遊戲。它是最流行的跨平台框架，由於所有原生應用程式中有很大比例是遊戲，因此 Unity 成為第三大最流行的跨平台框架也就不足為奇了：

We previously did a deep dive on building a simple game with Unity. It’s a good place to get started if you’re interested in the framework.
我們之前曾深入探討如何使用 Unity 建立一個簡單的遊戲。如果您對這個框架有興趣，這是個入門的好地方。

5. Web-based frameworks  5.基於 Web 的框架

One reason web-based frameworks like Cordova, Capacitor/Ionic, and progressive web apps (PWAs), work like they do, is to render a web view inside a native app, and offer APIs to access platform-specific APIs.
像 Cordova、Capacitor/Ionic 和漸進式網頁應用程式 (PWA) 之類的網頁式框架之所以能夠如此運作，其中一個原因就是在原生應用程式中渲染網頁視圖，並提供 API 來存取特定平台的 API。

The biggest downside of this approach is performance. For the UI to appear, a web browser needs to be loaded into memory and spun up, resulting in a noticeable delay for many users. Also, gestures like swiping and tapping may feel “off” because the browser needs to first capture and process these events.
這種方法最大的缺點是效能。為了讓 UI 出現，網頁瀏覽器需要載入記憶體並開啟，因此對許多使用者而言會造成明顯的延遲。此外，滑動和點擊等手勢可能會感覺「不對」，因為瀏覽器需要先擷取並處理這些事件。

In general, web-based frameworks are becoming less popular as other cross-platform frameworks become more performant with better developer tooling. Still, web-based frameworks remain the simplest way to build a cross-platform app because all that’s needed is knowledge of HTML and JavaScript.
一般而言，由於其他跨平台框架的效能愈來愈好，開發人員的工具也愈來愈完善，因此網頁型框架變得越來越不流行。不過，基於網頁的框架仍然是建立跨平台應用程式最簡單的方法，因為只需要 HTML 和 JavaScript 的知識。

Cordova  科爾多瓦

Apache Cordova is an open source framework to build apps using HTML, CSS and JavaScript. It exposes APIs for the web app to access mobile APIs like inputs, sensors and services, and is rendered in a WebView.
Apache Cordova 是使用 HTML、CSS 和 JavaScript 建立應用程式的開放原始碼框架。它為 Web 應用程式揭露 API，以便存取行動 API，例如輸入、感測器和服務，並以 WebView 呈現。

How Cordova works. Source: Apache Cordova
Cordova 如何運作來源：Apache Cordova

An interesting historical detail: Adobe PhoneGap was a cross-platform framework built on top of Cordova – discontinued in 2020. See more about Cordova.
一個有趣的歷史細節：Adobe PhoneGap 是建構在 Cordova 之上的跨平台框架 - 已於 2020 年停產。查看更多有關 Cordova 的資訊。

Capacitor and Ionic  電容和離子

Capacitor.js is a cross-platform runtime engine created in 2018, as an alternative to Cordova which remains pretty popular today.
Capacitor.js 是於 2018 年創建的跨平台運行引擎，作為 Cordova 的替代方案，Cordova 至今仍相當受歡迎。

Ionic framework was started in 2012, and today uses Capacitor.js. Its biggest selling point is that it offers enterprise features for more complex apps:
Ionic framework 始於 2012 年，目前使用 Capacitor.js。它最大的賣點是為更複雜的應用程式提供企業功能：

• AppFlow provides a complete mobile DevOps solution with native builds, live updates, and app store publishing capabilities
  AppFlow 提供完整的行動 DevOps 解決方案，具備原生建立、即時更新和應用程式商店發佈功能

• Identity Vault handles security and biometric authentication
  Identity Vault 處理安全性和生物辨識驗證

• Secure Storage offers dedicated database solutions for applications
  Secure Storage 為應用程式提供專用資料庫解決方案

• Auth Connect streamlines sign-in and user authentication processes
  Auth Connect 簡化登入和使用者驗證程序

Progressive Web Apps (PWAs)
進階網路應用程式 (PWA)

PWAs are browser-first and run web applications with enhanced platform capabilities. They access native features through browser APIs, not WebViews, support offline features, and can be installed to the home screen. Chrome and Android heavily support PWAs, while iOS and Safari offer moderate support. More about PWAs; for example, last year Apple planned to block PWAs on devices in the EU, then reversed this decision.
PWA 是瀏覽器優先運行的網路應用程式，具有增強的平台功能。它們透過瀏覽器 API（而非 WebViews）存取原生功能，支援離線功能，並可安裝至主螢幕。Chrome 和 Android 大幅支援 PWA，而 iOS 和 Safari 則提供中度支援。更多關於 PWA 的資訊；例如，去年 Apple 計劃在歐盟地區的裝置上封鎖 PWA，之後又推翻這項決定。

6. Choosing the right framework
6.選擇正確的架構

With so many different frameworks to choose from, how to choose the right one? The biggest difference between platforms is how they render UI. Based on that, here’s a mental model:
有這麼多不同的框架可供選擇，該如何選擇正確的框架呢？平台之間最大的差異在於如何呈現 UI。基於此，這裡有一個心智模型：

A way to think about differences between frameworks
思考框架間差異的方法

Top business apps bias for native, and then for React Native. In May 2024, Evan Bacon – software developer and creator of Expo Router – analyzed the top 100 Business apps in the US App Store and found this split:
頂級商業應用偏向原生，然後是 React Native。2024 年 5 月，Evan Bacon - 軟體開發人員及 Expo Router 的創造者 - 分析了美國 App Store 前 100 名的商業應用程式，發現有這樣的分野：

• 63%: Native  63%:原住民

• 26%: React Native  26%:React Native

• 8%: Cordova  8%:科爾多瓦

• 3%: Flutter  3%:飄

Still, there is no single “best” solution. It’s about which tradeoffs are acceptable or not, in your specific situation:
不過，並沒有單一的「最佳」解決方案。這是關於在您的特定情況下，哪些取捨是可以接受的，哪些是不可以接受的：

• Native or native-first: when there are native mobile engineers, and a need to control the UI experience as much as possible. Even today, most mobile apps are native.
  原生或原生優先：當有原生行動工程師，並且需要盡可能控制 UI 體驗。即使在今天，大多數的行動應用程式都是原生的。

• React Native: when there is an existing React web app, and the performance tradeoffs with React Native are acceptable, as with high-end devices. There are more publicized success stories of larger teams using RN with more complex apps – including gradual adoption – than with Flutter.
  React Native：當已有 React Web 應用程式，且使用 React Native 的效能折衷是可以接受的，例如高階裝置。與 Flutter 相比，有更多大型團隊使用 RN 來開發更複雜應用程式的成功案例，包括逐步採用。

• Flutter: when performance is a priority, and the mobile codebase doesn’t need to be reusable by the web team. It’s a popular choice for apps that need to be built in weeks and not quarters, standalone apps, new apps the business needs to build, as well as for indie devs or small and fast-moving teams.
  Flutter：當效能是優先考量，且行動程式碼庫不需要網頁團隊重複使用時。對於需要在幾週而非幾個季度內建立的應用程式、獨立應用程式、業務需要建立的新應用程式，以及獨立開發人員或小型快速移動團隊來說，Flutter 是很受歡迎的選擇。

• .NET MAUI: when sticking to the Microsoft development environment.
  .NET MAUI：當堅持使用 Microsoft 開發環境時。

• NativeScript: If you love JavaScript; and why not?
  NativeScript：如果您喜歡 JavaScript，為什麼不呢？

• Cordova, PWAs, Ionic: web views get the job done. This approach is common with native apps for which only a part of the app uses web views which don’t load on app launch.
  Cordova、PWA、Ionic：Web 視圖完成工作。這種方法在原生應用程式中很常見，因為只有部分應用程式會使用網頁檢視，而網頁檢視不會在應用程式啟動時載入。

• Unity: when building a game.
  Unity: 建立遊戲時。

Takeaways  心得

As always, when choosing a technology, evaluate your own goals and constraints. There are productive teams using every single one of the technologies mentioned in this article.
一如往常，在選擇技術時，請評估您自己的目標和限制。有些團隊使用這篇文章中提到的每一種技術都很有成效。

Choosing one technology also doesn’t mean you need to stick with it forever. Take productivity and note-taking suite Notion as an example; its app started as a Cordova-based iOS and Android application in 2017. In 2020, the team decided they had outgrown Cordova and opted to gradually move to fully native. At time of publication, the editor is still a WebView within Notion, but other parts of the apps are fully native.
選擇一種技術也不代表您需要永遠堅持使用它。以生產力與筆記套件 Notion 為例，其應用程式在 2017 年開始採用基於 Cordova 的 iOS 與 Android 應用程式。2020 年，該團隊決定他們已經超越 Cordova，並選擇逐漸轉換為完全原生。在本文發表時，編輯器仍是 Notion 內的 WebView，但應用程式的其他部分則是完全原生的。

You can listen to Notion’s founding iOS and Android engineers discuss this big decision on The Pragmatic Engineer Podcast episode, Notion: going native on iOS and Android.
您可以在 The Pragmatic Engineer Podcast 的 Notion: going native on iOS and Android 一集中，聆聽 Notion 的 iOS 和 Android 創始工程師討論這項重大決定。

Thanks for reading this deep dive into the evolving world of cross-platform mobile development. I hope it helps you make an informed choice about which option is the best fit for your project, and other frameworks worth exploring.
感謝您閱讀這篇深入探討不斷演進的跨平台行動開發世界的文章。我希望它能幫助您做出明智的選擇，知道哪個選項最適合您的專案，以及其他值得探索的框架。

Finally, if you have experience with cross-platform development, leave a comment below!
最後，如果您有跨平台開發的經驗，請在下方留言！