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

news2024/9/24 9:25:32

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.coloradmin.cn/o/758449.html

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

相关文章

深入学习Python自定义函数

目录 0. 前言1. 最基础的自定义函数写法2. 参数传递3. 函数返回值4. 作用域5. 匿名函数6. 装饰器7. 闭包8. 生成器9. 为自定义函数写注解 0. 前言 今天来深入学习 Python 中的自定义函数,为的是日后能够写出时间和内存更好的优化,以及形成良好的编程习惯…

原型链:揭开JavaScript背后的神秘面纱

文章目录 1. 对象2. 原型(prototype)3. 原型链(prototype chain)4. 构造函数(constructor)5. prototype 属性6. 实例(instance)7. 原型继承(prototype inheritance&#…

HFSS仿真微带型威尔金森功分器学习笔记

HFSS仿真微带型威尔金森功分器 文章目录 HFSS仿真微带型威尔金森功分器1、 求解器设置2、 建模3、 边界条件设置4、 激励方式设置5、 扫频设置6、 设计检查,仿真分析7、 数据后处理 设计要求: 频带范围0.9~1.1GHz输入端口的回波损耗>20dB频带…

STL算法篇之拷贝修改类算法

STL算法篇之拷贝修改类算法 拷贝类算法copy与copy_backwardremove与remove_copyremove_if与remove_copy_if 修改类算法replace与replace_copyreplace_if与replace_copy_ifiter_swap与swap与swap_range、unique与unique_copy 拷贝类算法 1.copy 区间拷贝 2.copy_backward 逆向拷…

Redis双写一致性?

双写一致性:当修改了数据库的数据也要同时更新缓存的数据,缓存和数据库的数据要保持一致。 Redis作为缓存,mysql的数据如何与redis进行同步呢?(双写一致性) 1.我们当时做排行榜业务时,把历史榜…

CentOS7中安装docker并配置阿里云加速器

文章目录 一、docker的安装二、docker的卸载三、配置加速器四、docker-compose安装五、docker-compose卸载六、docker-compose相关命令七、常用shell组合 一、docker的安装 参考:https://docs.docker.com/engine/install/centos 本文内容是基于:CentOS L…

Python 算法基础篇:大O符号表示法和常见时间复杂度分析

Python 算法基础篇:大 O 符号表示法和常见时间复杂度分析 引言 1. 大 O 符号表示法 a ) 大 O 符号的定义 b ) 示例代码 2. 常见时间复杂度分析总结 引言 在分析和比较算法的性能时,时间复杂度是一项重要的指标。而大 O 符号表示法是用来描述算法时间复杂…

Redis 从入门到精通【进阶篇】之Lua脚本详解

文章目录 0. 前言1. Redis Lua脚本简介1.1 Lua脚本介绍Lua语言概述:Lua脚本的特点: 1.2 Redis中为何选择LuaLua与Redis的结合优势Lua脚本在Redis中的应用场景 2. Redis Lua脚本的执行流程1. 加载脚本:1.1 脚本缓存机制:1.2 脚本加…

C++ 可变参数函数用法与template模板泛型编程

目录 1、可变参数函数 (1)定义 (2)常用使用场景 2、template模板用法 1、可变参数函数 (1)定义 可变参数函数的可变参数一般使用省略号表示,如下: void func(int a,...);{} &…

牛P!安卓渗透神器PhoneSploit-Pro

工具介绍 一种集成的黑客工具,可使用ADB(Android Debug Bridge) 和Metasploit-Framework完成自动化,一键获取 Meterpreter 会话。 关注【Hack分享吧】公众号,回复关键字【230524】获取下载链接 如果设备打开了 ADB 端口,该工具可…

关于Context和ContextImpl还有ContextWrapper的关系

关于Context和ContextImpl还有ContextWrapper的关系 1.Context和ContextImpl还有ContextWrapper的关系 ​ 图一.Context和ContextImpl还有ContextWrapper的关系示意图 1.1.ContextImpl是Context的实现类 从Context和ContextImpl的源代码中,可以看出Context是一个抽象类,具体…

pytorch+CRNN实现

最近接触了一个仪表盘识别的项目,简单调研以后发现可以用CRNN来做。但是手边缺少仪表盘数据集,就先用ICDAR2013试了一下。 结果遇到了一系列坑。为了不使读者和自己在以后的日子继续遭罪。我把正确的代码发到下面了。 1)超参数请不要调整&am…

实体店搭建多用户商城系统有什么好处

现在很多的线下店铺都开始慢慢的转型线上了,想线上线下相结合,但是最近很多的商家都在问什么样的B2B2C商城系统开发适合线下店铺呢?这个问题今天加速度jsudo小编给大家一起整理如下,相信商家看完后就知道如何选择一款合适的商城系统了。 一、…

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

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

刷题总结1

暑假第二周练习题 - Virtual Judge (vjudge.net) 该题就是将含4的数字全部跳过,不难发现,这就导致每位数都要少一个树,这就和9进制十分像,我们只要将该数字转化为9进制,然后将该9进制树的每位大于等于4的树加一就行了&…

【CXL】CXL QoS Telemetry 介绍

🔥点击查看精选 CXL 系列文章🔥 🔥点击进入【芯片设计验证】社区,查看更多精彩内容🔥 📢 声明: 🥭 作者主页:【MangoPapa的CSDN主页】。⚠️ 本文首发于CSDN&#xff0c…

51单片机的智能交通控制系统【含仿真+程序+演示视频带原理讲解】

51单片机的智能交通控制系统【含仿真程序演示视频带原理讲解】 1、系统概述2、核心功能3、仿真运行及功能演示4、程序代码 1、系统概述 该系统由AT89C51单片机、LED灯组、数码管组成。通过Protues对十字路口红绿灯控制逻辑进行了仿真。 每个路口包含了左转、右转、直行三条车道…

rapid_latex_ocr: 更快更好用的公式图像转latex工具

Rapid Latex OCR rapid_latex_ocr是一个将公式图像转为latex格式的工具。仓库中的推理代码来自修改自LaTeX-OCR,模型已经全部转为ONNX格式,并对推理代码做了精简,推理速度更快,更容易部署。仓库只有基于ONNXRuntime或者OpenVINO推…

AI辅助瞄准系统开发与实战(一)

文章目录 前言系统窗体设计提示弹窗功能主体页面 windows窗体绘制矩形绘制自定义线程池完整代码 总结 前言 直接看效果,狗头: 之所以搞这个的话,当然主要一方面是因为确实有点意思在里面,此外在很久以前,也有很多的UP…

光伏并网逆变器低电压穿越MATLAB仿真模型

使用MATLAB 2017b搭建 光伏逆变器低电压穿越仿真模型,boost加NPC拓扑结构,基于MATLAB/Simulink建模仿真。具备中点平衡SVPWM控制,正负序分离控制,pll,可进行低电压穿越仿真。 控制结构完整,波形完美&…