【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/

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

怎么解决亚马逊跟卖?为何卖家总是举报不成功?

以前大家都是从跟卖的时代走向现在的品牌化运营之路,但是现在跟卖已经从大家都模仿的对象变成了大部分卖家厌恶的对象,那么怎么解决这个跟卖问题呢?目前最直接的方法就是进入亚马逊后台进行举报,但是大概率是失败的。 一、举报违…

Spring Cloud 之 Gateway 网关

🍓 简介:java系列技术分享(👉持续更新中…🔥) 🍓 初衷:一起学习、一起进步、坚持不懈 🍓 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正🙏 🍓 希望这篇文章对你有所帮助,欢…

elasticsearch基本操作

elasticsearch 下面参数详细解释 java 搜索查询看官方文档 https://www.elastic.co/guide/en/elasticsearch/client/java-api-client/8.8/connecting.html#_your_first_request{"name" : "Tom Foster","cluster_name" : "elasticsearch&q…

Kafka 入门到起飞 - 核心概念(术语解释)

在kafka之旅,我们会大量讨论Kafka中的术语,那么就让我们先来了解一下这些核心概念 消息(Message): kafka的数据单元称为消息,相当于DB里的一行数据或一条记录 消息由字节数组组成 批次: 生产者组一批数据再向kafka推送…

消息重试框架 Spring-Retry 和 Guava-Retry

一 重试框架之Spring-Retry 1.Spring-Retry的普通使用方式 2.Spring-Retry的注解使用方式 二 重试框架之Guava-Retry 总结 图片 一 重试框架之Spring-Retry Spring Retry 为 Spring 应用程序提供了声明性重试支持。它用于Spring批处理、Spring集成、Apache Hadoop(等等)。…

MySQL高阶语句

目录 一、常用查询 1、按关键字排序 2、区间判断及查询不重复记录 3、限制结果条目 4、设置别名(alias ——》as) 5、通配符 一、常用查询 (增、删、改、查) 对 MySQL 数据库的查询,除了基本的查询外,…

R语言forestploter包优雅的绘制孟德尔随机化研究森林图

在既往文章中,我们对孟德尔随机化研究做了一个简单的介绍。我们可以发现,使用TwoSampleMR包做出来的森林图并不是很美观。今天我们使用R语言forestploter包优雅的绘制孟德尔随机化研究森林图。 使用TwoSampleMR包做出来的森林图是这样的 而很多SCI文章…

$.getScript()方法获取js文件

通过$.getScript(‘xxxx.js’)获取xxxx.js文件,这时的ajax是一个get请求的状态,如果进行了入参data的赋值那么他就会跟在url后面,同理获取json文件,css文件。 一开始没想起这茬。。。

Linux系统部署Nginx详细教程(图文讲解)

前言:本篇博客记录了我是如何使用Linux系统一步一步部署Nginx的完整过程,也是我学习之路上的一个笔记总结,每一行代码都进行了严格的测试,特此做一个技术分享! 目录 一、安装依赖 二、安装Nginx 三、配置Nginx 四、…

Spring学习笔记---SpringBoot快速入门

Spring学习笔记---SpringBoot快速入门 Spring学习笔记---SpringBoot1 SpringBoot简介1.1 SpringBoot快速入门1.1.1 开发步骤1.1.1.1 创建新模块1.1.1.2 创建 Controller1.1.1.3 启动服务器1.1.1.4 进行测试 1.1.2 对比1.1.3 官网构建工程1.1.3.1 进入SpringBoot官网1.1.3.2 选择…

PETRv2: A Unified Framework for 3D Perception from Multi-Camera Images

PETRv2: A Unified Framework for 3D Perception from Multi-Camera Images 作者单位 旷视 目的 本文的目标是 通过扩展 PETR,使其有时序建模和多任务学习的能力 以此建立一个 强有力且统一的框架。 本文主要贡献: 将 位置 embedding 转换到 时序表…

Spring Batch之读数据—读XML文件(三十二)

一、XML格式文件解析 XML是一种通用的数据交换格式,它的平台无关性、语言无关性、系统无关性,给数据集成与交换带来了极大的方便。XML在Java领域的解析方式有两种,一种叫SAX,另一种叫DOM。SAX是基于事件流的解析,DOM是…

基于STM32单片机的智能家居烟雾温度火灾防盗报警的设计与实现

功能介绍 以STM32单片机作为主控系统;LCD1602液晶显示屏来显示显示测得的值;SR501人体红外感应是否有人进行防盗;通过烟雾传感器MQ-2获取前的烟雾值;通过DHT11温湿度传感器来获取当前的温湿度;所有的信息通过通过esp82…

如何用DeepDiff测接口数据源变更?

开发同学最近变更了部分业务查询接口底层的数据源,希望测试同学能够针对这些接口进行一些回归验证,校验底层数据源更新前后业务查询接口返回的一致性,保证更新后对正常业务没有影响。 这个回归测试和一般接口测试有所区别,不仅仅…

金融中的数学:概率分布(下)

上篇博客介绍了离散型概率分布,本篇博客介绍连续型概率分布。 1.连续型概率分布 连续型均匀分布(Continuous Uniform distribution)是一种描述在特定区间内取值均匀分布的概率分布。在该分布中,随机变量在给定区间内的取值概率密…

Vue实现阻止浏览器记住密码功能的三种方法

通常浏览器会主动识别密码表单,在你登录成功之后提示保存密码 , 密码保存到浏览器的 密码管理器中 ( 如下是谷歌浏览器 ) 这种行为是浏览器的行为 ,这种操作也是为了方便用户的使用 现在的一个需求是要阻止这个保存密码的弹窗提示 登录页账…

使用IDEA工具debug java annotation processors

最近看Spring提供的自动生成spring-configuration-metadata.json文件的组件。组件依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId><optional>true</opti…

Revit中如何添加剖面?快速实现剖面图

一、Revit中如何添加剖面&#xff1f; 除了标高绘制所得到的楼层平面视图和立面视图之外&#xff0c;还可以添加剖面视图&#xff0c;这样可以得到任意位置一个竖向的剖切面&#xff0c;例如在楼梯细节处理中&#xff0c;楼梯处于建筑物内部&#xff0c;立面也看不到整个楼梯的…

Excel-公式VLOOKUP 使用方法-小记

个人愚见 表示 MongoDB列中的任意一条数据 在 MySQL列 精确查找 和MongoDB列 中一模一样的数据&#xff0c;有的话返回MongoDB列数据&#xff0c;没有话返回#N/A 官方解释

MySQL数据库与表的基本操作 + 表的基本CRUD(增删改查)操作

文章目录 前言一、库的基本操作显示当前所有数据库创建数据库使用数据库删除数据库 二、表的基本操作创建表查看库中所有表查看表结构删除表 三、表的增删改查(基础)新增数据(Create)全列插入指定列插入 查询数据(Retrieve)全列查询指定列查询查询字段为表达式指定列的别名去重…