Tuvix.jsとは？

Tuvix.jsは、独立してデプロイ可能なパーツで構成されるスケーラブルなフロントエンドアプリケーションを構築するための、軽量でフレームワーク非依存のマイクロフロントエンドオーケストレーターです。

課題

フロントエンドが成長するにつれ、モノリシックなシングルページアプリケーションは以下のような問題を抱えます：

• 複数のチーム間でのスケーリングが困難
• ビルドとデプロイが遅い - 1つの変更がすべてを再ビルドする
• 単一のフレームワークやバージョンに固定される
• 個別にテストや理解をすることが困難

ソリューション：マイクロフロントエンド

マイクロフロントエンドは、マイクロサービスの原則をフロントエンドに適用します。各マイクロアプリは：

• 独立して開発 - 別のコードベース、別のチーム
• 独立してデプロイ - 独自のCI/CDパイプライン
• フレームワーク非依存 - あるチームはReact、別のチームはVue、また別のチームはSvelteを使用

Tuvix.jsはシェルを提供します - 実行時にすべてのマイクロアプリをロード、マウント、調整する薄いオーケストレーション層です。

アーキテクチャ

┌─────────────────────────────────────────────┐
│                Tuvix.js Shell               │
│                                             │
│  ┌────────────┐  ┌──────────┐  ┌────────┐  │
│  │ Orchestrator│  │  Router  │  │ Loader │  │
│  └────────────┘  └──────────┘  └────────┘  │
│                                             │
│  ┌─────────┐  ┌────────┐  ┌──────────────┐ │
│  │  React  │  │  Vue   │  │   Angular    │ │
│  │ マイクロ │  │ マイクロ│  │   マイクロ   │ │
│  │  アプリ  │  │  アプリ │  │    アプリ    │ │
│  └─────────┘  └────────┘  └──────────────┘ │
└─────────────────────────────────────────────┘

主要概念

概念	説明
Shell	ホストアプリケーション - マイクロアプリをロードして調整
Orchestrator	マイクロアプリの登録とライフサイクルを管理するコアエンジン
Micro App	独立してデプロイされるフロントエンドアプリケーション
Entry	マイクロアプリのJavaScriptバンドルURL
Lifecycle	各マイクロアプリが実装するmount、unmount、updateフック
Event Bus	マイクロアプリ間の型付きpub/subブリッジ
Sandbox	衝突を防ぐためのCSS + JS分離

比較

機能	Tuvix.js	single-spa	Module Federation
ランタイム依存なし	✅	❌	✅
Event Bus組み込み	✅	❌	❌
CSS Sandbox	✅	❌	❌
SSRサポート	✅	部分的	✅
TypeScript-first	✅	部分的	✅
フレームワークバインディング	React, Vue, Svelte, Angular	React, Vue	任意

次のステップ

→ はじめに