Dioxus 0.3 – Templates, Hot Reloading, LiveView, and More

Dioxus 0.3 – Templates, Hot Reloading, LiveView, and More(dioxuslabs.com)

99 points by jgillich 3 years ago | 32 comments

POiNTx 3 years ago |

Very timely, I've been working on Svelte integration for Phoenix Liveview, started working on it this week[1]. It's very cool to see LiveView expanding as a paradigm outside of Phoenix.

[1] https://github.com/woutdp/live_svelte

victorbjorklund 3 years ago | |

Cool. Can you use svelte stores across multiple liveview navigations?

POiNTx 3 years ago | | |

That's something I need to look into. - Should be possible by saving the store in the localstorage and fetching it again on a different page. - Or saving the store to the window[1], as long as the page transitions happen through a live redirect[2] it should still be there.

I'm building a collection of examples[3] and if I can get it working I'll add it.

[1] https://wout.space/notes/how-to-share-store-between-multiple...

[2] https://hexdocs.pm/phoenix_live_view/live-navigation.html

[3] https://github.com/woutdp/live_svelte/tree/master/examples

floodfx 3 years ago |

Great to see another language adopting LiveView! (Author of LiveViewJS[1] here).

Are you using Phoenix’s javascript client (and protocol) or rolling your own?

[1] - http://LiveViewJS.com

jkelleyrtp 3 years ago | |

We're using our own protocol right now - haven't really looked too deeply at the Phoenix protocol. We use templates (like Solid or Blockdom) to build and patch the page which is pretty specific to Dioxus.

floodfx 3 years ago | | |

Cool. We went with re-using/adopting Phoenix's because it is battle-tested and allowed us to not have to rebuild/find edge cases on browser event handling and DOM morphing and optimizing diffs. If you ever want a walk through lmk.

quechimba 3 years ago | | |

Interesting! I implemented a virtual DOM in Ruby which streams patches to the browser.

I think this is is a really powerful way to make web apps and it's nice to see that others are doing it too.

mwcampbell 3 years ago |

> We’re actively working on adding accessibility support using the work done by EGUI as inspiration.

Glad to hear it. FWIW, I worked on the AccessKit integration in egui, as well as AccessKit itself, so let me know if you need help.

whitepoplar 3 years ago |

I think it would be clearer to rename LiveView to something else, so as not to draw confusion with Elixir's LiveView.

manmal 3 years ago | |

OTOH, LiveView sounds generic enough to become the name of the whole paradigm.

toolz 3 years ago | | |

I would support liveview defining the entire process. I've written a lib myself to do liveview type things and coming up with a solid descriptor for things like conference talks was basically impossible. I write a lot of elixir and I would presume "phoenix liveview" is probably what people use to describe the elixir lib to people outside of the ecosystem anyways.

swlkr 3 years ago |

Dioxus liveview is so good.

I tried it with salvo and it just worked (tm).

The only downside which they're working on is some kind of socket reconnect if someone navigates away and the socket gets disconnected for some reason

jkelleyrtp 3 years ago | |

Yep, I think the PR is ready to go too!

https://github.com/DioxusLabs/dioxus/pull/762

I think the next logical step is to build our own "Phoenix" on top of axum (or hyper).

nicoburns 3 years ago | | |

> I think the next logical step is to build our own "Phoenix" on top of axum (or hyper)

That would be awesome even without any live view like functionality

Existenceblinks 3 years ago |

On their github repo:

> Simple "hello world" at about 65kb, comparable to React

I assume that is minified and compressed. That's quite bloat. I wonder if they try https://github.com/johnthagen/min-sized-rust ?

Also I feel like the BytecodeAlliance too much focus on their cloud runtime use case while seamless wasm + dom interop is where its adoption will skyrocking. I would rather write Rust/Go/Roc/any-sane-typing instead of TS.

sroussey 3 years ago | |

How about assemblyscript?

Existenceblinks 3 years ago | | |

It's okay. It actually produces the smallest wasm binary size AFAIK. I'm just tired of niche languages already. If I were to go niche why not https://grain-lang.org/ ? It's even a wasm-first lang. Zig is also good and produces small wasm binary. That said, I think Rust/Go is fine.

jitl 3 years ago | | |

AssemblyScript seems like a pointless also-ran. Why pick a language with very little support or community for your native code when you could pick Rust or C++? For any substantial app, I think an investment with Rust would be much better than an equal sized investment into AssemblyScript.

I think Rust will be around in 5 years. Will AssemblyScript?

revskill 3 years ago |

I tried my best to browse all the docs and guides and sample code to know what does live view mean , but failed.

I guess this project's trying to make some buzzword ?

Because for documentation, assumption is bad.

POiNTx 3 years ago | |

LiveView is just updating the HTML DOM through a websocket. Instead of using a conventional API, everything happens through the websocket.

This way you can write server side templates to update the client automatically on server side state changes without needing to use an API on the client to fetch the state or even manipulate the state.

revskill 3 years ago | | |

I know and heard "liveview" before, from hotwire to liveview from phoenix. It's just that i can't see this through this project's docs or code sample.

jkelleyrtp 3 years ago |

Author here. Didn't expect to see Dioxus on HN today!

Mizza 3 years ago |

If you're doing LiveViews in Rust, does it work per-process-per-user like Elixir? How does that all work?

jkelleyrtp 3 years ago | |

The state of the app lives in an async task which can be multithreaded or distributed. Rust webservers can handle tens of thousands (hundreds of thousands?) of connections at once.

e12e 3 years ago |

Looks like a tyoo/error under lowercase components:

> Note that you still cannot define a one-word component without referencing it via path syntax.

  module::header {}

Should be OK, not "x"?

pictur 3 years ago |

source code looks pretty readable. there doesn't seem to be much magic. is there any support for use with other languages?

jkelleyrtp 3 years ago | |

We don't have any bindings for Dioxus into other languages, but there are a handful of projects within the Dioxus ecosystem that do, like taffy.

http://github.com/dioxusLabs/taffy