IM跨平臺技術學習(十):快速對比跨平臺框架Electron、Flutter、Tauri、React Native等
Posted on 2024-01-11 10:58 Jack Jiang 閱讀(577) 評論(0) 編輯 收藏本文由21CTO萬能的大雄分享,本文有修訂和改動。
1、引言
在當今快速發展的技術環境中,對跨平臺桌面應用程序的需求正在不斷激增。
開發人員面臨著選擇正確框架之挑戰,以便可以高效構建可在 Windows、macOS 和 Linux 上無縫運行的應用程序。
在本文中,我們將比較五種流行的桌面應用程序開發框架:Electron、Flutter、Tauri、React Native 和 Qt,希望可以幫助你根據項目需求做出明智的技術選型決策。

- 移動端IM開發入門文章:《新手入門一篇就夠:從零開發移動端IM》
- 開源IM框架源碼:https://github.com/JackJiang2011/MobileIMSDK(備用地址點此)
(本文已同步發布于:http://www.52im.net/thread-4598-1-1.html)
2、系列文章
本文是系列文章中的第10篇,本系列總目錄如下:
《IM跨平臺技術學習(一):快速了解新一代跨平臺桌面技術——Electron》
《IM跨平臺技術學習(二):Electron初體驗(快速開始、跨進程通信、打包、踩坑等)》
《IM跨平臺技術學習(三):vivo的Electron技術棧選型、全方位實踐總結》
《IM跨平臺技術學習(四):蘑菇街基于Electron開發IM客戶端的技術實踐》
《IM跨平臺技術學習(五):融云基于Electron的IM跨平臺SDK改造實踐總結》
《IM跨平臺技術學習(六):網易云信基于Electron的IM消息全文檢索技術實踐》
《IM跨平臺技術學習(七):得物基于Electron開發客服IM桌面端的技術實踐》
《IM跨平臺技術學習(八):新QQ桌面版為何選擇Electron作為跨端框架》
《IM跨平臺技術學習(九):全面解密新QQ桌面版的Electron內存占用優化》
《IM跨平臺技術學習(十):快速選型跨平臺框架Electron、Flutter、Tauri、React Native等》(* 本文)
3、初識框架
1)Electron:

* 技術背景:Electron 由 GitHub 開發,因其使用 HTML、CSS 和 JavaScript 等 Web 技術構建跨平臺桌面應用程序的能力而廣受歡迎。
* 主要功能:Electron 通過其 Node.js 集成提供對本機 API 的輕松訪問,使開發人員能夠創建功能豐富的應用程序。它還支持用 C++ 編寫的本機插件,盡管構建這些插件可能更復雜且容易出錯。
2)Flutter:

* 技術背景:Flutter 由 Google 創建,以其在移動應用程序開發中的使用而聞名,但也可用于桌面應用程序。
* 主要特點:Flutter 提供了一組豐富的可定制 UI 小部件,其 Dart 代碼被編譯為本機機器代碼,從而實現快速執行并減少開銷。它采用獨特的“基于小部件”架構,提供豐富的可定制 UI 小部件。
3)Tauri:

* 技術背景:Tauri 是一個較新的框架,旨在創建安全且輕量級的桌面應用程序。它旨在彌合 Rust 和 Web 技術之間的差距。
* 主要功能:Tauri 支持使用 Rust 或 C 構建本機插件,從而可以訪問 Web 平臺中不可用的本機 API 和功能。
4)React Native:

* 技術背景:React Native,同樣來自 Facebook,主要以移動應用程序開發而聞名,但也有桌面應用程序開發的擴展。
* 主要功能:React Native 提供了一種訪問本機 API 和功能的方法,但與其他框架相比,它可能需要更多的努力。它支持無縫集成第三方庫。
5)Qt:

