【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’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。 错误方…

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

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

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

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

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;包…

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

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

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

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

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

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

LCD—STM32液晶显示(2.使用FSMC模拟8080时序)

目录 使用STM32的FSMC模拟8080接口时序 FSMC简介 FSMC NOR/PSRAM中的模式B时序图 用FSMC模拟8080时序 重点&#xff1a;HADDR内部地址与FSMC地址信号线的转换&#xff08;实现地址对齐&#xff09; 使用STM32的FSMC模拟8080接口时序 ILI9341的8080通讯接口时序可以由STM32使…

北邮国院物联网 Microprocessor 微处理器笔记

Introduction-随便聊 嵌入式系统是什么&#xff1f;专用的计算机系统。为专门功能可能对计算机架构&#xff0c;外设等做出一些取舍。 通常的限制&#xff1a;Cost&#xff08;比如大量部署传感器节点&#xff09;&#xff0c;Size and weight limits&#xff08;特定应用场景…

配置Hadoop_0

配置Hadoop_0 1配置Hadoop100模板虚拟机1.1配置Hadoop100模板虚拟机硬件1.2配置Hadoop100模板虚拟机软件1.3配置Hadoop100模板虚拟机IP地址1.4配置Hadoop100模板虚拟机主机名称/主机名称映射1.5配置Hadoop100模板虚拟机远程操作工具 1配置Hadoop100模板虚拟机 Hadoop100 内存…

TRT4-trt-integrate - 1 YOLOV5导出、编译、推理

模型导出 修改Image的Input动态维度 首先可以看到这个模型导出的时候Input有三个维度都是动态&#xff0c;而我们之前说过只需要一个batch维度是动态&#xff0c;所以要在export的export onnx 进行修改&#xff0c;将 torch.onnx.export(model, im, f, verboseFalse, opset_ver…

华为云子网路由表作用及价值

子网路由表 子网路由表作用云专线、VPN的配置与子网路由表强关联&#xff0c;本质是在相应的子网路由表中添加了一条路由Nat路由表问题地址变更问题snat和dnat 子网路由表作用 子网内部作为一个二层网络&#xff0c;通过mac地址互通&#xff0c;不通过路由互通。跨子网&#x…

实时网络更改检测

未经授权的配置更改可能会对业务连续性造成严重破坏&#xff0c;这就是为什么使用实时更改检测来检测和跟踪更改是网络管理员的一项关键任务。尽管可以手动跟踪更改&#xff0c;但此方法往往非常耗时&#xff0c;并且通常会导致人为错误&#xff0c;例如在跟踪时错过关键网络设…

企业需要一个数字体验平台(DXP)吗?

数字体验平台是一个软件框架&#xff0c;通过与不同的业务系统喝解决方案集成&#xff0c;帮助企业和机构建立、管理和优化跨渠道的数字体验。帮助企业实现跨网站、电子邮件、移动应用、社交平台、电子商务站点、物联网设备、数字标牌、POS系统等传播内容&#xff0c;除了为其中…

文心一言 VS 讯飞星火 VS chatgpt (58)-- 算法导论6.4 2题

文心一言 VS 讯飞星火 VS chatgpt &#xff08;58&#xff09;-- 算法导论6.4 2题 二、试分析在使用下列循环不变量时&#xff0c;HEAPSORT 的正确性&#xff1a;在算法的第 2~5行 for 循环每次迭代开始时&#xff0c;子数组 A[1…i]是一个包含了数组A[1…n]中第i小元素的最大…

如果微信消息显示“已读”的话......

近日&#xff0c;一则 #如果微信显示已读的话# 话题冲上了微博热搜榜单。 “已读”是很多社交软件拥有的功能&#xff0c;如果对方接收并查看了消息&#xff0c;就会在消息上显示“已读”&#xff0c;但目前微信还没有推出这项功能。 对于“已读”功能&#xff0c;不少网友纷纷…

自动化用例编写思路 (使用pytest编写一个测试脚本)

目录 一&#xff0c;明确测试对象 二&#xff0c;编写测试用例 构造请求数据 封装测试代码 断言设置 三&#xff0c;执行脚本获取测试结果 四&#xff0c;总结 经过之前的学习铺垫&#xff0c;我们尝试着利用pytest框架编写一条接口自动化测试用例&#xff0c;来厘清接口…

【CNN记录】pytorch中BatchNorm2d

torch.nn.BatchNorm2d(num_features, eps1e-05, momentum0.1, affineTrue, track_running_statsTrue, deviceNone, dtypeNone) 功能&#xff1a;对输入的四维数组进行批量标准化处理&#xff08;归一化&#xff09; 计算公式如下&#xff1a; 对于所有的batch中样本的同一个ch…