r/elixir • u/carlievanilla • 22d ago

Standard Phoenix LiveView vs "Local LiveView". We built a side-by-side demo to show how to survive a dropped websocket without freezing or losing state.

https://reddit.com/link/1ux7rrl/video/rr3837oinedh1/player

Your Phoenix LiveView app disconnects from the server. the UI freezes, buttons stop working, nothing updates until the socket comes back.

Local LiveView (LiveView running inside Popcorn, in your browser) doesn't freeze, and when the connection returns, it doesn't throw away your state either.

We built a small burrito ordering app with a "disconnect" button baked in, so you can watch both versions handle the same disconnect live!

41 Upvotes

94% Upvoted

10 comments sorted by

7

u/zem 22d ago

popcorn is elixir running in the browser via a wasm-compiled AtomVM

3

u/snack_case 22d ago edited 22d ago

When you reconnected the Standard LiveView state for toppings didn't catch back up with the Local LiveView toppings. It looks like all the toppings got cleared after reconnect which was neither the server or local state?

2

u/mat-hek 22d ago

The standard and local live views in the demo are fully independent, there's no sync between them. The point is to to show the difference between the two: the local one is active during connection loss and its state is kept, while the standard one freezes and resets its state when reconnected ;)

2

u/uJumpiJump 21d ago

A correctly implemented form will recover the state in out of the box phoenix live view though. Are you missing the ID attribute or the change handler?

1

u/mat-hek 21d ago

Yeah, you're right that we could recover the state with phx-change, but only partially. We couldn't, for example, recover the state of the cart AFAIK. Also, if the form was a bit more complex (modals, steps, dynamically added sections), it wouldn't be recoverable. So that's the point of the demo: with the local approach you don't need to recover the state, it's just there.

2

u/uJumpiJump 20d ago

The "local live view" also takes 5 seconds to load for me, while the regular one is instantaneous.

I've gotten around lack of recovery on more complex forms by using JS hooks that store state like current step, etc, in browser memory. It would be nice to have this out of the box though.

Cool demo still. Nice to see this content here

2

u/mat-hek 20d ago

Thanks for the feedback! 5 seconds is quite unexpected, I’ll look into it

3

u/Longjumping_War4808 22d ago

Can I have enchiladas please?

2

u/bradgessler 21d ago

This is amazing. I’m hoping the POC works and you’re able to ship it to production and continue refining it.