本文由21CTO萬能的大雄分享，本文有修訂和改動(dòng)。

1、引言

在當(dāng)今快速發(fā)展的技術(shù)環(huán)境中，對跨平臺(tái)桌面應(yīng)用程序的需求正在不斷激增。

開發(fā)人員面臨著選擇正確框架之挑戰(zhàn)，以便可以高效構(gòu)建可在 Windows、macOS 和 Linux 上無縫運(yùn)行的應(yīng)用程序。

在本文中，我們將比較五種流行的桌面應(yīng)用程序開發(fā)框架：Electron、Flutter、Tauri、React Native 和 Qt，希望可以幫助你根據(jù)項(xiàng)目需求做出明智的技術(shù)選型決策。

2、系列文章

本文是系列文章中的第10篇，本系列總目錄如下：

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(一)：快速了解新一代跨平臺(tái)桌面技術(shù)——Electron》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(二)：Electron初體驗(yàn)(快速開始、跨進(jìn)程通信、打包、踩坑等)》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(三)：vivo的Electron技術(shù)棧選型、全方位實(shí)踐總結(jié)》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(四)：蘑菇街基于Electron開發(fā)IM客戶端的技術(shù)實(shí)踐》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(五)：融云基于Electron的IM跨平臺(tái)SDK改造實(shí)踐總結(jié)》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(六)：網(wǎng)易云信基于Electron的IM消息全文檢索技術(shù)實(shí)踐》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(七)：得物基于Electron開發(fā)客服IM桌面端的技術(shù)實(shí)踐》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(八)：新QQ桌面版為何選擇Electron作為跨端框架》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(九)：全面解密新QQ桌面版的Electron內(nèi)存占用優(yōu)化》

《IM跨平臺(tái)技術(shù)學(xué)習(xí)(十)：快速選型跨平臺(tái)框架Electron、Flutter、Tauri、React Native等》（* 本文）

3、初識框架

1）Electron：

* 技術(shù)背景：Electron 由 GitHub 開發(fā)，因其使用 HTML、CSS 和 JavaScript 等 Web 技術(shù)構(gòu)建跨平臺(tái)桌面應(yīng)用程序的能力而廣受歡迎。

* 主要功能：Electron 通過其 Node.js 集成提供對本機(jī) API 的輕松訪問，使開發(fā)人員能夠創(chuàng)建功能豐富的應(yīng)用程序。它還支持用 C++ 編寫的本機(jī)插件，盡管構(gòu)建這些插件可能更復(fù)雜且容易出錯(cuò)。

2）Flutter：

* 技術(shù)背景：Flutter 由 Google 創(chuàng)建，以其在移動(dòng)應(yīng)用程序開發(fā)中的使用而聞名，但也可用于桌面應(yīng)用程序。

* 主要特點(diǎn)：Flutter 提供了一組豐富的可定制 UI 小部件，其 Dart 代碼被編譯為本機(jī)機(jī)器代碼，從而實(shí)現(xiàn)快速執(zhí)行并減少開銷。它采用獨(dú)特的“基于小部件”架構(gòu)，提供豐富的可定制 UI 小部件。

3）Tauri：

* 技術(shù)背景：Tauri 是一個(gè)較新的框架，旨在創(chuàng)建安全且輕量級的桌面應(yīng)用程序。它旨在彌合 Rust 和 Web 技術(shù)之間的差距。

* 主要功能：Tauri 支持使用 Rust 或 C 構(gòu)建本機(jī)插件，從而可以訪問 Web 平臺(tái)中不可用的本機(jī) API 和功能。

4）React Native：

* 技術(shù)背景：React Native，同樣來自 Facebook，主要以移動(dòng)應(yīng)用程序開發(fā)而聞名，但也有桌面應(yīng)用程序開發(fā)的擴(kuò)展。

* 主要功能：React Native 提供了一種訪問本機(jī) API 和功能的方法，但與其他框架相比，它可能需要更多的努力。它支持無縫集成第三方庫。

5）Qt：

