Change of heart about this project

[pintariching]

I want to go about this in a different way. I want to completely move away from javascript and transform this into a frontend framework. The idea for the syntax would be something like this:

<script lang="rs">
    let foo = 5;
    $: bar = foo * 2;
 
    let handle_click = || {
         foo += 1;
    }
</script>

<button on:click={handle_click}>
    count: {foo}
</button>

<h1>{foo} * 2 = {bar}</h1>

<p>{|| {
    format!("Value from a closure: {}", foo)
}}</p>

The idea is, to reformat the <script> tag into valid rust. For example the reactive declaration $: bar = foo * 2; would be transformed probably into a closure like let bar = |foo: i32| {foo * 2}; so it can be recalculated when needed.

All the code between the <script> would be valid rust code except for the reactive declarations. I'm not entirely sure about that, possibly a different syntax for them. Rust has labels, but they're for for and loop like 'label: loop {}.

The entire <script> would then be compiled to web assembly and ran when needed (with javascript as glue because we can't get rid of that yet 😅). The DOM interactions would go through javascript and it would make the framework slower than Svelte (but when was the last time you had to render 1000 recursive divs 😄).

I'm just throwing around ideas for now but I'm not sure if there's a rust frontend framework that does this. Mostly they all use macros to generate the HTML. I'm open to suggestions and what your thoughts are about this decision!

[ealmloff]

👋 I would love to see a framework like this. I was exploring a compiled reactive framework recently as a toy project, but I don't have the time to create anything more real right now so it is good to see someone else exploring these ideas!

All the code between the <script> would be valid rust code except for the reactive declarations. I'm not entirely sure about that, possibly a different syntax for them. Rust has labels, but they're for for and loop like 'label: loop {}.

You can use labeled blocks without a loop. I ended up making the type definition mark reactivity because the type was needed to create a struct.

The entire <script> would then be compiled to web assembly and ran when needed (with javascript as glue because we can't get rid of that yet 😅). The DOM interactions would go through javascript and it would make the framework slower than Svelte (but when was the last time you had to render 1000 recursive divs 😄).

You can have a WASM framework that runs faster than Svelte even when going through the WASM<->JS boundary. There are a few examples: Dioxus (the main framework I work on), and Leptos. It depends much more on the implementation of the framework than the choice of rust. You can also get faster than wasm-bindgen if you do run into that boundary. sledgehammer-bindgen is a project I created to reduce the (already small) overhead of talking to javascript from rust.

Here are some things I ran into while implementing qk that I hope may be useful for you:

1. You don't have to settle for assignment reactivity in rust, but tracking reads and writes without it can be difficult. The most difficult thing to implement in Qk was tracking reactivity. I tried several different approaches, but the two that seem most viable to me are a compiler plugin (taking some of the control flow analysis from Flowistry could be useful here) or dynamic read/write tracking. Qk itself uses dynamic tracking for variables that may be read or written to. This can be invisible to the user with the use of a Wrapper with a cell (example).
2. You can potentially be more efficient allocating than other rust webframeworks if you know the shape of the data each component stores. With a compiled reactive approach, you can create one struct out of your data and optionally box that data. In fine grained reactive approaches and React-like approaches each reactive piece of data must be boxed.
3. If you care about performance, you may want to look into template cloning. I don't think this is something that svelte does, but there is no reason a framework like svelte couldn't pursue this approach. It has a significant effect on performance when creating nodes. Essentially you would need to pull out parts of the HTML that you know are static, create them once, and then clone the template whenever you need a new instance of the template. (feel free to steal any of the code from qk on this)
4. Binary size scales surprisingly well in rust with compiled approaches. Testing how increasing the number of duplicated counter examples effected the binary size of Leptos, Kobold, and Qk the compiled approaches of Kobold and Qk scaled significantly better. This is surprising because the effect is reversed with Javascript frameworks. Svelte tends to scale worse than non-compiled frameworks.

I'm just throwing around ideas for now but I'm not sure if there's a rust frontend framework that does this. Mostly they all use macros to generate the HTML. I'm open to suggestions and what your thoughts are about this decision!

One more complete framework with a semi-svelte architecture is Kobold. One large difference is it uses macros instead of embedding rust in html.

[pintariching]

Thank you very much for your insight! I didn't expect such a detailed and informative response!

I ended up making the type definition mark reactivity because the type was needed to create a struct.

Perhaps separating static and reactive variables could be a way of doing this and at the same time trying out labeled blocks:

'code: {
    // regular variables go here
    let count = 1;
}

'reactive: {
    // reactive variables go here
    let doubled = || { count * 2 }
}

<p>{count} * 2 = {doubled}</p>

You don't have to settle for assignment reactivity in rust, but tracking reads and writes without it can be difficult.

Yeah I very much want to try and track reactivity and follow svelte in that regard. Using labeled blocks like in the above example could help and also building out an AST like we do already.

Regarding performance, I think for now, I'm gonna ignore that part just for a bit and just see what comes out. Kobold seems interesting though I think I want to try and embed rust into html just like svelte does it and see where that takes this project.