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

VCluster

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

vcluster License platform NodeJS Rust

React Redux Tauri Mui Rbatis

背景介绍

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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/2747.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TabBar和TabBarView实现顶部滑动导航

home.dart子页面主要代码&#xff1a; import package:flutter/material.dart;class HomePage extends StatefulWidget {const HomePage({super.key});overrideState<HomePage> createState() > _HomePageState(); }class _HomePageState extends State<HomePage&…

windows环境hadoop报错‘D:\Program‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。

Hadoop版本为2.7.3&#xff0c;在环境配置好后&#xff0c;检查hadoop安装版本&#xff0c;报如标题所示错误&#xff0c;尝试网上主流的几种方法均无效。 错误&#xff1a;windows环境hadoop报错’D:\Program’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。 错误方…

TCP/IP网络编程 第十一章:进程间通信

进程间通信的基本概念 在上一章中我们讲到&#xff0c;进程自身有独立的内存空间&#xff0c;进程之间是相互独立的存在。因此在没有任何机制的支持下&#xff0c;我们可以将进程看作相互孤立的存在。 但是进程之间在某种程度上也是要“交流”的&#xff0c;下面正式介绍进程…

在uni中使用vue3写h5的pdf导出

先安装依赖 npm install --save html2canvas npm install jspdf --save 把dom转canvas&#xff0c;屏幕截图基于 DOM&#xff0c;因此可能不是 100% 准确到真实表示&#xff0c;因为它不会制作实际的屏幕截图&#xff0c;而是根据页面上可用的信息构建屏幕截图。 components…

linux 一键安装docker docker-compose

# 环境 deploy.sh docker-19.03.9.tgz docker-compose-linux-x86_64 tar -zxvf docker-19.03.9.tgz mv docker-19.03.9 docker cp docker/* /usr/bin/ touch /etc/systemd/system/docker.service cat << EOG > /etc/systemd/system/docker.service [Unit] Descripti…

【技巧】Maven重复依赖分析查找

【技巧】Maven重复依赖分析查找 遇到奇葩的错误可以考虑是不是依赖冲突了 比如同一段代码 再这个项目中好好的 另一个项目中不能用等 idea安装插件 maven helper 打开pom文件 输入要查找的依赖 将不用的排除掉 右键排除即可

“深入解析API接口:原理、用途和最佳实践“

API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;是不同软件或系统之间进行交互的桥梁&#xff0c;它提供了一组定义好的规则和功能&#xff0c;使得不同的应用程序能够相互通信和交换数据。API接口的理解、应用和最佳实践对于开发者…

在阿里云平台注册一个域名

我们访问阿里云官网 阿里云 然后 我们右上角点击登录 然后 按正常操作流程登录 登录成功后 我们点击控制台 我们将鼠标 移入 右上角 图片指向的位置 我们点击域名 进入界面后点击注册域名 在输入框中输入域名内容 然后 按回车 然后弹出的列表 我们可以选一个未注册的 点击…

解决Linux打开文件数过多error:too many open files

解决Linux打开文件数过多error:too many open files #查看当前的最大打开文件数 ulimit -n #默认只有1024,当负载较大的服务器时&#xff0c;很容易遇到error: too many open files。因此&#xff0c;需要将其改大。#可临时修改&#xff0c;但重启后就无效 ulimit -n 65535 #查…

Druid-排查conditionDoubleConstAllow配置问题(double const condition)

Druid-排查conditionDoubleConstAllow配置问题(double const condition) 报错信息 Caused by: java.sql.SQLException: sql injection violation, dbType postgresql, druid-version 1.2.18, double const condition : SELECT * FROM test where 11 AND TRUE AND TRUE关键词&…

正则表达式概念以及语法的使用

目录 1.概念 2. 为什么使用正则表达式&#xff1f; 3. 语法 1.普通字符 非打印字符 2. 特殊字符 3. 限定符 4. 定位符 5. 运算优先级 3.匹配规则 1. 基本模式匹配 2. 字符簇 3. 确定重复出现 1.概念 正则表达式(Regular Expression)是一种文本模式&#xff0c;包…

【Docker】docker-compose基本使用

【Docker】docker-compose基本使用 文章目录 【Docker】docker-compose基本使用1. docker 项目部署弊端2. docker-compose 简介3. 实践4. 模板命令4.1 build 指令4.2 command 指令4.3 container_name 指令4.4 depends_on 指令4.5 env_file 指令4.6 environment 指令4.7 image 指…

基于Redisson的Redis分布式锁

Redisson分布式锁_redissonclient_甩锅虾的博客-CSDN博客 *** 分布式锁*/ public interface DistributedLock {/*** 尝试获取锁* param lockName* param seconds* return*/Boolean tryAcquire(String lockName, long seconds, TimeUnit unit);/*** 释放锁* param lockKey*/v…

如何使用自动化构造随机路由模型

为什么要仿真随机路由&#xff1f; 路由器测试中&#xff0c;为了最大程度还原现网路由情况&#xff0c;评估路由器在现网环境下稳定工作各项指标&#xff0c;需要对导入路由进行离散仿真&#xff0c;目前路由仿真可分为导入路由与生成路由两种方式&#xff0c;导入路由需要现…

vue如何使用webscorket实现多人协同在线表格填写

要使用WebSocket在Vue中实现多人协同在线表格填写&#xff0c;你可以按照以下步骤进行操作&#xff1a;1. 安装WebSocket库&#xff1a;首先&#xff0c;在Vue项目中安装WebSocket库。你可以使用 socket.io-client 库来处理WebSocket通信。使用npm或yarn安装它&#xff1a;npm …

学习遇上的一点补救

从开始学习java到现在逐步确定好发展路线。是时候停一下步伐了。 之前不停的往前走&#xff0c;从学校的课程、书本开始&#xff0c;没有借助网课、视频&#xff0c;依靠自己一步一个脚印。从Java实用程序、Javaweb、JavaEE然后选择MySQL数据库、然后觉得有必要对前端了解&…

think-on-graph: 基于知识图谱的大模型推理

概述 本文的研究背景是大规模语言模型在复杂推理任务中存在困难并展示了较低的性能&#xff0c;特别是在需要知识的追溯能力、及时性和准确性的场景中。 过去的方法主要面临两个问题&#xff1a;推理不负责任容易生成虚构或带有有害文本&#xff0c;以及模型在预训练阶段无法…

【深入浅出C#】章节 5: 高级面向对象编程:泛型编程和集合类型

高级面向对象编程是在基础面向对象编程的基础上进一步深入和拓展的一种编程范式。它强调封装、继承和多态的概念&#xff0c;并引入了泛型编程和集合类型等高级特性。高级面向对象编程提供了更灵活、可扩展和可复用的代码结构&#xff0c;能够帮助开发者构建更复杂、更高效的应…

基于IPC-CFX的点对点通信C#

IPC-CFX有两种主要的通信方式&#xff0c;可以通过RabbitMQ发布和订阅&#xff0c;也可以通过request和response进行点对点的通信&#xff0c;本文主要讲的是点对点的通信方式。 在vscode里建立新的dotnet项目&#xff0c;可以通过终端输入dotnet new console来建立&#xff0c…

【拿来就能用】C#指定打印机打印的类

之前写过一个“C#WinForm程序中选择打印机打印”的文章&#xff0c;但在使用过程中&#xff0c;尤其是生成Word文档时&#xff0c;会感觉系统响应较慢。如果不需要留存打印文档的电子版&#xff0c;可以使用下面的类直接打印。相比之前的方法&#xff0c;这种方法更简单&#x…