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 的主要原因在于三点：

React有着极为庞大的生态系统与活跃的社区，能借鉴的最佳实践并不难寻。
Rust有着极为严苛的类型系统，而 React 完美契合 Typescript，基于 Typescript + React + Tauri 的主技术栈有着相当的一致性。
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

Cargo 创建 Tauri

cargo install create-tauri-app --locked
cargo create-tauri-app

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

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