【Tauri + React 实战】VCluster - 了解技术选型与开发环境配置_tauri + react 开发

VCluster

A React + Tauri App as visualizer of apps cluster on windows.

背景介绍

VCluster是一个在开发环境下，用以对一系列应用集群（如分布式、微服务）进行可视化管理的桌面应用程序，目标是实现类似 docker-compose 那样的集群配置，通过点击即可启动、重启、构建等，具备一定的应用健康监控能力，并内置终端命令行便于操作等功能与特性。

技术选型

仅列举当下开发进度中用到的主要的几项技术：

• Tauri
• React
• Redux
• Mui
• Rbatis

Tauri

什么是 Tauri ？在介绍 Tauri 之前，先提一下其它的桌面应用主流开发框架。古老的 Qt 暂且不提，当下主流之一是 electron，目前有很多流行的软件是用 electron 开发的，比如 Vs Code。electron 由 nodeJs 驱动，内置 chromium 来渲染Web前端，从而组成了一个桌面程序。

Tauri 是一个由 Rust 驱动的，采用系统原生 webview 渲染 Web前端的桌面程序开发工具。Tauri 和 Electron 虽然属于同一套解决方案，但有着很大的差异。

Tauri vs Electron

Tauri 与 Electron 相比有哪些优缺点？

• 更轻量 - Tauri 使用系统原生 webview 渲染，而 Electron 内置了浏览器，因此相同的功能实现下，Tauri 应用的体积要远远小于 Electron 应用，而后者即便是个helloworld都要50MB左右的体积。
• 高性能 - Tauri 是由 Rust 驱动的，而 Electron 由 NodeJs 驱动，Rust的运行效率无疑远胜NodeJs，况且 Tauri 不内置浏览器，而 Electron 以 Vs Code 为例，刚安装好后很轻便，随着不断使用添加各种插件，软件逐步变得臃肿，经常卡顿偶有崩溃， Tauri 则有能力胜任更高的性能负担。
• 高安全性- Tauri 由 Rust 驱动，Rust 号称目前最安全的编程语言，并且 Tauri 的开发团队也非常注意 Tauri 的设计安全，在敏感操作上采取了诸多限制，并且 Tauri 运行在隔离模式下，静态攻击将变得有尤为困难。
• 更广泛的跨平台支持 - Tauri 目前分为 2 个版本，v1仅支持桌面，v2还支持手机，目前主流的手机app跨平台框架有 Flutter 和 React Native，各有优劣，虽然 Tauri v2 目前还在试验阶段，但值得期待。
• 生态与社区较弱 - 来自两方面：1. Tauri 是一个新兴的框架 2. Rust 是一门年轻的语言 这意味着你在某些时候可能找不到可供参考的最佳实践方案，而在 Electron 中则不太会有这样的困扰。
• 不稳定 - 来自两方面：1. Tauri 是一个新兴的框架 2. Rust 是一门年轻的语言，经常更迭，比如我前段时间开发其它项目用的 rust 1.66，而最近在 VCluster 中用到的同一个 crate 追随了最新的rust，我不得不更新我的 rust 版本，并修改一部分曾经实现好的代码。
• 开发难度较高 - Rust 拥有着陡峭的学习的曲线，即便一个有一定经验的 Rust 开发者面对 Rust项目时也存在不小的压力，而 Electron 后台是 node，前后端都是 js 或者 ts，全栈开发相对容易。
• 未来支持更多语言 - 上一条并不是绝对的，Tauri 团队正在努力打破技术壁垒，希望将 Tauri 的后端也能同时由除了 Rust 外的其它主流后端语言（Go, C#, Python等）所驱动。此外，目前 Tauri 也有一些插件实现了原本直接用 rust 处理后台的操作的 js-api，比如你可以在前端直接管理后端的持久状态，写写sql等。

React

在 Web 层，Tauri 可以完美兼容几乎所有的前端框架，Vue，React，Sevlte等，VCluster选用了 React。

为什么使用 React ？虽然在 Tauri 官方示例上，多数是基于 Vue 或者 Sevlte 的示例，因为 Vue 系的开发的确很便捷，开发者能用简洁的语法迅速构建界面。

选用 React 的主要原因在于三点：

1. React有着极为庞大的生态系统与活跃的社区，能借鉴的最佳实践并不难寻。
2. Rust有着极为严苛的类型系统，而 React 完美契合 Typescript，基于 Typescript + React + Tauri 的主技术栈有着相当的一致性。
3. React更适合复杂项目或者大型项目，VCluster有着较为全面和复杂的功能，用React开发无疑是很合适的。

当然，如果你只需要快速构建一个功能较为简单的应用，Vue或者Svelte绝对是更好的选择。

Redux

Redux 基本是 React 必备的套件之一了，Redux作为一个 js 的状态管理工具，有着相当规范的设计与操作流程，通过派发订阅等形式进行状态同步与组件通信，并且兼具高性能，Redux不仅可以用于 React，也可以用于 Vue 等其它框架，也能用到 Node后端上。

Mui

Material UI，最流行的 React UI 组件库之一，有相当多的网站基于MUi。Mui有着优良的设计，组件都有着专业且优雅的外观，在常规的应用场景下，都是非常适合的。

Rbatis

VCluster需要一个数据库来持久地存储一些数据，上面提到了有插件可以直接在前端写sql，之所以没采用sql插件，是为了遵循职责分离的原则，前端只管渲染，数据处理尽量交给 rust 来干，这是专业的做法。当然如果只是为了快速构建一个简单的应用，我们是非常鼓励和赞同使用sql插件的。

Rbatis是一个 rust 的高性能异步ORM-SQL框架，实现了相当多的sql特性，可以大大简化写sql的过程，不过遗憾的是似乎 rbatis 并没有提供关联。除了 Rbatis，SEA-ORM也是一个极好的选择，不过 rust 框架的通常有着较高的学习成本，由于我先前已经掌握了 rbatis，就没有使用 sea-orm，但后者依然是值得大力赞扬的一个sql框架。

开发配置

VCluster 的开发环境至少需要满足以下几项：

• windows 10（目前只为Win服务）
• node 16.17+
• rust 1.70 不能低了，最好也不要高

此外 rust 安装时记得选择靠谱点的 C++ 生成器，建议用 Vs Studio 包了。

IDE：
Vs Code 或者 Vs Studio 或者 CLion

从零开始创建一个 Tauri 应用很简单，Tauri 提供了Bash，PowerShell、Cargo、npm、Yarn、pnpm这几种从命令行创建 Tauri 应用的方式，VCluster采用的是npm。

以下是几个从零创建 Tauri 项目的示例：

• npm 创建 Tauri：

npm create tauri-app@latest
1

• Cargo 创建 Tauri

cargo install create-tauri-app --locked
cargo create-tauri-app
1
2

---

关于 Tauri，更多请见 Tauri官网: https://tauri.app/zh-cn/