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

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
  • Cargo 创建 Tauri
cargo install create-tauri-app --locked
cargo create-tauri-app

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

你可能感兴趣的:(Rust项目开发,react.js,前端,tauri,rust,桌面应用)