* 技術背景:Qt 是一個 C++ 框架,綁定了多種語言,包括 Python 和 JavaScript。這是一個歷史悠久、歷史悠久的框架。
* 主要功能:Qt 提供出色的本機集成功能,允許開發人員訪問本機 API 和功能。它提供了一套用于構建跨平臺桌面應用程序的全面工具,并強調本機外觀和感覺。
4、跨平臺能力
在跨平臺功能方面,Electron、Flutter、Tauri 和 Qt 足以在多個操作系統上運行應用程序。它們為 Windows、macOS 和 Linux 提供廣泛的支持,使其成為需要廣泛兼容性的項目的合適選擇。
React Native 雖然主要是為移動設備設計的,但可以擴展以創建桌面應用程序。然而,它的跨平臺支持可能不像其他框架那樣無縫,并且可能需要額外的努力才能在所有平臺上實現一致的性能和 UI。
5、性能表現
性能是桌面應用程序開發的關鍵因素。
以下是這些框架的性能特征:
- 1)Electron:以其較高的資源使用率而聞名,Electron 應用程序可能會占用更多內存和 CPU,從而影響較舊或功能較弱的計算機的性能;
- 2)Flutter:Flutter 的性能值得稱贊,這要歸功于它的編譯代碼和 GPU 加速。它提供快速的啟動時間和流暢的動畫;
- 3)Tauri:Tauri 因其輕量級特性和低資源消耗而脫穎而出。它是構建快速且響應靈敏的桌面應用程序的絕佳選擇;
- 4)React Native:React Native 桌面應用程序可以節省資源,但跨平臺優化性能可能需要額外的工作;
- 5)Qt:Qt 的性能非常出色,提供類似本機的速度和響應能力。它是資源密集型應用程序的首選。
6、用戶界面
創建豐富且響應迅速的用戶界面是桌面應用程序開發的一個重要指標。
以下是這些框架在 UI 功能方面的比較:
- 1)Electron:Electron 提供了大量預構建的 UI 組件和廣泛的主題選項。開發人員可以輕松創建具有視覺吸引力的應用程序;
- 2)Flutter:Flutter 基于小部件的方法允許高度可定制且具有視覺吸引力的用戶界面。它提供了廣泛的開箱即用的小部件;
- 3)Tauri:Tauri 不像其他框架那樣提供那么多的 UI 組件,但允許對用戶界面進行嚴格控制,這有利于創建獨特的設計;
- 4)React Native:通過React Native,開發人員可以使用第三方庫和組件進行UI設計。可能需要額外的工作才能實現完全定制的外觀;
- 5)Qt:Qt 擅長提供與目標平臺無縫集成的類似本機的 UI 元素。它是需要精美原生外觀的應用程序的首選。
7、開發經驗
流暢的開發工作流程對于生產力至關重要。
以下是這些框架在開發經驗方面的比較:
- 1)Electron:Electron 提供了一套廣泛的開發工具和一個活躍的社區。調試和熱重載得到良好支持;
- 2)Flutter:由于其基于 widget 的架構和強大的文檔,Flutter 的開發體驗得到了簡化。熱重載是一個突出的功能;
- 3)Tauri:Tauri 仍然相對較新,但使用 Rust 和 JavaScript 提供了簡化的開發過程。它強調快速發展;
- 4)React Native:React Native 為 Web 和移動開發人員提供了熟悉的開發體驗。然而,過渡到桌面可能需要一個學習曲線;
- 5)Qt:Qt 提供了一個成熟的開發環境,具有廣泛的 IDE 和工具。它以其穩定性和全面的文檔而聞名。
8、原生集成
訪問本機平臺功能和 API 對于許多桌面應用程序至關重要。
讓我們看看這些框架如何處理本機集成:
- 1)Electron:Electron 通過 Node.js 集成提供對本機 API 的輕松訪問。它還支持用 C++ 編寫的本機插件,盡管構建這些插件可能更復雜且容易出錯;
- 2)Flutter:Flutter 的 Dart 代碼被編譯為本機機器代碼,從而實現快速執行并減少開銷。它采用了一種稱為“基于小部件”架構的獨特方法,提供了一組豐富的可定制 UI 小部件;
- 3)Tauri:Tauri 支持使用 Rust 或 C 構建原生插件,可用于訪問 Web 平臺中不可用的原生 API 和功能;
- 4)React Native:React Native 提供了一種訪問本機 API 和功能的方法,但與其他框架相比可能需要更多的努力。它支持無縫集成第三方庫;
- 5)Qt:Qt 提供出色的本機集成功能。它是一個 C++ 框架,綁定了多種語言,包括 Python 和 JavaScript,可用于訪問本機 API 和功能。
9、社區與生態系統
開發人員社區的規模和活躍度,可以顯著影響框架的成功和第三方庫的可用性。
這些框架的表現如下:
- 1)Electron:Electron 擁有一個龐大而活躍的社區,提供大量可用的插件和擴展;
- 2)Flutter:Flutter 擁有不斷增長的社區和越來越多的軟件包,主要專注于移動開發,但也有桌面擴展;
- 3)Tauri:Tauri 仍在成長,但其社區充滿熱情并致力于其發展。其生態系統正在穩步擴展;
- 4)React Native:React Native 擁有完善的社區,主要專注于移動開發。桌面擴展社區規模較小,但正在不斷增長;
- 5)Qt:Qt 擁有悠久的歷史和強大的生態系統,擁有龐大的工具、小部件和擴展庫。
10、 框架們的成功案例
讓我們探索一些現實世界的用例和使用這些框架構建的應用程序示例,以更好地了解它們在不同場景中的優點和缺點。
以下是具體的場景舉例:
- 1)Electron:廣泛用于構建跨平臺桌面應用程序,包括代碼編輯器(VSCode)、通信工具(Slack)和娛樂應用程序(Spotify);
- 2)Flutter:Flutter 逐漸成為富媒體應用程序的選擇,已用于 Google Ads、阿里巴巴和 Reflectly 等應用程序;
- 3)Tauri:Tauri 正在獲得輕量級、安全應用程序的青睞,包括密碼管理器 (LosePass) 和通信工具 (Mailspring);
- 4)React Native:雖然主要是一個移動框架,但 React Native 已擴展到 Discord 和 Microsoft Teams 等應用程序中的桌面使用;
- 5)Qt:Qt 是一種多功能選擇,可用于從工業軟件到游戲和汽車信息娛樂系統的廣泛應用。
11、開發時的挑戰
雖然每個框架都有其優點,但必須意識到潛在的挑戰和限制。
比如這些:
- 1)Electron:Electron 應用程序可能會占用大量資源,可能會導致舊硬件上出現性能問題;
- 2)Flutter:如果您主要是移動開發人員,那么使用 Flutter 進行桌面開發可能會涉及一個學習曲線;
- 3)Tauri:作為一個相對較新的框架,與更成熟的選項相比,Tauri 可能擁有較小的社區和較少的第三方庫;
- 4)React Native:將 React Native 轉換到桌面可能需要額外的努力,并且某些特定于平臺的功能可能更難訪問;
- 5)Qt:Qt 的學習曲線,特別是對于剛接觸 C++ 的開發人員來說,可能是一個挑戰。
12、本文小結
為桌面應用程序開發選擇正確的框架很大程度上取決于項目的具體要求,例如目標平臺、性能預期、UI 需求和所需的開發體驗。
如果正在尋找一個允許你利用 Web 技術的框架,Electron和React Native是不錯的選擇。Electron 擁有龐大的社區和廣泛的預構建組件,而 React Native 提供強大的組件系統,并允許在移動和桌面平臺之間重用代碼。
如果性能和小包大小是優先考慮的,請考慮Flutter或Tauri。Flutter 提供快速的啟動時間和流暢的動畫,而 Tauri 則以其輕量級和低資源消耗而聞名。
如果你需要一個具有出色本機集成和本機外觀的框架,Qt是一個可靠的選擇。
如果你正在開發需要豐富的、可定制的用戶界面的復雜應用程序,Flutter可能是最佳選擇,因為它基于 widget 的開發方法。
還請各位開發者要記住,請考慮與每個框架相關的學習曲線,特別是如果你或團隊尚不熟悉所涉及的技術。比如,Tauri 需要 Rust 或 C 的前置知識,而 Flutter 使用 Dart 做為預備知識。
13、相關資料
[1] Electron官方開發者手冊
[2] Flutter官方手冊
[3] Tauri官方手冊
[4] React Native開發指南
[5] QT官方文檔和手冊
[7] Electron初體驗(快速開始、跨進程通信、打包、踩坑等)
[8] vivo的Electron技術棧選型、全方位實踐總結
[9] 融云基于Electron的IM跨平臺SDK改造實踐總結
[11] 網易云信基于Electron的IM消息全文檢索技術實踐
(本文已同步發布于:http://www.52im.net/thread-4598-1-1.html)
作者:Jack Jiang (點擊作者姓名進入Github)
出處:http://www.52im.net/space-uid-1.html
交流:歡迎加入即時通訊開發交流群 215891622
討論:http://www.52im.net/
Jack Jiang同時是【原創Java
Swing外觀工程BeautyEye】和【輕量級移動端即時通訊框架MobileIMSDK】的作者,可前往下載交流。
本博文
歡迎轉載,轉載請注明出處(也可前往 我的52im.net 找到我)。