Tauri VS Electron - 真实应用对比

shark
10,055 阅读7分钟

翻译自：www.levminer.com/blog/tauri-…

本文，我们会使用一个真实的app: Authme 做对比。Authme 是桌面端下的一款简易的跨平台双因子认证( 2FA )应用程序，这个 app 不大也不复杂，最适合做一些简单的对比测试。你可以在 Github 上查看相关的源码：Electron app、Tauri app。我们目标是最终可以用 Trauri app 代替 Electron 实现该应用。

Electron app 的架构

什么是 Electron?

Electron 是一个使用如 Javascript, html 和 css 等 web 端技术构建原生应用程序的框架，它处理了其中较为复杂的部分，所以你只用专注于应用的开发。如果你能够构建一个 website，你也可以构建一个桌面端应用程序。- electronjs.org

技术栈：

Electron App 使用原生的 HTML 和 Jasvascript 编写，样式我们通过 TailwindCss 和一些自定义的CSS。

Tauri app 架构

Tauri 是什么？

Tauri 是一个用以构建支持当下主流桌面平台的小型、超快二进制文件的框架。开发人员可以集成任何能编译为 HTML, JS 和 CSS 的前端框架来搭建他们的用户交互界面。 应用的后端是基于 Rust 开发并提供前端可以交互的 API。— Tauri Github

技术栈：

Tauri 应用程序使用更加现代化的技术栈。构建工具用的 Parcel，框架是 Svelte，并用 Typescript 代替 Javascript 编写代码，样式用 TailwindCss实现。

对比

下述不是正面的对比，但是各自应用程序的功能几乎一样。

主要对比点：

  1. 打包时间
  2. 启动事件
  3. 性能
  4. App 后端
  5. 渲染应用
  6. 安全
  7. 自动更新
  8. 开发体验

bundle

显而易见，胜者是：Tauri

Tauri 安装程序大概只有 ~2,5MB (!!!)左右, 然而 Electron 的安装程序大概有 ~85MB.

所有打包后的文件如下：

image.png

image.png

Tauri 的一个主要优势是：app 被整个编译成为了一个二进制文件，这意味着你需要一个反向工程专家才能反编译这个 app，而 Electron 这边，你可以使用一个简单的 npm 命令便可以解包 app 。

此外，如果你的用户具备 Tauri 所使用的合适 webview runtime，你就可以只分发单个可执行文件，然后在任何支持的平台进行安装使用。

启动时间

这不是一项科学测试，但通过运行应用程序并确定启动时间，可以看到最终赢家是：Tauri：

  • Tauri: ~ 2 s
  • Electron: ~ 4 s

performance 性能

同样不是一项严谨的科学测试，只是粗略对比。如下测试来自我的 PC，其配置为: i5-4570 CPU, 16GB RAM, GTX 1660 and Windows 11。

Tauri (Windows)

TestCPURAMGPU
Idle1%~ 80MB0%

Electron (Windows)

TestCPURAMGPU
Idle1%~ 120MB0%

实话实说，我本以为 Tauri 会表现的更好，觉得 Tauri 会使用更少的 RAM，但是其实并没有少太多。让我们看下在 linux 平台上的效果：

Tauri

image.png

Electron

image.png

哇哦，Tauri 完胜。

App 后端

这应该是 Tauri 缺陷之一（但或者是最大的优势，这取决于你）。在 Electron app 中，你用 Javascript 编写代码，因为 Electron 使用 Nodejs 的 runtime。而 Tauri 的后端是基于 Rust 实现的，如果开发 app 后端的你精通 Rust ，你会乐此不疲，但是如果你不得不从头学习 Rust（比如我），那么你会面临一些问题。

你不得不用 Rust 重写 app 后端，在这个方面来讲，Electron 是胜者。至于当前，实现能够可替换的后端也在 Tauri 的未来规划中，比如 Python、C++ 或者 Deno。个人来将，我对于以后能集成 Deno 非常期待，那样我就又可以使用 Javascript/Typescript 编写我的后端程序了。

App 的渲染

