ベンチマーク

サーバー側のレンダリング

サーバー上のLeptosのHTMLレンダリングをTera、Yew、Sycamoreと比較するベンチマークを作成しました。ここでベンチマークを見つけて、自分で実行できます。LeptosはHTMLをTeraとほぼ同じ速さでレンダリングし、テンプレートが大きくなるにつれて適切にスケーリングされます。これは、同様のフレームワークによって行われるサーバー側のHTMLレンダリングよりも大幅に高速です。

cargo bench

クライアント側レンダリング

フロントエンドWebフレームワークの生のレンダリングパフォーマンスをテストするためのゴールドスタンダードは、js-framework-benchmarkです。公式の結果には、Leptosが最速のRust / Wasmフレームワークとしてリストされており、SolidJSよりもわずかに遅く、Svelte、Preact、Reactなどの一般的なJSフレームワークよりも大幅に高速です。

クリックして結果を表示

御意見・御感想

これをネイティブGUIに使用できますか?

もちろん！明らかにマクロはDOMノードを生成するためのものですが、リアクティブシステムを使用して、DOMと同じ種類のオブジェクト指向のイベントコールバックベースのフレームワークを使用するGUIツールキットをネイティブに簡単に駆動できます。原則は同じです。

view

• 信号、派生信号、メモを使用して反応型システムを作成
• GUI ウィジェットを作成する
• イベントリスナーを使用してシグナルを更新する
• UI を更新する効果を作成する

私は非常に簡単なGTKの例をまとめたので、私が何を意味するのかがわかります。

これはイチイ/ダイオクサスとどう違うのですか?

表面的には、これらのライブラリは似ているように見えるかもしれません。もちろん、YewはWeb UI開発のための最も成熟したRustライブラリであり、巨大なエコシステムを持っています。ダイオクサスは多くの点で似ており、Reactに大きく影響を受けています。Leptosとこれらのフレームワークの概念的な違いは次のとおりです。

• VDOMときめ細かな比較:Yew は仮想 DOM (VDOM) モデルに基づいて構築されており、状態が変化するとコンポーネントが再レンダリングされ、新しい仮想 DOM ツリーが生成されます。Yew はこれを以前の VDOM と照合し、それらのパッチを実際の DOM に適用します。コンポーネント関数は、状態が変化するたびに再実行されます。レプトスはまったく異なるアプローチを取ります。コンポーネントは一度実行され、実際のDOMノードを作成(および返し)し、それらのDOMノードを更新するようにリアクティブシステムを設定します。
• パフォーマンス：これはパフォーマンスに大きな影響を与えます:Leptosは、YewよりもUIの作成と更新の両方ではるかに高速です。
• メンタルモデル:きめ細かな反応性を採用すると、メンタルモデルも単純化される傾向があります。再レンダリングがないため、驚くべきコンポーネントの再レンダリングはありません。アプリは、パフォーマンスに影響しないため、アプリにとって意味のあるものに基づいてコンポーネントに分割できます。

これはシカモアとどう違うのですか?

概念的には、これら 2 つのフレームワークは非常に似ています: どちらもきめ細かい反応性に基づいて構築されているため、ほとんどのアプリは 2 つの間で非常によく似ており、Sycamore または Leptos アプリはどちらも SolidJS アプリによく似ています。

大きな違いを生むいくつかの実際的な違いがあります。

• 成熟：Sycamoreは明らかに、より大きなエコシステムを備えたはるかに成熟した安定したライブラリです。
• テンプレート:レプトスはJSXのようなテンプレートフォーマット(syn-rsx上に構築)をマクロに使用します。Sycamoreは、独自のテンプレートDSLまたはビルダー構文の選択肢を提供します。

  view

• テンプレートノードのクローン作成:Leptosのマクロは、静的なHTML文字列とそのリアクティブ値を割り当てる方法の一連の命令にコンパイルされます。これは、実行時に、LeptosがDOMノードを作成するのではなく、アノードのクローンを作成できることを意味します。これは、コンポーネントをレンダリングする非常に高速な方法です。

  view

  <template>

  document.createElement()

• 読み取り/書き込み分離:Leptosは、Solidと同様に、シグナルゲッターとセッターの間の読み取り/書き込み分離を促進するため、次のようなタプルでシグナルにアクセスすることになります(必要に応じて、またはAPIにとってより便利な場合は、create_rw_signalを使用して統一された読み取り/書き込みシグナルを提供できます)。

  let (count, set_count) = create_signal(cx, 0);

• 信号は関数です:Leptosでは、特定のメソッドを呼び出すのではなく、シグナルを呼び出してアクセスすることができます(そう、代わりに) これにより、より一貫性のあるメンタルモデルが作成されます:リアクティブ値へのアクセスは常に関数を呼び出すことの問題です。例えば：

  count()

  count.get()

let (count, set_count) = create_signal(cx, 0); // a signal
let double_count = move || count() * 2; // a derived signal
let memoized_count = create_memo(cx, move |_| count() * 3); // a memo
// all are accessed by calling them
assert_eq!(count(), 0);
assert_eq!(double_count(), 0);
assert_eq!(memoized_count(), 0);

// this function can accept any of those signals
fn do_work_on_signal(my_signal: impl Fn() -> i32) { ... }