你认识陶瑞吗？

作为前端开发者，相信你应该知道 Electron，它使用前端最熟悉的语言来开发跨平台的桌面应用程序。Tauri 你听说过吗？

金牛座是什么？

Tauri 是一个框架，用于为所有主要桌面平台构建微型、极快的二进制文件。开发人员可以集成任何可编译为 HTML、JS 和 CSS 的前端框架来构建他们的用户界面。应用程序的后端是一个来自 rust 的二进制文件，带有一个前端可以与之交互的 API。

以上介绍来自官方Github 仓库。几句话总结了金牛座的特点：

• 体积小
• 很好的表现
• 二进制文件
• 跨平台
• 用户界面可以使用web前端技术栈
• 程序后端使用 Rust

看起来真好！那么它会成为电子杀手吗？

金牛座VS。电子

图片来自Github

上图是 Tauri 和 Electron 现在的对比图。可以看到包大小和启动时间都比 Electron 好，还有很多 Electron 不支持的特性。

但 Rust 是最吸引我注意力的地方。近年来，它频频出现在前端圈子里，SWC、Deno等都在用它。它是一种静态类型安全语言，没有运行时和垃圾收集机制，特别擅长高性能、可靠性和生产力。并且编译器足够严格以保证内存安全和线程安全。

在这里它被用作后端绑定和底层引擎。我将在下面与 Electron 的比较中描述它是如何工作的。

那么让我从开发经验和架构的角度来对比一下两者：

快速开始比较

要创建 Tauri APP，首先要在本地计算机上准备好Rust 环境和Node.js 环境。您可以访问他们的官方网站并按照步骤安装它们。让我们专注于如何创建 Tauri 项目。

yarn create tauri-app #OR npx create-tauri-app

使用前端工具yarn或者npx可以快速创建一个tauri-app，然后我们就可以配置选项了，这里我选择create-viteand react-ts，安装好依赖后过一会就可以运行项目了。

Tauri 不仅可以快速创建项目，还可以集成到现有的前端项目中。相比之下，Electron 官方并没有提供相应的模板工程，只能一步步安装配置。

项目配置对比

这是上一步生成的项目结构，可以看的很清楚。Electron 仍然需要自己配置主进程目录和渲染器进程目录。

我们来看看默认生成的package.json：

优秀的！Tauri 已经为我们做了一切。我们可以使用它yarn tauri dev来开始开发并yarn tauri build打包最终产品。

对应的，可以在 中配置应用前端开发和打包命令src-tauri/tauri.conf.json，如下所示：

Electron 的所有启动和构建命令都需要手动配置，应用前端的集成也是如此。虽然社区提供了模板来帮助我们，但远不如 Tauri 方便。

API 比较

我不会在这里详细介绍 API。需要的时候可以去他们各自的官网查看。它们都提供原生平台的程序图标、菜单栏、桌面托盘等。

但值得一提的是，多亏了 Rust，Tauri 提供了有用的宏，这使得创建 Rust 命令就像编写函数一样容易。

建造

Rust 现阶段的编译时间被诟病，导致 等待 Tauri 的打包时间较长，不过好在下次编译会使用缓存，让打包时间变短。并且最终的产品也会以二进制形式存在，给破解增加了一层门槛，相对安全一些。

默认情况下，Electron 没有内置打包过程，即使node_modules被主线程使用也会打包到最终程序中，这进一步增加了构建产品的体积。并且没有加密机制，所以源代码很容易泄露。当然，我们可以使用一些构建工具对主线程的代码进行打包和混淆，这显然是费时费力的。

但是Electron可以跨平台搭建，也就是可以在Mac平台上搭建Windows平台的软件包，而Tauri目前只能搭建在对应的平台上，这对于那些自动化打包分发的人来说是个麻烦事平台。

自动更新程序

关于自动更新，Electron 需要借助electron-updaterorelectron-packager实现三大平台的自动更新，而 Tauri 可以原生支持。

架构比较

在架构方面，Tauri 并没有选择将 Chromium 作为一个整体封装到产品中，而是使用自研的WRY连接各个平台的 Web 引擎，提供统一的接口来渲染 WebView。

它在Windows平台上使用Microsoft Edge Chromium提供的WebView2，在Mac平台上使用WebKit，在Linux平台上使用WebKitGTK。

这意味着它与 Chromium 无关。如果在 Mac 平台上打开 DevTools，可以看到它的内部 UI 和 Safari 是一致的。如果你在 Windows 平台上打开 DevTools，你会发现它的内部 UI 和 Microsoft Edge 是一致的。

也就是说，它只做胶层，所以它的体积很小。

除此之外，他们还开发了TAO，一个用于跨平台应用程序窗口创建的库，并将其重新导出到 WRY 中，用于事件循环和窗口创建。

而 Electron 将整个 Chromium 包装起来，并启动一个独立的线程不断轮询backend_fdNode.js 中的新事件以获取libuv中的新事件，当发现新事件时，它们将被转发到 Chromium 的事件循环（MessageLoop）。详见下图。

图片来自Shelley Vohr | JSH英雄 2019

通过上述方式，Electron 将 Node.js 的事件循环集成到 Chromium 的事件循环中，以保证应用程序的性能。

比较两者，我的感性认识是：

Electron 更像是一种融合技术，将 Node.js 集成到 Chromium 中。

Tauri 更像是胶水，将 WebView 的渲染交给各个平台内置的 Web 引擎。Tauri 是顶层，可以通过 WRY 和 TAO 控制 GUI。

结论

Tauri表现不错，前景看好。它解决了 Electron 现有的很多问题，带来了简单便捷的开发体验。但是还有一些问题需要改进，Rust的学习曲线曲折，有一定的学习成本。

电子今天发展得很好。并且它依赖于蓬勃发展的 Node.js 社区，其周边生态非常好。它在前后端使用JavaScript，因此学习成本更小。