TopcoatはRustの処理をサーバー側に置く
AWSのプリンシパルエンジニアでTokioの開発者でもあるCarl Lerche氏が、RustでWebアプリを作るためのフレームワーク「Topcoat」を開発しています。TopcoatはRustのコードをJavaScriptへ変換し、ブラウザーとのやり取りにJavaScriptを使います。
LeptosやDioxusはRustをWebAssemblyに変換してブラウザーで実行します。一方、Topcoatでは多くの処理をサーバー側で行い、その結果をブラウザーへ送ります。クライアント側の処理もRustの一部構文で書け、TopcoatがJavaScriptへ変換します。
Lerche氏は、Figmaのような複雑なアプリではなく、データベースを使う一般的なブラウザー向けアプリを想定しています。サーバー側で描画する方式は従来からあり、Topcoatを使うとその仕組みをRustで利用できます。
画面全体ではなく変更箇所を更新
Topcoatでは、ユーザーがボタンを押したときにページ全体を再読み込みせず、該当コンポーネントのHTML断片をサーバーから受け取って画面を更新します。サーバー側の処理結果を部分的に反映するため、ページ遷移のたびに全体を描き直す方式とは異なります。
描画対象のコンポーネントはまとめて処理され、データの読み込みもページ表示を止めずに進みます。データの準備に時間がかかる場合は、プレースホルダーを含むページを先に送り、取得したデータを後から差し込みます。
HTMLテンプレートの先頭部分を先にブラウザーへ送ることもできます。ブラウザーは残りの描画が進む間に、CSSや画像などの読み込みを始められます。
描画中にデータベースへアクセス
Topcoatは、Lerche氏が開発したRust製の非同期データベースORM「Toasty」と連携します。ORMは、データベースのデータをアプリケーションのオブジェクトとして扱う仕組みです。
この連携では、サーバー上のコンポーネントがデータベースへ直接アクセスし、データを使って描画できます。データをいったんクライアントへ送って再び読み取る処理を挟まずに済むと、Lerche氏は説明しています。
サーバー側に処理を置きながら画面の一部を更新する考え方は、HTMX、Datastar、Phoenix LiveViewにも見られます。Topcoatは、こうしたサーバー描画の手法をRust向けに取り入れています。
DatastarはHTMLやイベントストリームで更新を送る
Datastarでは、バックエンドがHTML要素を追加・更新・削除してブラウザーのDOMを変更します。DOMは、ブラウザーがページの要素を管理する仕組みです。
通常のHTTP応答がHTMLの場合、Datastarは応答に含まれる要素を既存のDOMと照合し、変更箇所を反映します。複数の要素を一度に更新することもできます。
応答にサーバー送信イベント（SSE）を使うと、サーバーは一つの接続を通じて複数回の更新を送れます。Datastarは受け取ったイベントに含まれるHTMLを画面へ反映します。
Datastarのイベント送信とTopcoatの違い
Datastarでは、HTMLのdata-*属性にイベント処理やサーバーへのリクエストを記述できます。たとえば、クリック時にGETリクエストを送る動作を要素に指定できます。
DatastarでSSEを使うと、サーバーはイベントごとにHTML要素の更新を送信します。接続を維持できるため、後から届く更新も同じストリームに載せられます。
Datastarでは、サーバーが更新対象をセレクターで指定し、HTMLの内側だけを差し替えることもできます。Topcoatもコンポーネント単位で画面を更新しますが、Rustのコードをサーバー側で実行し、Toastyからデータを取得して描画します。
Topcoatが想定するアプリの範囲
Lerche氏は、Topcoatが複雑なアプリケーション向けではないとしています。小規模なWebプロジェクトを主な対象とし、利用できるRust構文も一部に限られます。
フロントエンド開発者のKen Kohlman氏は、Topcoatの使い始めやすさを評価する一方、Rustの構文すべてを使えない点を指摘しました。この制限は、Rustの機能を幅広く利用したい開発者に関係します。
