DEV Community

Cover image for E2E Reactivity using Svelte with Phoenix LiveView

E2E Reactivity using Svelte with Phoenix LiveView

Ryan Cooke on November 17, 2022

This post is based on a talk given at ElixirConf 2022 Svelte is a reactive JS framework that is delightful to use - it finds a perfect balance bet...
Collapse
 
woutdp profile image
Wout De Puysseleir

Love this. I tried it out and it works!

I was wondering if it would be possible to Server Side Render the Svelte component, it only loads in in the browser in my setup so you get a brief flash of unrendered content. Is that something you looked into by any chance?

It would be awesome to have a full integration working where you could simply provide a Svelte sigil just like how surface-ui does it but for Svelte... That seems like the ultimate E2E reactivity experience, your post makes me think it's totally possible...

Collapse
 
debussyman profile image
Ryan Cooke

I don't think it's possible to Server Side Render the component, since the Svelte "engine" is running client-side as JavaScript and is manipulating the DOM in the browser.

Do address the flash, I'd use the LiveView provided hooks for showing/hiding the "loading" state. The default is a top-of-the-page loading bar, but you can override it to show any UI you'd like, and this HTML should be rendered server side. This would work if your main view component is a LiveView, and it has Svelte components embedded.

A sigil should be possible! My example uses LiveComponent, but any element that can trigger the custom hook should work, and since that's just an element attribute, I don't see a reason that couldn't be coded as a sigil. I'll have to give it a try!

Collapse
 
woutdp profile image
Wout De Puysseleir

Hey Ryan, I've been working on a package that incoorporates this blogpost

github.com/woutdp/live_svelte

It's very early stages, there's still a bunch of things to do, but it's a working prototype!

It does have Server Side Rendering for Svelte! I was able to make it work by invoking Node from within the live component.

I intend to work on it more and flesh it out before releasing it to a more wide audience, and I also want to make a video to showcase some of the features.

Would love to have you involved in any way possible if you feel up for it and have the interest!

Thread Thread
 
debussyman profile image
Ryan Cooke

This is really cool! I hadn't yet seen LiveComponents using NodeJS.call! like you are, didn't know that was possible.

I'd love to help out! I see you already sketched out some planned issues on the repo. What's the best way to get involved?

Thread Thread
 
woutdp profile image
Wout De Puysseleir

Hi Ryan so happy to hear back from you! Any way you can help is definitely appreciated! You can comment on any issue and I can let you know if I already looked into it and what my findings were

Also if you think the API can be improved definitely up for refactoring a bit, might not be ideal yet.

For issues:

  • I'm looking into slots now, seeing if it's possible to pass a slot from the LiveComponent to Svelte, that would be really cool for things like Modals. But still struggling with it to make it work. In SSR you can pass raw html as a slot, but in the client you need to interact with $$slots which doesn't work for me at the moment

  • Another thing I was struggling with was goto which didn't work for me, I saw that just writing it like this works for me: github.com/woutdp/live_svelte#live...

Thread Thread
 
debussyman profile image
Ryan Cooke

Sounds good, I'll pull the project and play around with it! And if I can make some headway on slots, I can add some comments or open a PR.

I'm also really curious about the Svelte component when using Node on the server-side, I might try some profiling to see how that looks on the client.

Exciting stuff!

Collapse
 
ktec profile image
globalkeith

Fun! Thanks for the write up!

Collapse
 
debussyman profile image
Ryan Cooke

Thanks for reading!

Collapse
 
pookiepats profile image
pookiepats

I'm a SQL / DBA guy by trade - my company was just purchased and now in order to stay on I am now magically SQL/ DBA & Web Dev guy by trade : D

I have two weeks to get a SPA LIVE and I'm going to use your method, i'll let you know how it goes! Thank you! ( i think haha)

Collapse
 
debussyman profile image
Ryan Cooke

So how'd it go? Really curious if it was easy to pick up :)

Collapse
 
clsource profile image
Camilo

I like Svelte and love phoenix. This can be a nice way to combine both.
But how this approach is better than using Inertia.js and Svelte with a Phoenix Backend?.

Thanks :)

Collapse
 
debussyman profile image
Ryan Cooke • Edited

The critical difference is the data exchange.

With Inertia, you still need to fetch data from the client (while also managing authentication), using some JS/HTTP library (fetch, axios). Basically your backend is a typical API or SSR, fetching data by polling or through user interaction or page reload.

With Svelte/LiveView, you get an authenticated web socket which lets you invoke actions on the backend by pushing messages from JS. This web socket is managed by LiveView, so you don't have to worry about setup/teardown/reconnect.

But the killer feature is that LiveView can push data changes from the server to the client over the socket, without the client requesting it, and Svelte will rerender the component automatically! Again, LiveView manages this state for you using the socket assigns. In real-world apps, not all data updates originate from a single user in their browser, so this creates a truly seamless app-like experience.

Collapse
 
nalaka profile image
Nalaka Jayasena

Mind blown!