HN 日本語サマリー

← 一覧へ戻る
プログラミング

Topcoat: Rustのためのフルフルスタックフレームワーク

Topcoat: The full full-stack framework for Rust (github.com)

31 pointsby wertyk22 コメント

要約

Topcoatは、Rustでフルスタックアプリケーションを構築するためのモジュラーで機能豊富なフレームワークです。シンプルさと生産性を重視しており、サーバーサイドレンダリングとクライアントサイドのリアクティビティを組み合わせることで、APIレイヤーのボイラープレートを削減します。WebAssembly(Wasm)バンドルやクライアントビルドステップなしで、サーバーとブラウザ間でシームレスなインタラクションを実現します。

全文翻訳

Topcoat RustのためのフルフルスタックフレームワークTopcoatは、フルスタックアプリを構築するためのモジュラーで、すぐに使えるRustフレームワークです。シンプルさと生産性を優先しています。新しいプロジェクトを設定するには、Getting startedガイドを参照してください。初期段階であり、実験的です。破壊的な変更が予想されます。use topcoat::{ Result, router::{Router, RouterBuilderDiscoverExt, page}, view::{component, view}, }; #[tokio::main] async fn main() { topcoat::start(Router::builder().discover().build()).await.unwrap(); } #[page("/")] async fn home() -> Result { view! { <!DOCTYPE html> <html> <body> hello(name: "World") </body> </html> } } #[component] async fn hello(name: &str) -> Result { view! { <h1>"Hello, " (name) "!"</h1> } } Topcoatが異なる点ボイラープレートなしのクライアントリアクティビティTopcoatは、すべてのマークアップをサーバーでレンダリングします。コンポーネントは非同期で、データベースに直接クエリできるため、独立したAPIレイヤーに必要な従来のボイラープレートがすべて不要になります。インタラクティビティは、ラウンドトリップを必要としません。$(...)式は通常の型チェックされたRustであり、Topcoatは初期レンダリングのためにサーバーで評価し、JavaScriptにも変換するため、ブラウザで即座に再実行されます。Wasmバンドルもクライアントビルドステップも不要です。view! { signal open = false; // サーバーとのラウンドトリップなしで、完全にブラウザで実行されます。 <button @click=$(|_e| open.set(!open.get()))>"What is Topcoat?"</button> <p :hidden=$(!open.get())>"A fullstack Rust framework."</p> } 更新がサーバーを必要とする場合(例:新しい検索結果)、コンポーネントを#[shard]としてマークします。Topcoatは、$(...)引数のいずれかが変更されるたびにサーバーで再レンダリングし、新しいHTMLをその場でスワップします。#[component] async fn search() -> Result { view! { signal query = String::new(); <input @input=$(|e: Event| query.set(e.target.value))> // ユーザーが入力するたびに更新されます。 search_results(query: $(query.get())) } } #[shard] async fn search_results(cx: &Cx, query: String) -> Result { view! { <ul> // データベースクエリのような独自のサーバーサイドコード: for product in search_products(cx, &query).await? { <li>(product.name)</li> } </ul> } } 強力で、驚きの少ないHTMLテンプレートview!マクロは、HTMLとRustに忠実です。テンプレートの一部として、おなじみのRustの制御フローを使用できます。view! { <nav> for item in nav_items { <a href=(item.url) if item.url == current_path { aria-current="page" class="active" } > (item.label) </a> } </nav> } topcoat fmt CLIコマンドを使用して、コードベース全体のview!スニペット(およびその他のマクロ)を自動的にフォーマットします。モジュールベースのルーティングTopcoatは、ビルドステップなしで、アプリのモジュール構造からルートツリーをオプションで推測できます。src/ |-- app.rs -> /(およびルート<html>レイアウト) `-- app/ |-- about.rs -> /about |-- _marketing.rs(レイアウト、URLセグメントなし) |-- _marketing/ | `-- pricing.rs -> /pricing |-- posts.rs -> /posts |-- posts/ | `-- id.rs -> /posts/{post_id} `-- api/ `-- health.rs -> GET /api/health アセットバンドリングバンドラーは、コンパイルされたバイナリをスキャンしてasset!呼び出しを探し、すべてのファイルをローカルアセットディレクトリにコピー(またはダウンロード)し、Topcoatがそれらを積極的なブラウザキャッシングで効率的に提供できるようにします。const FERRIS: Asset = asset!("./ferris.png"); view! { <img src=(FERRIS)> } Topcoatは、Webフォントやアイコンのユーティリティ、Fontsource(Google Fonts)やIconifyとの簡単な統合も提供します。組み込みTailwindサポートtailwindフィーチャーを有効にすると、Tailwindをプロジェクトに簡単に統合できます。view! { <link rel="stylesheet" href=(topcoat::tailwind::stylesheet!())> } Topcoatを学ぶここから始めるGetting started:新しいプロジェクトを作成し、CLIをインストールし、開発サーバーを実行します。ソースコードのフォーマット:マクロ本体のtopcoat fmt。レンダリングview!マクロ:テンプレート構文、制御フロー、条件付き属性。#[component]マクロ:非同期関数をコンポーネントとして、子コンテンツ付き。attributes!マクロ:再利用可能なランタイム属性フラグメント。class!マクロ:静的および条件付きエントリからのスペース区切りクラスリスト。ルーティングRouter:ページ、レイアウト、APIルート。手動および自動検出。モジュールベースルーティング:モジュールツリーからルートテーブルを派生させます。リクエストの処理Request context (Cx):ページ、レイアウト、コンポーネントが読み取る値。App context:型でキー付けされた、リクエスト間で長寿命の値を共有します。Memoization:リクエストごとのキャッシングとファンアウトの重複排除のための#[memoize]。Functions, not middlewares:認証やその他のリクエストスコープの懸念をモデル化する推奨方法。Cookies:署名済み、暗号化済み、プレフィックス付きのCookieを使用して、リクエストCookieジャーを読み書きします。Sessions:ストレージを持ち込むセッション認証:ログイン/ログアウトライフサイクル、スライド有効期限、トークンローテーション。AssetsAssets:Rustでアセットを宣言し、コンテンツハッシュURLで提供します。Fonts:Webフォントをバンドルして提供します。Icons:Iconifyアイコンセットをダウンロードするか、独自のアイコンを宣言します。Client reactivityRuntime:シグナル、$(...)式、@イベントハンドラ、:bind属性。Expressions:二重のRust/JavaScript式言語とその語彙。Procedures:ブラウザから呼び出し可能な非同期サーバー関数。Shards:引数が変更されるとサーバーで再レンダリングされるコンポーネント。サードパーティ統合Tailwind:NodeなしのTailwind CSS、アセットパイプラインに接続されています。htmx:リクエスト/レスポンスヘッダーヘルパーからサーバーで部分的なHTMLスワップを駆動します。