17611538698
webmaster@21cto.com

再见 Electron,你好 Tauri!

编程语言 0 298 2024-02-16 03:33:11

图片

说要和Electron说拜拜?因为出现了新的混合式框架Tauri。还有晚上是利用Rust支持的耳机框架与React为什么前端相结合,提供出色的无浏览器体验。

很多开发者都会倾诉他们对一些JavaScript GUI框架又爱又恨的关系,对于Electron,这个框架帮助我们彻底改变了许多桌面应用程序的制作方式。事实上,我们今天使用的许多应用程序,是与开发、社交媒体、通信、音乐……凡是有关互联网的应用程序,都是由 Electron 框架构建的。

如果各位朋友还有好奇心,可以从其网站查看使用 Electron 的应用程序的精选列表。如下图:

图片

地址:https://www.electronjs.org/apps

它的许多关键点是,Electron 为具有 Web 开发经验的开发者提供了为多个平台创建独立桌面应用程序的机会……开发这些应该不需要学习任何新的编程语言! JavaScript、CSS 和 HTML 的能力可以搞定,这当然是一流的!

我们来总结一下 Electron 是如何实现这些的:

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。


它通过将 Chromium 和 Node.js 嵌入到其二进制文件中,Electron 允许开发者只维护一个 JavaScript 代码库,就可以创建可在 Windows、macOS 和 Linux 上运行的跨平台应用程序,您无需任何本地开发经验。

图片

但是,使用 Electron 构建桌面应用程序也有很大的缺点,就是它生成的二进制文件非常大!有多大?即使只是一个中等大小的代码库也可能产生约 60MB 的二进制文件。

在我亲身经历了这种感觉之后,我想知道是否还有其他解决方案可以解决这个问题……事实证明,Rust 提供了一个框架!

图片

Tauri 是一个工具包,可帮助开发者使用现有的框架作为主要桌面平台开发应用程序。


它的核心是使用 Rust 构建,CLI 利用 Node.js,使 Tauri 成为一种真正的多语言方法来创建和维护出色的桌面级应用程序。

深入内部


令人兴奋的是,它的命令行手手架工具会创建好所有熟悉的入门框架启动和运行所需的 Rust 文件。不仅如此,一旦我准备好开始将自己的功能添加到桌面以供使用 UI, Tauri就可以让工作变得无缝对接。

图片

我决定尝试Tauri,因为我计划参与一个社区项目创建一个新的桌面仪表板应用程序,剧透一下……它真的没有让人失望!

我之前提到过,入门相当简单:

  • 确保你的系统已经安装成功 Rust

  • 如果在 Windows 或 Linux 上,请确保安装良好的相关依赖项

  • 运行一个简单的命令来设置你的项目


使用指南

之后,将前端源文件全部放在一起,同时需要一些有关 UI 和帧之间的进程间通信,偶尔参考下 Tauri 提供的文档。

#![cfg_attr(  all(not(debug_assertions), target_os = "windows"),  windows_subsystem = "windows")]
use reqwest;use std::io::Read;
#[tauri::command]fn get_data(address: String, endpoint: String) -> String { let request_url = format!("http://{}/{}", address, endpoint); let mut res = reqwest::blocking::get(&request_url).expect("REQUEST FAILED"); let mut body = String::new(); res.read_to_string(&mut body).expect("Couldn't read into buffer");return body;}
fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![get_data]) .run(tauri::generate_context!()) .expect("error while running tauri application");}

使用 Tauri 创建仪表盘应用的音乐端点,我们不再需要让 preload.js 能够正确利用进程间通信,而是创建单独的文件。

我们所需要的只是在main.rs上面,在从UI调用的函数中进行正确的注释,另外在Reactjsx文件中添加一个简单的附加导入行即可:

import { invoke } from '@tauri-apps/api/tauri'


最后要说的是,Tauri 构建应用程序的最强大的端点,就使用了 Rust。

这使得像我这样的 Web 开发者能够将产品构建成本地运行的二进制文件,文件大小只是大多数 Electron 构建的应用程序的一小部分。

结论


对我来说,很明显的感觉,Tauri将有潜力继续发展,底座“取代”Electron作为占据主导地位的“前端”GUI框架。


由于是基于 Rust 构建的,可能会存在一些令人难以置信的技术参数,但我们了解其内部结构所需的一些时间是非常值得的。

图片

我在这里鼓励任何想要开始 GUI 开发之旅的开发尝试 Tauri 框架,对抗立即将 Electron 作为解决方案的副作用……我向你保证,你会感到惊喜。

为了完整地了解,大家可以在我的 Gitlab 上找到我的社区项目完整代码库。如果您正在为自己的项目寻找任何想法,请去扩展一下!

项目GitHub:https://gitlab.com/dedSyn4ps3/enviroplus-desktop

译者:埃德·卢瑟福

编译:校长

地址:

https://dev.to/dedsyn4ps3/goodbye-electron-hello-tauri-26d5

评论