* 技術(shù)背景：Qt 是一個(gè) C++ 框架，綁定了多種語言，包括 Python 和 JavaScript。這是一個(gè)歷史悠久、歷史悠久的框架。

* 主要功能：Qt 提供出色的本機(jī)集成功能，允許開發(fā)人員訪問本機(jī) API 和功能。它提供了一套用于構(gòu)建跨平臺(tái)桌面應(yīng)用程序的全面工具，并強(qiáng)調(diào)本機(jī)外觀和感覺。

4、跨平臺(tái)能力

在跨平臺(tái)功能方面，Electron、Flutter、Tauri 和 Qt 足以在多個(gè)操作系統(tǒng)上運(yùn)行應(yīng)用程序。它們?yōu)?Windows、macOS 和 Linux 提供廣泛的支持，使其成為需要廣泛兼容性的項(xiàng)目的合適選擇。

React Native 雖然主要是為移動(dòng)設(shè)備設(shè)計(jì)的，但可以擴(kuò)展以創(chuàng)建桌面應(yīng)用程序。然而，它的跨平臺(tái)支持可能不像其他框架那樣無縫，并且可能需要額外的努力才能在所有平臺(tái)上實(shí)現(xiàn)一致的性能和 UI。

5、性能表現(xiàn)

性能是桌面應(yīng)用程序開發(fā)的關(guān)鍵因素。

以下是這些框架的性能特征：

• 1）Electron：以其較高的資源使用率而聞名，Electron 應(yīng)用程序可能會(huì)占用更多內(nèi)存和 CPU，從而影響較舊或功能較弱的計(jì)算機(jī)的性能；
• 2）Flutter：Flutter 的性能值得稱贊，這要?dú)w功于它的編譯代碼和 GPU 加速。它提供快速的啟動(dòng)時(shí)間和流暢的動(dòng)畫；
• 3）Tauri：Tauri 因其輕量級特性和低資源消耗而脫穎而出。它是構(gòu)建快速且響應(yīng)靈敏的桌面應(yīng)用程序的絕佳選擇；
• 4）React Native：React Native 桌面應(yīng)用程序可以節(jié)省資源，但跨平臺(tái)優(yōu)化性能可能需要額外的工作；
• 5）Qt：Qt 的性能非常出色，提供類似本機(jī)的速度和響應(yīng)能力。它是資源密集型應(yīng)用程序的首選。

6、用戶界面

創(chuàng)建豐富且響應(yīng)迅速的用戶界面是桌面應(yīng)用程序開發(fā)的一個(gè)重要指標(biāo)。

以下是這些框架在 UI 功能方面的比較：

• 1）Electron：Electron 提供了大量預(yù)構(gòu)建的 UI 組件和廣泛的主題選項(xiàng)。開發(fā)人員可以輕松創(chuàng)建具有視覺吸引力的應(yīng)用程序；
• 2）Flutter：Flutter 基于小部件的方法允許高度可定制且具有視覺吸引力的用戶界面。它提供了廣泛的開箱即用的小部件；
• 3）Tauri：Tauri 不像其他框架那樣提供那么多的 UI 組件，但允許對用戶界面進(jìn)行嚴(yán)格控制，這有利于創(chuàng)建獨(dú)特的設(shè)計(jì)；
• 4）React Native：通過React Native，開發(fā)人員可以使用第三方庫和組件進(jìn)行UI設(shè)計(jì)。可能需要額外的工作才能實(shí)現(xiàn)完全定制的外觀；
• 5）Qt：Qt 擅長提供與目標(biāo)平臺(tái)無縫集成的類似本機(jī)的 UI 元素。它是需要精美原生外觀的應(yīng)用程序的首選。

7、開發(fā)經(jīng)驗(yàn)

流暢的開發(fā)工作流程對于生產(chǎn)力至關(guān)重要。

以下是這些框架在開發(fā)經(jīng)驗(yàn)方面的比較：

