Dioxus 0.3 – Templates, Hot Reloading, LiveView, and More
dioxuslabs.comVery 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.
Cool. Can you use svelte stores across multiple liveview navigations?
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
Yea, for sure it should be possible to do it with local storage but the real cool thing would be to be able to keep state in js between live redirects. Like you said it should be possible if using live redirect. Would love that. Good luck! Hope to be able to use your library in the future.
Hey, I got a simple example of using stores where you live redirect between 2 liveviews but the store information is kept. Was able to do it with saving the store to the window:
https://github.com/woutdp/live_svelte/tree/master/examples/s...
What could be cool if I can somehow map the reactive liveview state directly to a store... not sure how to do this yet but hope I can figure it out
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
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.
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.
Is Phoenix's LiveView protocol documented anywhere? That would be pretty interesting reading.
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.
> 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.
I think it would be clearer to rename LiveView to something else, so as not to draw confusion with Elixir's LiveView.
OTOH, LiveView sounds generic enough to become the name of the whole paradigm.
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.
What about "live streaming server-side rendering", or Live SSR? That implies it's live and server side rendered...
I've been working with on like this for a while and I would also like to have a good name for it.
LiveView is a good name but not for generic use since there is a library with that name already.
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
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).
> 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
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.
How about assemblyscript?
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.
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?
It’s just a subset of TypeScript that compiles more directly to WASM and just as easily to JavaScript itself.
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.
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.
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.
Author here. Didn't expect to see Dioxus on HN today!
If you're doing LiveViews in Rust, does it work per-process-per-user like Elixir? How does that all work?
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.
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 {}
source code looks pretty readable. there doesn't seem to be much magic. is there any support for use with other languages?
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.