diff --git a/README.md b/README.md index ff51bff..19f45d5 100644 --- a/README.md +++ b/README.md @@ -72,12 +72,34 @@ Most of the examples assume you’re using `nightly` Rust. If you’re on stable [`counters-stable` example](https://github.com/gbj/leptos/blob/main/examples/counters-stable/src/main.rs) for examples of the correct API. +## Benchmarks + +### Server-Side Rendering + +I’ve created a benchmark comparing Leptos’s HTML rendering on the server to [Tera](https://github.com/Keats/tera), [Yew](https://github.com/yewstack/yew), and [Sycamore](https://github.com/sycamore-rs/sycamore). You can find the benchmark [here](https://github.com/gbj/leptos/tree/main/benchmarks) and run it yourself using `cargo bench`. + +`cargo bench` ns/iter + + + + + + + + + + + +
TeraLeptosYewSycamore
3 Counters3,4545,66634,98432,412
TodoMVC (no todos)2,3965,56138,72568,749
TodoMVC (1000 todos)3,829,4473,077,9075,125,63919,448,900
Average1.081.656.259.36
+ +As you can see, Leptos renders HTML roughly as fast as Tera, and scales well as templates become larger. It's significantly faster than the server-side HTML rendering done by similar frameworks. + +### Client-Side Rendering + +The gold standard for testing raw rendering performance for front-end web frameworks is the [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark). The current results (which you can see if you check out `master` from the benchmark repo and open the results page) have Leptos as the fastest Rust/Wasm framework on this benchmark. + ## FAQs -### Is it fast? - -The gold standard for testing raw rendering performance for front-end web frameworks is the [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark). I'm waiting for the next round of official results before making claims about performance here, but the unofficial results (which you can see if you check out `master` from the benchmark repo and open the results page) have Leptos as the fastest Rust/Wasm framework, on this benchmark. - ### How is this different from Yew/Dioxus? On the surface level, these libraries may seem similar. Yew is, of course, the most mature Rust library for web UI development and has a huge ecosystem. Dioxus is similar in many ways, being heavily inspired by React. Here are some conceptual differences between Leptos and these frameworks: diff --git a/benchmarks/Cargo.toml b/benchmarks/Cargo.toml index e3c86a1..db1e368 100644 --- a/benchmarks/Cargo.toml +++ b/benchmarks/Cargo.toml @@ -12,11 +12,13 @@ miniserde = "0.1" gloo = "0.8" uuid = { version = "1", features = ["serde", "v4", "wasm-bindgen"] } wasm-bindgen = "0.2" +lazy_static = "1" log = "0.4" strum = "0.24" strum_macros = "0.24" serde = { version = "1", features = ["derive", "rc"]} serde_json = "1" +tera = "1" [dependencies.web-sys] version = "0.3" diff --git a/benchmarks/src/lib.rs b/benchmarks/src/lib.rs index 2d68022..a1dd6d1 100644 --- a/benchmarks/src/lib.rs +++ b/benchmarks/src/lib.rs @@ -2,6 +2,6 @@ extern crate test; -mod reactive; +//mod reactive; mod ssr; mod todomvc; diff --git a/benchmarks/src/ssr.rs b/benchmarks/src/ssr.rs index 13cd15d..67aeb4d 100644 --- a/benchmarks/src/ssr.rs +++ b/benchmarks/src/ssr.rs @@ -38,6 +38,48 @@ fn leptos_ssr_bench(b: &mut Bencher) { }); } +#[bench] +fn tera_ssr_bench(b: &mut Bencher) { + use tera::*; + use serde::{Serialize, Deserialize}; + + static TEMPLATE: &str = r#"
+

Welcome to our benchmark page.

+

Here's some introductory text.

+ {% for counter in counters %} +
+ + Value: {{ counter.value }}! + +
+ {% endfor %} +
"#; + + lazy_static::lazy_static! { + static ref TERA: Tera = { + let mut tera = Tera::default(); + tera.add_raw_templates(vec![("template.html", TEMPLATE)]).unwrap(); + tera + }; + } + + #[derive(Serialize, Deserialize)] + struct Counter { + value: i32 + } + + b.iter(|| { + let mut ctx = Context::new(); + ctx.insert("counters", &vec![ + Counter { value: 0 }, + Counter { value: 1}, + Counter { value: 2 } + ]); + + let _ = TERA.render("template.html", &ctx).unwrap(); + }); +} + #[bench] fn sycamore_ssr_bench(b: &mut Bencher) { use sycamore::*; diff --git a/benchmarks/src/todomvc/leptos.rs b/benchmarks/src/todomvc/leptos.rs index dcc6ed8..725205e 100644 --- a/benchmarks/src/todomvc/leptos.rs +++ b/benchmarks/src/todomvc/leptos.rs @@ -246,10 +246,7 @@ pub fn Todo(cx: Scope, todo: Todo) -> Element { class="toggle" type="checkbox" prop:checked={move || (todo.completed)()} - on:input={move |ev| { - let checked = event_target_checked(&ev); - (todo.set_completed)(checked); - }} + />