ProductCard::new の実装と高速 Web アプリケーションの構築

ProductCard コンポーネントの実装

ProductCard

MdRenderSync

WebRenderSync

Markdown レンダリングの実装

MdRenderSync<L>

fn render_md(self, cx: &mut WebContext<L>) -> Result<(), WriteError> {
    md_sync! { r###"
        # {self.product.name}

        {Link::new("今すぐ購入", self.product.url)}
        "###
    }
    .render_md(cx)
}

HTML レンダリングの実装

WebRenderSync<L>

fn render(self, cx: &mut WebContext<L>) -> Result<(), WriteError> {
    html_sync! {
        <article data-product-card>
            <h2>{self.product.name}</h2>
            {Link::new("今すぐ購入", self.product.url)}
        </article>
    }
    .render(cx)
}

html_sync! {
    <a href={self.href} data-link>
        {self.label}
    </a>
}

高速かつ情報密度の高いアプリケーションの構築

Proa フレームワークを用いて GitHub、Sentry、Airbnb のようなリクリエーションを実現し、高速サーバーレンダリングと選択的インタラクティビティを提供します。

• コミュニティ指標:
  • ⭐️ アイシュー 5,000 件以上
  • 🔀 プルリクエスト 1,900 件以上
  • 🔒 セキュリティインサイト

デザインシステム (Proa UI) の構築

Shadcn スタイルのコンポーネントを提供する

Proa UI

JavaScript なしのインタラクティブな UI

• 不要な JavaScript: ビルドはラジオボタン入力と CSS だけで開閉されます。
• アクセシビリティ: WAI-ARIA ディスクロージャーパターンに従っています。
• カスタマイズ性: ソースコードがレポジトリ内にあるため、自由に再スタイル化可能です。

レンダリング速度のベンチマーク

• 反応レンダリング：5.56ms (p50)
  • 環境：ウォームプロダクション環境
  • ハードウェア: 8 コア AMD EPYC-Milan ベンチマーク

事例:

Zig/C++ フォークから Rust への移植の進捗 (#31136)

のような大規模なコード変更も効率的に処理可能です。

データ表示とワークスペース

高密度のレコードビューを構成し、ヘッダー・ボディ・フッター各部分で情報を整理します。

請求書表示の例

表示機能のバリエーション

• 固形、境界線、ゴースト、リンク: 変種が用意されています。
• サイズと意図: 3 つのサイズと 3 つの意図（インテント）を提供します。
• スロット構成: ヘッダー・コンテンツ・フッターのスロットは、多くの製品画面を構築するための表面となります。
  • 単一選択と範囲選択
  • 月ごとのページネーション
  • キーボードナビゲーション（平文 HTML としてレンダリング）

グラフィック描画

サーバー上で純粋な SVGとして以下のグラフを描画します。

• 面積図
• 棒グラフ
• 折れ線グラフ
• ドーナツグラフ
• 積み上げ系列

注釈: グループ化されたワンタイムコードスロットには、セパレーター、サイズ変種、スタイル可能なキャレットが備わっています。

ME: エージェントとの対話と型安全性

すべてのコンポーネントは型付き Rustで書かれているため、エディットはブラウザに到達する前にコンパイラがチェックを行います。

対話履歴の例

• ME: 「このアプリケーションに設定ページを追加できますか？」
  • AI Proa: はい。すべてのコンポーネントはあなたのレポジトリ内の型付き Rust で書かれているため、エディットがブラウザに到達する前にコンパイラがチェックを行います。
• ME: 「その場合、どれだけの JavaScript が配信されますか？」
  • AI Proa: 最小化されています。メッセージバブル、アバター、タイムスタンプ、アシスタント表面のタイプライター表示のみを必要に応じて提供します。

カードコンポーネントの構造例

html_sync! {
    {Card {
        クラス: None,
        子要素: Some(html_sync! {
            {CardTitle { クラス: None,
                子要素：Some(row.id) }}
            {CardFooter { クラス：None,
                子要素：Some(row.due) }}
        }),
    }}
}

フレームワークの特徴と採用メリット

コンポーネントシステムとしての機能

• テンプレートエンジンではなく、コンポーネントシステムとフレームワークの表面です。
• テンプレートの接着剤を超えたフレームワークの原始機能を提供します。
• Proa の核心:
  • ストリーミング
  • リクエストデータ
  • ルーティング
  • メタデータ
  • レスポンス制御 これらを、コンポーネントと同じ型付き WebContextの内面に保ちます。

システム的機能

• 順序付けられたストリーミング SSR:
  • シーケンスが重要な場合：文書順序で HTML をフラッシュ。
  • 遅いデータが必要な場合：

    Suspense バウンダリ

    を使用して準備済みチャンクを順不同でストリームし、ページのブロックを避けます。
• DataLoader による WebContext:
  • 全てのレンダリングで同じ

    WebContext

    コンポーネントが既に受けるように設計されています。
  • リクエストスコープのデータ、レスポンスメタデータ、ルート状態、ローダーキャッシュへの型付きアクセスが可能です。
• 型付き SSR フレームワークセマンティクス:
  • レイアウト、ルーティング、メタデータ、静的アセット、フォーム、変異、段階的ナビゲーションは、テンプレート接着剤ではなく、同じ Rust コンポーネントモデルを通じて構成されます。

インタラクティビティの実装 (RSJS アイランド)

• 原生 SSR を放棄せずにインタラクティビティを追加します。
• ページをサーバーレンダリングされた HTML として維持し、型付きシグナルとイベントハンドラを使用して特定のコントロールのみをクライアント挙動にオプション化します。
• Proa のアプローチ: 動く部分のみを JavaScript にコンパイルします。

アドプテーション戦略

• 既存スタックの維持: まずルーティングを移動させるなど、段階的な移行が可能です。
• 呼び出し方:
  • Axum ネイティブを使用するか、Node/Go/Python/Ruby/Java から FFI を介して Proa を呼び出します。
• ハイブリッド運用:
  • 一つのルートを Proa にプロキシし、残りは Next.js または Rails で保持することで、本番環境でのレイテンシとコストを比較できます。

セキュリティとアクセシビリティのデフォルト

• セキュリティによるデフォルト:
  • 自動エスケープされた出力
  • クロスオリジンリクエスト保護
  • セキュリティヘッダー
  • 修正されたアップストリームプロキシ化
• コンパイル時アクセシビリティ:
  • WCAG と WAI-ARIA チェックは

    cargo build

    時に実行されます。
  • これにより、一般的なマークアップ欠陥はデプロイ前に失敗し、品質が保証されます。