为了账号安全,请及时绑定邮箱和手机立即绑定

我为什么选择了Tauri而不是Electron

大概一年前,我决定试试做一个桌面应用程序。

我对那个领域中的其他应用都不满意,我觉得我可以做得比它们更好。我作为一名全栈开发者,已经工作了很长时间,但我之前从未开发过桌面应用程序。

我的第一个想法是用SwiftUI来构建。开发人员都喜欢原生应用,我一直都很想学习Swift。然而,使用SwiftUI构建会把受众限制在macOS用户。我感觉大多数用户可能还是在用macOS,既然我能做一个跨平台的应用,又何必限制自己呢?

回想起来现在,我真的庆幸自己当初没用SwiftUI。看看我的应用现在运行在多种多样的操作系统上。

操作系统使用情况。由Aptabase Analytics提供。

Windows 和 Linux 用户占超过 35%。不支持这些操作系统就等于放弃了相当一部分收入。

那 Electron 呢?

我可不是住在岩石下面的人,所以我早就知道 Electron 这个东西,而且我知道我每天使用的许多流行应用程序都是用 Electron 构建的,包括我自己每天都在使用的代码编辑器。

这似乎正中我下怀,因为:

  • ✅ 适用于多个平台的单代码库;
  • ✅ 可以与我熟悉的 React + TypeScript + Tailwind 堆栈配合使用;
  • ✅ 非常流行的栈意味着有很多资源和指南;
  • ✅ NPM 拥有最大的包生态系统,这意味着我可以更快地通过复用其他开发者的代码来发布功能;

构建在 Electron 上的另一个好处是我能够专注于构建这个应用而不是学习全新的内容。我喜欢学习新语言和框架,但我想快速构建一些有用的东西。但我仍然需要了解 Electron 本身,但这不会像学习 Swift 和 SwiftUI 那样陡峭的学习曲线。

行了,咱们开始吧!

我已经定好了。Aptakube 将用 Electron 来开发。

我通常不读说明文档。虽然我知道应该读,但我就是不读,而且我知道大多数人也不读 😅

不过,每次我第一次选择一个框架时,我总会先看一下入门指南部分,所以我也是这么做的,你呢?

流行的框架通常提供一个 npx create {框架名称} 命令,可以快速为我们搭建一个应用的启动环境。Next.js、Expo、Remix 等许多其他框架都有这个功能。我发现这非常有用,因为它们可以帮助你快速上手,并且通常会给你很多选项,例如:

  • 你想要 TypeScript 还是 JavaScript?
  • 你想要用一个 CSS 框架吗?比如说 Tailwind 怎么样?
  • Prettier 还是 ESLint?
  • 你想要这个还是那个选项?

这种开发体验真是太棒了,我希望每个框架都能有这样好的体验。

我能直接用 npx create electron-app 吗?

显然,这似乎不可能,至少我还没找到方法,特别是在入门部分也找不到。

我发现了一个可以从Git克隆的quick-start模板,安装好依赖后就可以动手了。

不过,这不是TypeScript,没有打包工具,也没有CSS框架,没有代码规范工具,没有代码格式化,什么都没有。它只是一个极简应用,只打开一个窗口而已,就这么简单。

我从这个模板开始搭建,并添加了所有我想要的东西来让它运作起来。我以为这会很简单,但事实并非如此。

一个 Electron 应用有三个入口点:mainpreloadrenderer。将这些全部与 Vite 整合起来非常痛苦。我花了大约两周的业余时间试图让所有东西正常工作。我失败了,感到非常沮丧。

然后我发现了很多其他的 Electron 模板,试了大约五个。有些还行,但大多数模板过于主观,安装了一些我不清楚用途的依赖项,这让我有些不爽。有些模板甚至根本无法工作,因为它们已经被遗弃了很久。

总之,对于首次接触 Electron 的开发者来说,开发体验不尽如人意。Next.js 和 Expo 的标准已经设得非常高,以至于我期望每个框架都能提供类似的良好体验。

那现在咋办?

刷着推特时,我无意间看到Tauri发布了1.0版本的消息。他们那时已成立两年,但完全不知道Tauri是什么。我去他们的网站看了看,真的被惊艳到了,这正是我一直想找的东西。

你知道最棒的部分吗?他们在首页就提供了npm create tauri-app这个指令。

Tauri 通过 npx create tauri-app 命令从一开始就提供了出色的开发体验。

我想试试看。我运行了创建 tauri-app 的命令,体验和使用 Next.js 很像。然后它问了我几个问题,根据我的选择,它为我创建了一个新项目。