Electron 底层使用 Chromium，所以你在 Windows、linux、macos 上看到的前端效果都是一样的，而另一边的 Tauri 使用的系统自带的 webview：windows 上 Edge webview2，linux 和 macos 上的 webkitGTK。现在糟糕的地方出现了，如果你是一个 web 端的开发人员，你会清楚 Safari（基于 Webkit）一直落所有的 web 浏览器一步，可以去 Can I Use你就会发现问题。所以，就会存在一些 bug，就是你在 chrome 上不能看到，但是能够在你亲爱的 Safari 用户上看到。这样的问题同样出现在 Tauri 上，并且你只能引入 polyfills。所以此项的胜者是 Electron。

在我开发 Tauri 应用时碰到的一个问题就是我的 css 打包不会携带 -webkit 前缀，导致我 app 上的 css 全是 bug。

安全性

Tauri 默认情况下是非常安全的，然而 Electron 却不是这样。Tauri 内部默认集成了很多安全 相关的特性。你甚至可以 enable、disable 特定的 api。然而 Electron 下，你拥有对 Node APIs 的完全控制权，所以一个黑客可以非常轻松地利用强大的 Node APIs，而 Tauri 却没有这种情况，您必须显式地暴露 Rust 函数（给渲染侧）。

自动更新

image.png ——xkcd.com

在 2022 年发布一款没有自动更新的 app 是不可能的。如果用户必须手动下载每次更新，我认为他们会不太高兴。Electron 和 Tauri 都有内置的自动更新器，但是 Tauri 更加简单，在 Electron 中，我想大多数人使用electron-updater，在 Tauri 中，你可以使用内置的 ，唯一不足的是你不得不维护你自己的更新服务 或者你可以使用需要手动更新的 JSON 文件，而 Electron 更新器从 Github releases 中拉取二进制文件，这样会更加便捷。

开发体验

在 Tauri中，通过安装 Tauri CLI，你可以获取到所有的包：热加载（Hot reload）、为多个平台打包 app，制作 app 的图标。而 Electron 什么都没有提供，仅仅只有框架本身，你需要自己建立热替换，构建流程等等...，而 Tauri为你做了一切事情，而且最棒的是：Tauri 兼容现存的所有 web 框架，它仅仅需要一个 localhost url 或者一个目录放置你打包后的代码。

总结

Electron 会被代替吗？是的，Tauri 是更好的方案，但是 Tauri 仍然忽视了很多问题。在不久将来，我确信 Tauri 会赶上 Electron。我所期待的有：deno 作为后端（运行时），对 iOS/Android 自动化更新更好的支持。

谢谢您阅读我的第一篇文章！弊人英语不专，如有错误敬请指正。

译者读后感

笔者认为，作者所说的 app 后端和前端应该对应 Electron 架构中的 nodejs runtime 和 Chromium 。Electron 的架构中，分为主进程和渲染进程，主进程运行着一个 nodejs 的 runtime，而渲染进程想要进行除了 ajax 的 io 操作，大都需要通过 ipc 去调用主进程 nodejs 的 runtime，比如读、写文件，执行命令等等。具体 ipc 如何实现，可以参考www.chromium.org/developers/…

其实想想 Tauri 和 Electron 都采用多进程架构，前端上：Tauri 需要 webview 帮助其处理前端渲染工作，而 Electron 直接集成 Chromium 让其处理前端渲染工作，而对应的后端 Tauri 用 Rust 实现，并且令人期待的是以后可能会集成 Deno 这样的 runtime。

而对于本文所讲，Tauri 固然存在很多优秀之处：安装包小、内存占用小，甚至看其官网，已经集成了 vite 这样的现代化打包工具，所以在开发体验上肯定很比 Electron 棒，但是 Electron 拥有 Node 这样强大的生态，使用 js 便可实现全栈开发，这会让开发人人员上手 Electron 时更容易。

此外，webview 的兼容性问题也是一个需要解决的痛点，毕竟有些老电脑没有 webview，那么 Tauri 应用下，就要做更多兼容性工作。

总之，前端多语言化趋势下，让 Rust 作为应用后端提升应用性能这个思路还是值得学习参考的，加之以后要集成可替换的 deno，而 deno 近来也打算兼容 npm 的生态，那么这样看， Tauri 未来可期，值得关注和学习。

另外附上一篇深度解析 Electron 的文章：cameronnokes.com/blog/deep-d…

avatar
文章
阅读
粉丝