文章翻译自：Tauri VS. Electron - Real world application

以下是正文:

在这篇文章中我将会用真实的项目来比较 Electron 和 Tauri： Authme。Authme 是一个跨平台使用双因素验证的桌面程序。不大也不复杂，很适合作比较。你可以在 GitHub 上查看使用 Electron 开发的源代码，也可以在 GitHub 查看使用 Tauri 开发的源代码。我的目标是使用 Tauri 完全替代 Electron。

Electron 程序架构

Electron 是什么

Electron 是一个使用 JavaScript, HTML, and CSS 等web技术创建原生应用程序的框架。它负责处理难的部分以至于你只要专注在你应用上。如果你能构建一个网站，那么你也可以额构建一个桌面应用程序。

程序架构

The Electron app is written in plain-old HTML and JavaScript. For styling I'm using TailwindCSS and some custom CSS.
Electron 程序是使用普通的 HTML 和 JavaScript 编写的。样式部分使用了 TailwindCSS 和一些自定义样式。

Tauri 程序架构

Tauri 是什么

Tauri 是一个为所有主要的桌面平台构建微小、速度极快的二进制文件的框架。开发者可以使用任意编译为 HTML, JS 和 CSS 的前端框架来构建他们的用户界面。应用程序的后端是一个 rust 二进制文件，其中包含前端可以与之交互的 API

架构

我的 Tauri 应用程序使用了更现代的堆栈。构建工具是 Parcel，框架是 Svelte，使用 TypeScript 代替了 JavaScript。样式使用 TailwindCSS 完成。

比较

This is not a head-to-head comparison, but the app is basically the same.
这不是一个直接的比较，但应用程序基本上是相同的。

关键点:

  1. 包
  2. 启动时间
  3. 性能
  4. 程序后端
  5. 渲染程序
  6. 安全
  7. 自动更新
  8. 开发经验

1. 包

毫无疑问的赢家：Tauri

Tauri 程序安装包只有大约 2.5MB(!!!)，而 Electron 程序安装包却有 85MB

Full bundle size:

tauri-bundle.png

electron-bundle.png

Tauri 有一个主要的优势：程序会被编译为二进制，意味着你要成为一个逆向工程专家才能反编译程序。而在Electron 程序中你可以使用简单的 NPM 命令 拆解程序。

如果你的用户有 Tauri 使用的 webview 的正确运行时，那么你可以仅仅发送一个简单的可执行文件给他们，用户也不用安装任何东西。

2. 启动时间

虽然不是一个精确的测试，但运行程序并记录启动时间方面产生了一个赢家：

  • Tauri: ~ 2 秒
  • Electron: ~ 4 秒

3. 性能

同样这也不是一个精确地测试，只是一个粗略的比较。这些测试来自我的电脑：i5-4570 CPU, 16GB RAM, GTX 1660 and Windows 11

Tauri (Windows)

Test CPU RAM GPU
Idle 1% ~ 80MB 0%

Electron (Windows)

Test CPU RAM GPU
Idle 1% ~ 120MB 0%

Honestly I expected more from Tauri, sure it uses less RAM, but not by much. Let's take a look at what's up on the Linux side.
说实话我更期待 Tauri，它使用了更少的 RAM，但也不是很少。让我们看看在 Linux 上运行的情况。

Tauri

tauri-linux.png

Electron

electron-linux.png

哇，Tauri 大胜!

4. 程序后端

这是 Tauri 的一个劣势（或者可以说是它最大的优势，取决于你自己）。在 Electron 程序中你可以使用 JavaScript 编写程序后端，因为 Electron 使用了 Node.js 运行时。Tauri 由 Rust 编写而来。如果你了解 Rust 可能会高兴，但如果你要在 scratch 上学习 Rust（我就是），你将要面对一些问题。

你必须使用 Rust 重新编写你的程序，所以我认为在这方面 Electron 是赢家。现在，后端的可选替代比如 Python，C++，Deno 已经在 Tauri 的规划中了，我很期待 Deno 的整合，这样我就可以再次用 JavaScript/TypeScript 编写程序了。

5. 渲染你的程序

Electron 是基于 Chromium 的，所以用户能在 Windows，Linux，macOS 上看到相同的界面。而 Tauri 使用的是系统 webview：Windows 上的 Edge Webview2 (Chromium)，Linux 上的 WebKitGTK 和 macOS 上的 WebKit。糟糕的部分来了，如果你是一个 web 开发者你应该知道 Safari(Based on WebKit) 总是落后于每个 web 浏览器。可以通过  Can I Use 检测。总有一个 bug 出现在你亲爱的 Safari 用户上却不会出现在 Chrome。Tauri上有相同的问题存在并且除了包含 polyfills 不能做任何事情处理它。这方面来说，Electron是赢家。

我在开发 Tauri 时遇到的一个问题是我的 CSS 包没有包含“-webkit”前缀，所以我的应用程序的 CSS 漏洞百出。

6. 安全

Tauri 是非常安全的，但我不会说 Electron也是。Tauri 有许多内置的 安全 特性。你甚至可以显式启用或禁用某些 API。再 Electron 中你可以使用全部的 Node 接口，所以黑客很容易利用这些强大的接口。而Tauri 的情况并非如此，你必须显式地公开 Rust 函数。

7. 自动更新

Auto update comicxkcd.com

在2022年发布一个没有自动更新的应用程序是不可行的。如果你的用户不得不手动下载每一个更新，我不认为他们会高兴。Electron 和 Tauri 都有一个内置的自动更新程序，但 Tauri 的更加简单。我认为大部分人在 Electron 中使用 electron-updater。而 Tauri 中可以使用 内置 的更新器，不过不好的一面是你不得不维护自己的 更新服务 或者使用一个简单的 JSON file 不过你不得不手动更新。Electron 更新器从 GitHub 发布的二进制文件中提取信息，这样更加方便。

8. 开发经验

对于 Tauri，安装 Tauri CLI 就能得到整个包：热更新，在所有平台上构建你的程序，生成应用图标。而 Electron 除了框架本身之外什么都不会给你。你必须建立热更新，打包程序等等... Tauri 已经给你准备了所有东西。最棒的是：Tauri可以兼容世界上每一个 web 框架。它只需要一个本地路径或者文件夹其中包含所有绑定的代码。

总结

Electron 将会被替代？是的，Tauri 更好，但它仍然有待提高。我可以肯定未来几年里 Tauri 团队会抓住机会做得更好(这里可能翻译的不是很好，原文是：In a couple of years I'm sure the Tauri team will catch app to Electron)。令我期待的是：Deno 作为后端，更好的自动更新，对iOS/Android的支持。

感谢阅读我的第一篇文章！我的母语不是英语，文章中如果有任何错误的地方我感觉抱歉。