• 1）Electron：Electron 提供了一套廣泛的開發(fā)工具和一個(gè)活躍的社區(qū)。調(diào)試和熱重載得到良好支持；
• 2）Flutter：由于其基于 widget 的架構(gòu)和強(qiáng)大的文檔，F(xiàn)lutter 的開發(fā)體驗(yàn)得到了簡化。熱重載是一個(gè)突出的功能；
• 3）Tauri：Tauri 仍然相對較新，但使用 Rust 和 JavaScript 提供了簡化的開發(fā)過程。它強(qiáng)調(diào)快速發(fā)展；
• 4）React Native：React Native 為 Web 和移動(dòng)開發(fā)人員提供了熟悉的開發(fā)體驗(yàn)。然而，過渡到桌面可能需要一個(gè)學(xué)習(xí)曲線；
• 5）Qt：Qt 提供了一個(gè)成熟的開發(fā)環(huán)境，具有廣泛的 IDE 和工具。它以其穩(wěn)定性和全面的文檔而聞名。

8、原生集成

訪問本機(jī)平臺(tái)功能和 API 對于許多桌面應(yīng)用程序至關(guān)重要。

讓我們看看這些框架如何處理本機(jī)集成：

• 1）Electron：Electron 通過 Node.js 集成提供對本機(jī) API 的輕松訪問。它還支持用 C++ 編寫的本機(jī)插件，盡管構(gòu)建這些插件可能更復(fù)雜且容易出錯(cuò)；
• 2）Flutter：Flutter 的 Dart 代碼被編譯為本機(jī)機(jī)器代碼，從而實(shí)現(xiàn)快速執(zhí)行并減少開銷。它采用了一種稱為“基于小部件”架構(gòu)的獨(dú)特方法，提供了一組豐富的可定制 UI 小部件；
• 3）Tauri：Tauri 支持使用 Rust 或 C 構(gòu)建原生插件，可用于訪問 Web 平臺(tái)中不可用的原生 API 和功能；
• 4）React Native：React Native 提供了一種訪問本機(jī) API 和功能的方法，但與其他框架相比可能需要更多的努力。它支持無縫集成第三方庫；
• 5）Qt：Qt 提供出色的本機(jī)集成功能。它是一個(gè) C++ 框架，綁定了多種語言，包括 Python 和 JavaScript，可用于訪問本機(jī) API 和功能。

9、社區(qū)與生態(tài)系統(tǒng)

開發(fā)人員社區(qū)的規(guī)模和活躍度，可以顯著影響框架的成功和第三方庫的可用性。

這些框架的表現(xiàn)如下：

• 1）Electron：Electron 擁有一個(gè)龐大而活躍的社區(qū)，提供大量可用的插件和擴(kuò)展；
• 2）Flutter：Flutter 擁有不斷增長的社區(qū)和越來越多的軟件包，主要專注于移動(dòng)開發(fā)，但也有桌面擴(kuò)展；
• 3）Tauri：Tauri 仍在成長，但其社區(qū)充滿熱情并致力于其發(fā)展。其生態(tài)系統(tǒng)正在穩(wěn)步擴(kuò)展；
• 4）React Native：React Native 擁有完善的社區(qū)，主要專注于移動(dòng)開發(fā)。桌面擴(kuò)展社區(qū)規(guī)模較小，但正在不斷增長；
• 5）Qt：Qt 擁有悠久的歷史和強(qiáng)大的生態(tài)系統(tǒng)，擁有龐大的工具、小部件和擴(kuò)展庫。

10、 框架們的成功案例

讓我們探索一些現(xiàn)實(shí)世界的用例和使用這些框架構(gòu)建的應(yīng)用程序示例，以更好地了解它們在不同場景中的優(yōu)點(diǎn)和缺點(diǎn)。

以下是具體的場景舉例：

• 1）Electron：廣泛用于構(gòu)建跨平臺(tái)桌面應(yīng)用程序，包括代碼編輯器（VSCode）、通信工具（Slack）和娛樂應(yīng)用程序（Spotify）；
• 2）Flutter：Flutter 逐漸成為富媒體應(yīng)用程序的選擇，已用于 Google Ads、阿里巴巴和 Reflectly 等應(yīng)用程序；
• 3）Tauri：Tauri 正在獲得輕量級、安全應(yīng)用程序的青睞，包括密碼管理器 (LosePass) 和通信工具 (Mailspring)；
• 4）React Native：雖然主要是一個(gè)移動(dòng)框架，但 React Native 已擴(kuò)展到 Discord 和 Microsoft Teams 等應(yīng)用程序中的桌面使用；
• 5）Qt：Qt 是一種多功能選擇，可用于從工業(yè)軟件到游戲和汽車信息娛樂系統(tǒng)的廣泛應(yīng)用。