到最后,我可以运行 npm run dev,就能跑起来一个带有热重载的应用,包含了 TypeScript、Vite 和 Solid.js,基本上我所需要的一切都准备好了。

我印象深刻,也很兴奋,想要了解更多。我不得不添加Prettier、Linters、Tailwind等工具,但这些对我来说已经很习惯了,而且这比在Electron里要简单得多,因为Vite已经为我配置好了。

瑞典重新开始(再次 😅),但用 Tauri

在 Electron 中,我可以只用 JavaScript、HTML 和 CSS 建立整个应用,而在 Tauri 中,后端是用 Rust 编写,前端还是用 JavaScript。这自然意味着我得学 Rust,这让我挺兴奋,但也想尽快搞定,不想花太多时间,因为我希望尽快搞定原型。

我已经用过七种以上的编程语言,所以以为学习Rust会像散步一样轻松。

我错了。我实在是太天真了。Rust真的很难,至少对我来说是这样子的。

一年之后,在我应用发布超过20次之后,我仍然不能说我真正掌握了Rust。我知道足够多的内容可以定期发布新功能,但每次我写Rust代码时还是学到很多东西。GitHub Copilot 和 ChatGPT 对我帮助很大,我依然经常使用它们。

用字符串这么简单,在Rust里却复杂得多,真搞笑 🤣

不过,Tauri让这个过程简单多了。

Tauri 中有一个叫做 Command 的概念,它就像是前端和后端之间的桥梁。你可以在 Tauri 后端使用 Rust 定义命令,并从 JavaScript 调用它们。Tauri 自带很多可以直接使用的命令。例如,你可以打开文件对话框、读写删除文件、发起 HTTP 请求,以及其他很多直接与操作系统交互的操作,而不需要写任何 Rust 代码。

那么,如果你需要做一些在 Tauri 中不可用的事情,这时就可以使用 插件 (Plugins)。插件是 Rust 库,定义了可以在你的 Tauri 应用中使用的命令,就像 Rust 库一样。我会在后面进一步讨论插件,但你可以把它们看作是扩展 Tauri 功能的一种手段。

我实际上问了很多用 Tauri 构建应用的人,是否需要写 Rust 代码来构建他们的应用。大多数人都说他们只需要为一些特定用例写很少的 Rust 代码。完全可以用不写 Rust 代码的方式来构建 Tauri 应用!

那么 Tauri 和 Electron 比起来怎么样?
1. 编程语言及其周边工具

在 Electron 中,后端是一个 Node.js 进程,前端是 Chromium,这意味着 Web 开发者可以仅使用 JavaScript/HTML/CSS 构建桌面应用。NPM 上有庞大的库生态系统,网上也有很多相关资料,这使得学习过程变得更加简单。

然而,虽然通常来说在前后端之间共享代码被视为好事,但这也会让人感到困惑,因为开发人员可能会尝试在前端使用后端功能,反之亦然。因此,要注意别把前后端的功能搞混了。

相比之下,Tauri 的后端是 Rust,前端也是一个 webview(我们稍后会详细探讨)。虽然 Rust 有相当数量的库,但远不及 NPM 的规模。这意味着网上关于 Rust 的资源和内容相对较少。不过,正如之前提到的,根据你的项目需求,你可能根本不需要写很多 Rust 代码。

我的观点是:我非常喜欢 Tauri 中后端和前端清晰分离的设计。当我用 Rust 编写代码时,我知道它会作为一个操作系统进程运行,并且我可以访问网络、文件系统和其他各种功能;而所有用 JavaScript 编写的代码则确保在 webview 中运行。尽管学 Rust 很有挑战,但我乐在其中,并且学到了很多新知识!Rust 开始在我的技能树上生根发芽 😊

2 网页视图

在 Electron 中,前端是一个捆绑在应用程序中的 Chromium 网页视图。这意味着你可以始终可以确定你的应用程序使用的 Node.js 和 Chromium 版本,无论你使用的是哪个操作系统。这不但带来了不少好处,同时也有一些缺点。

最大的好处就是开发和测试非常方便,你知道都有哪些功能,而且如果某个功能在 macOS 上能运行,那么它在 Windows 和 Linux 上也极有可能能运行。不过,缺点就是你的程序会变得更大,因为里面捆绑了大量的程序文件。

Tauri 采取了一个完全不同的方法。它不将 Chromium 与你的应用程序捆绑在一起,而是使用操作系统的默认网页查看器。这意味着在 macOS 上,你的应用程序将使用 WebKit(Safari 使用的引擎),在 Windows 上将使用 WebView2(基于 Chromium 浏览器),而在 Linux 上将使用 WebKitGTK(与 Safari 使用的相同)。

最终得到的是一款非常小巧的APP,用起来特别流畅!

