首页 > 其他分享 >Tauri VS. Electron - 真实项目的比较

Tauri VS. Electron - 真实项目的比较

时间:2022-08-27 21:11:26浏览次数:78  
标签:JavaScript 程序 应用程序 Tauri Electron VS 使用

文章翻译自: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. 开发经验

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的支持。

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

标签:JavaScript,程序,应用程序,Tauri,Electron,VS,使用
From: https://www.cnblogs.com/zsxblog/p/16631485.html

相关文章

  • vscode可以通过改json让程序运行完不退出
    如图改相应的launch.json至于D盘test.exe是因为有中文路径"program":"C:\\Windows\\System32\\cmd.exe","args":["/c","${fileDirname}/${fileBasenameNoExtension}.......
  • opencvsharp踩坑DAY1--图像增强emphasize
    cheche出差摸鱼做的一个用opencvsharp的东西,用于快速验证,水平极差,目前功能如下 今天搞的功能是复现halcon的图像增强算子emphasize,根据文档其运作过程为1.输入均值(低......
  • VS2019修改文件编码
    1.查看文件编码安装扩展,FileEncoding,就可以在文件窗口右下角查看到该文件的编码方式,同时也可以直接在此处修改。2.修改项目的文件编码使用editorconfig文件。在工具......
  • win10环境安装vs2015的问题:缺少JavaScript_ProjectSystem.msi和JavaScript_LanguageSe
    最近有同事在win10下安装vs2015总是报错,安装中途报缺少文件JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。想想看微软发布的产品应该不至于丢三落四,缺......
  • vscode 终端使用 git mergetool meld 提示 meld: command not found
    把mergetool的cmdmeld路径用单引号包裹起来就能正常使用下载地址:Meld(meldmerge.org)[merge]tool=meld[mergetool"meld"] cmd='D:/ProgramFiles(x86)/M......
  • VS Code实现SSH远程开发
    最近收获一台新台式机,但是个人主要还是使用自己的笔记本,用了几天远程控制,感觉各种不方便,最终决定配置一下VSCode实现SSH远程开发,特此记录。首先介绍一下环境,控制端是Wind......
  • VSCode添加自定义的Vue3.2标准模板
    创建新的用户片段 点击文件——首选项——用户片段或者用快捷Ctrl+Shift+P唤出控制台然后输入“snippets”并选择接着输入vuevscode自动生成vue.json文件{......
  • [Javascript] Factory pattern vs Class instance
    InJavaScript,thefactorypatternisn'tmuchmorethanafunctionthatreturnsanobjectwithoutusingthe new keyword. ES6arrowfunctions allowustocr......
  • VSCODE离线配置远程开发环境
    1.下载VSCODE插件VSCODE的插件和VSCODE的版本是对应的,为了下载到兼容的版本,首先查看VSCODE的版本。帮助---》关于从上图中可以看到VSCODE的版本和日期,下载的插件只要时......
  • vscode中编写node.js代码的提示功能
    1.安装typings包安装命令//使用cnpm,前提配置好淘宝镜像cnpmitypings-g测试是否安装成功typings--version2.在项目开发目录下打开终端依次执行如下命令......