11、開發(fā)時(shí)的挑戰(zhàn)

雖然每個(gè)框架都有其優(yōu)點(diǎn)，但必須意識到潛在的挑戰(zhàn)和限制。

比如這些：

• 1）Electron：Electron 應(yīng)用程序可能會(huì)占用大量資源，可能會(huì)導(dǎo)致舊硬件上出現(xiàn)性能問題；
• 2）Flutter：如果您主要是移動(dòng)開發(fā)人員，那么使用 Flutter 進(jìn)行桌面開發(fā)可能會(huì)涉及一個(gè)學(xué)習(xí)曲線；
• 3）Tauri：作為一個(gè)相對較新的框架，與更成熟的選項(xiàng)相比，Tauri 可能擁有較小的社區(qū)和較少的第三方庫；
• 4）React Native：將 React Native 轉(zhuǎn)換到桌面可能需要額外的努力，并且某些特定于平臺(tái)的功能可能更難訪問；
• 5）Qt：Qt 的學(xué)習(xí)曲線，特別是對于剛接觸 C++ 的開發(fā)人員來說，可能是一個(gè)挑戰(zhàn)。

12、本文小結(jié)

為桌面應(yīng)用程序開發(fā)選擇正確的框架很大程度上取決于項(xiàng)目的具體要求，例如目標(biāo)平臺(tái)、性能預(yù)期、UI 需求和所需的開發(fā)體驗(yàn)。

如果正在尋找一個(gè)允許你利用 Web 技術(shù)的框架，Electron和React Native是不錯(cuò)的選擇。Electron 擁有龐大的社區(qū)和廣泛的預(yù)構(gòu)建組件，而 React Native 提供強(qiáng)大的組件系統(tǒng)，并允許在移動(dòng)和桌面平臺(tái)之間重用代碼。

如果性能和小包大小是優(yōu)先考慮的，請考慮Flutter或Tauri。Flutter 提供快速的啟動(dòng)時(shí)間和流暢的動(dòng)畫，而 Tauri 則以其輕量級和低資源消耗而聞名。

如果你需要一個(gè)具有出色本機(jī)集成和本機(jī)外觀的框架，Qt是一個(gè)可靠的選擇。

如果你正在開發(fā)需要豐富的、可定制的用戶界面的復(fù)雜應(yīng)用程序，F(xiàn)lutter可能是最佳選擇，因?yàn)樗?widget 的開發(fā)方法。

還請各位開發(fā)者要記住，請考慮與每個(gè)框架相關(guān)的學(xué)習(xí)曲線，特別是如果你或團(tuán)隊(duì)尚不熟悉所涉及的技術(shù)。比如，Tauri 需要 Rust 或 C 的前置知識，而 Flutter 使用 Dart 做為預(yù)備知識。

13、相關(guān)資料

[1] Electron官方開發(fā)者手冊

[2] Flutter官方手冊

[3] Tauri官方手冊

[4] React Native開發(fā)指南

[5] QT官方文檔和手冊

[6] 快速了解新一代跨平臺(tái)桌面技術(shù)——Electron

[7] Electron初體驗(yàn)(快速開始、跨進(jìn)程通信、打包、踩坑等)

[8] vivo的Electron技術(shù)棧選型、全方位實(shí)踐總結(jié)

[9] 融云基于Electron的IM跨平臺(tái)SDK改造實(shí)踐總結(jié)

[10] 閑魚IM基于Flutter的移動(dòng)端跨端改造實(shí)踐

[11] 網(wǎng)易云信基于Electron的IM消息全文檢索技術(shù)實(shí)踐

（本文已同步發(fā)布于：http://www.52im.net/thread-4598-1-1.html）