相比之下,我的Tauri应用程序在macOS上的大小为24.7MB,而我的竞争对手的应用程序(Electron)的大小为惊人的1.3GB。 😱

这有什么关系?

  • 下载和安装快多了。
  • 托管和分发的成本更低(我在 AWS 上运行,所以要支付带宽和存储的费用)。
  • 经常有人问我是否用 Swift 编写的应用,用户在看到如此小巧快速的应用时,往往会觉得“这感觉就像原生应用”。
  • 安全性由操作系统处理。如果有 WebKit 的安全问题,苹果会发布安全更新,我的应用会自动使用这个更新。我无需发布更新来修复这些问题。

我的看法是,我喜欢我的应用既小巧又快速。最开始我担心不同操作系统之间的不一致,因为这意味着我需要在我的应用上测试所有的三个操作系统,但到目前为止,一切都很顺利,没有遇到任何问题。网页开发者早已习惯了这种情况,因为我们已经很长一段时间都在开发针对多个浏览器的应用。打包工具和多合一库在这方面也提供了很大的帮助!

3. 插件 (Plugins)

我之前简单提过这一点,在我看来,这是 Tauri 最棒的功能之一,我认为值得深入探讨。插件是由 Rust 编写的一系列命令,可以在 JavaScript 中调用。它允许开发人员通过组合不同的插件来构建应用程序,这些插件可以是开源插件,也可以是你应用内部定义的插件。

这样设计应用程序非常好,也让代码在不同应用之间更容易共享。

以下是你在 Tauri 生态中可以找到的一些插件。

这些功能本来可以内置在 Tauri 中,但将它们独立出来后,你可以根据需要选择使用哪些功能。这意味着它们可以独立发展和进化,如果出现更好的替代品,也可以轻松替换。

插件系统是我选择 Tauri 的原因之一;它让开发体验变得好上千倍!

4. 功能一致

说到功能,Electron 和 Tauri 非常相似。Electron 还有一些额外的功能,但 Tauri 正在迅速追上来了。至少对我来说,Tauri 已经满足了我的所有需求。

对我来说最大的不便就是没有 Native Context Menu API。这是社区强烈要求的功能,它会让 Tauri 应用程序感觉更像本地应用。我目前用 JS/HTML/CSS 来实现这个功能,这样还行,但可以做得更好。希望在 Tauri v2 中能看到对这一功能的全面支持 🤞

但是除此之外,Tauri 还有很多东西。开箱即用你能获得通知、托盘、菜单、对话框、文件系统、网络功能、窗口管理、自动更新、打包、代码签名、GitHub 动作(如 GitHub Actions)等功能。如果你还需要其他功能,你可以编写一个插件来实现它,或者使用现有的插件之一,如侧边插件。

5. 手机

这让我挺意外的。在我写这篇文章的时候,Tauri 对 iOS 和 Android 提供了实验性的支持。看起来这一直都在计划当中,但我刚开始做这个应用时并不知道。我不确定我是否会使用它,但知道有这样的支持还是挺好的。

这在 Electron 中是不可能实现的,而且可能永远都不会实现。所以如果你计划构建一个跨平台的移动和桌面应用,Tauri 可能是更好的选择,因为你可以在这两者之间共享很多代码。用网页技术设计以移动为中心的界面这些年变得更加容易了,所以构建一个既可作为桌面应用又可作为移动应用的单一界面并没有听起来那么疯狂。

我就放这儿,让大家对 Tauri 的未来感到兴奋。

正如 Jonas 在 他的一条推文中 所提到的,这还处于实验阶段,比较草率;要达到生产可用状态可能需要很长时间,但这仍然是看到这一领域的创新仍然令人兴奋。

最后

我对我使用 Tauri 的决定非常满意。与 Solid.js 结合,我成功制作了一个非常快速的应用程序,人们都很喜欢!我不是说它总是比 Electron 更好,但如果它有你需要的功能,我觉得你可以试一试。如前所述,你甚至可能不需要写很多 Rust 代码,所以不要被这吓到了!你可能会惊讶于仅仅使用 JavaScript 就能完成很多事情。

如果你对 Kubernetes 感到好奇,可以试试看 Aptakube,这是一个用 Tauri 构建的 Kubernetes 桌面应用 😊

我现在正在开发一个开源且注重隐私的分析平台。它已经为多个框架提供了SDK,比如Tauri和Electron。顺便提一句,Tauri的SDK实际上是一个Tauri插件! 😄

最后,我也很活跃在Twitter。有任何问题或反馈,欢迎随时联系我。我很乐意讨论 Tauri!

谢谢大家的阅读!👋

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消