VCluster

Windows 上のアプリクラスターのビジュアライザーとしての React + Tauri アプリ。

背景紹介

VCluster は、開発環境で一連のアプリケーションクラスター (分散サービスやマイクロサービスなど) を視覚的に管理するために使用されるデスクトップアプリケーションです。目標は、クリックすることで開始、再起動、ビルドできる docker-compose に似たクラスター構成を実現することです。特定のアプリケーションの健全性監視機能があり、操作を容易にするためのターミナルコマンドラインやその他の機能が組み込まれています。

テクノロジーの選択

現在の開発の進行状況で使用されている主なテクノロジーを列挙してください。

苦難
反応する
戻ってきた
ムイ
ルバティス

苦難

タウリとは何ですか？Tauri を紹介する前に、デスクトップアプリケーション用の他の主流の開発フレームワークについて触れておきます。古代の Qt はともかく、現在の主流の 1 つは Electron であり、Vs Code などの多くの人気のあるソフトウェアは Electron で開発されています。Electron は、nodeJs によって駆動され、Web のフロントエンドをレンダリングするための chromium が組み込まれており、デスクトッププログラムを形成します。

Tauri は、システムのネイティブ Web ビューを使用して Web フロントエンドをレンダリングする Rust ベースのデスクトッププログラム開発ツールです。Tauri と Electron は同じソリューションセットに属しますが、大きく異なります。

トーラス vs エレクトロン

Electron と比較した Tauri の長所と短所は何ですか?

軽量 - Tauri はレンダリングにシステムのネイティブ Web ビューを使用しますが、Electron はブラウザーが内蔵されているため、同じ機能では、Tauri アプリケーションは Electron アプリケーションよりもはるかに小さく、後者は helloworld であっても約 50MB です。
高性能 - Tauri は Rust によって駆動されますが、Electron は NodeJ によって駆動されます。Rust の動作効率は間違いなく NodeJ よりもはるかに優れています。さらに、Tauri には組み込みのブラウザーがありませんが、Electron は Vs Code を例として挙げています。
高いセキュリティ - Tauri は現在最も安全なプログラミング言語として知られる Rust によって駆動されており、Tauri の開発チームは Tauri の設計セキュリティにも細心の注意を払っており、機密性の高い操作に対して多くの制限を採用しており、Tauri は分離モードで実行されるため、静的攻撃は特に困難になります。
幅広いクロスプラットフォームのサポート - Tauri は現在 2 つのバージョンに分かれており、v1 はデスクトップのみをサポートし、v2 は携帯電話もサポートしています。現在、主流のモバイルアプリのクロスプラットフォームフレームワークには Flutter と React Native が含まれており、それぞれに独自の長所と短所があります。Tauri v2 はまだ実験段階ですが、期待する価値があります。
弱い生態学とコミュニティ - 2 つの側面から: 1. Tauri は新興フレームワーク 2. Rust は若い言語であるため、ある時点で参照用のベストプラクティスソリューションが見つからない可能性がありますが、Electron では問題が少なくなります。
不安定性 - 2 つの側面から来ています: 1. Tauri は新興フレームワーク 2. Rust は頻繁に変更される若い言語です。たとえば、私はしばらく前に Rust 1.66 を使用して他のプロジェクトを開発しましたが、VCluster で使用されていた同じクレートが最近最新の Rust に準拠しました。Rust バージョンを更新し、実装されているいくつかのコードを変更する必要がありました。
開発の難易度が高い - Rust の学習曲線は急勾配です。経験豊富な Rust 開発者であっても、Rust プロジェクトに直面すると多くのプレッシャーに直面します。しかし、Electron のバックグラウンドはノードであり、フロントエンドとバックエンドは js または ts です。フルスタック開発は比較的簡単です。
将来的により多くの言語をサポート - 前の項目は絶対的なものではありません Tauri チームは、Tauri のバックエンドが Rust 以外の他の主流バックエンド言語 (Go、C#、Python など) によっても駆動できることを期待して、技術的な障壁を突破するために懸命に取り組んでいます。さらに、Tauri には現在、バックエンド操作を処理するために元々 Rust を使用する js-api を実装するプラグインがいくつかあり、たとえば、バックエンドの永続的な状態をフロントエンドで直接管理したり、SQL を書いたりすることができます。

反応する

Web レイヤーでは、Tauri は Vue、React、Sevlte などのほぼすべてのフロントエンドフレームワークと完全な互換性があります。VCluster は React を選択します。

React を使用する理由 Tauri の公式サンプルのほとんどは Vue または Sevlte に基づいていますが、Vue システムの開発は実際に非常に便利であり、開発者は簡潔な構文でインターフェイスを迅速に構築できるためです。

Reactを選んだ主な理由は次の3点です。

React には非常に大規模なエコシステムと活発なコミュニティがあり、参考になるベストプラクティスを見つけるのは難しくありません。
Rust は非常に厳密な型システムを持っていますが、React は Typescript に完全に適合しており、Typescript + React + Tauri に基づく主要なテクノロジースタックは非常に一貫しています。
複雑なプロジェクトや大規模なプロジェクトには React の方が適していますが、VCluster は比較的包括的かつ複雑な機能を備えており、React での開発に適しているのは間違いありません。

もちろん、比較的単純な機能を備えたアプリケーションをすばやく構築する必要がある場合は、Vue または Svelte の方が間違いなく良い選択です。

戻ってきた

Redux は基本的に React に必要なスイートの 1 つです. js 状態管理ツールとしてはかなり標準化された設計と運用プロセスを持っています. ディスパッチとサブスクリプションによる状態同期とコンポーネント通信を実行し, 高いパフォーマンスを持っています. Redux は React だけでなく Vue などの他のフレームワークでも使用できます. Node バックエンドでも使用できます.

ムイ

最も人気のある React UI コンポーネントライブラリの 1 つであるマテリアル UI には、MUi をベースにした多数の Web サイトがあります。Mui は優れたデザインを備えており、コンポーネントはプロフェッショナルでエレガントな外観を備えており、一般的なアプリケーションシナリオに非常に適しています。

ルバティス

VCluster にはデータを永続的に保存するためのデータベースが必要です。前述したように、フロントエンドに直接 SQL を記述できるプラグインがあります。SQL プラグインを使用しない理由は、職務分離の原則に従うためです。フロントエンドはレンダリングのみを考慮し、データ処理は可能な限り Rust に引き渡す必要があります。これがプロフェッショナルなアプローチです。」もちろん、単純なアプリケーションを手早く構築するだけの場合は、SQL プラグインの使用を強く推奨し、同意します。

Rbatis は Rust の高性能非同期 ORM-SQL フレームワークで、かなりの数の SQL 機能を実装しており、SQL を書くプロセスを大幅に簡素化できますが、残念ながら rbatis は関連付けを提供していないようです。Rbatis に加えて、SEA-ORM も優れた選択肢ですが、Rust フレームワークは学習コストが高いことが多いため、私は rbatis をマスターしたことがあったので Sea-ORM を使用しませんでしたが、後者は依然として高く評価される SQL フレームワークです。

開発構成

VCluster の開発環境は少なくとも以下の項目を満たす必要があります。

Windows 10 (現在は Win のみに対応)
ノード16.17+
錆び1.70はそれより低いことはできません、それより高くないほうが良いです

また、Rust をインストールするときは、信頼できる C++ ジェネレーターを選択することを忘れずに、Vs Studio パッケージを使用することをお勧めします。

IDE:
vs Code、vs Studio、または CLion

Tauri アプリケーションを最初から作成するのは非常に簡単です。Tauri には、コマンドラインから Tauri アプリケーションを作成するための Bash、PowerShell、Cargo、npm、Yarn、および pnpm が用意されています。VCluster は npm を使用します。

Tauri プロジェクトを最初から作成する例をいくつか示します。

npm は Tauri を作成します:

npm create tauri-app@latest

貨物がタウリを生み出す

cargo install create-tauri-app --locked
cargo create-tauri-app

Tauri の詳細については、Tauri の公式 Web サイトをご覧ください: https://tauri.app/zh-cn/

【Tauri + React実戦】VCluster - テクノロジー選択と開発環境構成を理解する