Live data from Hacker News

LiveView Is Best with Svelte

blog.sequin.io

81–90 of 158 posts

Re: LiveView Is Best with Svelte

#81
post #5

So instead of managing state on the client, you manage state on the client and the server? That doesn't seem like an improvement, even if it saves you from having to build yet another API.

This is no different than any other optimization performed in any other software ecosystem. There is no reason to do this unless you have to. And the reason you would have to is because of performance and user experience.

When your web application requires the following:

- Large amount of user interaction (requires client side JavaScript)

- Large amount of experimentation (bundle is not static, changes per request)

You are going to want to split up the logic on the server and client to reduce the amount of JavaScript you're sending to the client. Otherwise you have a MB JavaScript bundle of all the permutations you're application could encounter. This may be fine for something like a web version of Photoshop where the user understands that an initial load time is required. But for something like Stripe, Gmail, etc. where the user expects the application to load instantly you want to reduce the initial latency of the page.

You can move everything to the server, but like GitHub experienced you then encounter a problem where user interaction on the page suffers because user actions which are expected to be instant, instead require a round trip to the server (speed of light and server distribution then becomes an issue).

You can lazy load bundles with something like async import, but then you run into the waterfall problem, where the lazy loaded JavaScript then needs to make a request to fetch it's own data, and you're left making two requests for everything.

If you encounter all these problems then you end up reaching for solution which make it easier to manage the complex problem of sharing logic/state between the client and the server.

Re: LiveView Is Best with Svelte

#82

A pattern sometimes used in multiplayer video games is there's a bunch of code that is by default run on both the client and the server. The client code runs as a prediction of the server state. When the server state is received it slams the client state. For games "prediction" is an apt description of this, because the client can make a good guess as to the result of their input, but can't know for sure since they d…

Isn’t that just optimistic updates? This has been common in client side logic for a long time, no?

Re: LiveView Is Best with Svelte

#83

I love LiveView + Svelte! (I gave the talk at ElixirConf 2022 on how to combine them, but the live_svelte contributors have done the work to make it a reality) IMO there is always a need for client side state, especially for apps with rich UX. I also live in NYC where network connectivity is not a given, especially in transit. One super powerful feature that the authors don't cover is being able to use Phoenix's pubs…

Mobile networks in general also produce a lot of latency and often warrants a local first caching system on the client. If you want a LiveView like user experience but resilience to flaky network conditions, we just added Svelte 5 bindings to Triplit[1] which let's you write queries client-side and have them sync with a server over web-sockets. Probably not attractive to Elixir devs but if Svelte is your central focus, Triplit is a good option.

[1] https://www.triplit.dev/docs/frameworks/svelte

Re: LiveView Is Best with Svelte

#84
post #5

So instead of managing state on the client, you manage state on the client and the server? That doesn't seem like an improvement, even if it saves you from having to build yet another API.

Yeah that is the crux of most modern three-tiered architectures (clientserverdatabase) these days. We're working on simplifying this with a new concept: a full-stack database.

If you run an identical query engine on client and server and then sync data between them, a client can just write a normal query on the client and you get an optimistic response instantly from a local cache and then later a response from the authoritative server. Frankly, this is where most highly interactive apps (like Whatsapp, Linear, Figma, etc) end up anyway with bespoke solutions we're just making it general purpose.

Re: LiveView Is Best with Svelte

#85
post #66

A pattern sometimes used in multiplayer video games is there's a bunch of code that is by default run on both the client and the server. The client code runs as a prediction of the server state. When the server state is received it slams the client state. For games "prediction" is an apt description of this, because the client can make a good guess as to the result of their input, but can't know for sure since they d…

That's what I did with: https://territoriez.io/ It's a clone of https://generals.io/ It's built with LiveSvelte. It doesn't need any predictive features as it's basically a board game and runs at 2 ticks per second. It does use optimistic updates to show game state before it actually updates on the server. The server overrides the game state if they're not in sync. All game logic is done inside Elixir. To do predicti…

> To do predictive correctly, you'd need to share logic between the server and the client. > > One possible solution […] is to write all game logic in gleam […]

Rust, with Uniffi, can also be a good candidate. You’d be targeting WebAssembly.

Re: LiveView Is Best with Svelte

#86
post #19
post #10

Generally speaking this is the model I’ve always been wanted to build apps in. Event oriented, bidirectional realtime updates with server, ordered events, local and remote state... I didn’t know about LiveView and never used erlang-family languages, but definitely they’re onto something. The traditional request-response model is many times causing a lot of subtle problems with consistency and staleness. A wishful (pr…

> I hope the next decade will be oriented around integrating stateful message-oriented (reactive?) programming into the mainstream full stack Also known as MVC before Rails decided to redefine the term.

No, MVC is at best orthogonal to message-passing.

Re: LiveView Is Best with Svelte

#87
post #79
post #66

Earlier quoted context omitted.

That's what I did with: https://territoriez.io/ It's a clone of https://generals.io/ It's built with LiveSvelte. It doesn't need any predictive features as it's basically a board game and runs at 2 ticks per second. It does use optimistic updates to show game state before it actually updates on the server. The server overrides the game state if they're not in sync. All game logic is done inside Elixir. To do predicti…

Hey, about your clone of https://generals.io - why not make it a better designed version of that game instead of just a clone? Perhaps you have plans to. There are things about the original that kind of suck. 1) Spawning closer to the center is just strictly significantly worse, corners are best. It's essentially an auto-lose to spawn anywhere but an edge or corner in a FFA. 2) Getting literally all of someone's armi…

It's a little bit different from generals.io but the points you mention are very valid. I originally started working on it as a showcase of LiveSvelte + I like generals.io a lot and thought it could be improved visually + UX wise. Then afterwards started thinking a bit about the game design and what I could improve, but eventually burned out on the project. Was also at a time when I wasn't working but am working again.

Maybe I'll pick it up at some point, but also open to other people working on it if they're interested. I'd be open to partner up with someone to eventually make it monetized. It's not open source as I wanted to add paid features (cosmetic features, not pay to win).

A solution for most of these issues is a modifier system. I have a basic one in place and wanted to experiment with different modifiers. A modifier can be anything, like prevent spawning in the center, to increasing rewards for capturing cities, to even allow crossing the border of the map into the other side, like pacman (which could address point 1). Then the goal would be to see which modifiers stick with the player base, and make them the default, while still allowing for custom games with different modifiers. Generals has a similar system in place and they sometimes make the modifier the default for the day, which I like a lot.

Re: LiveView Is Best with Svelte

#88
> LiveView makes a lot of things easy. But it also makes some easy things hard.

Having been involved with web applications for a couple decades there were some weird things LiveView did that weren't easy for me to pick up. Maybe its changed in the last 12-18 months but initial versions were built odd for some seemingly easy types of XHR things one would want to do.

Re: LiveView Is Best with Svelte

#89
post #18

Earlier quoted context omitted.

Is there any reason you can think of to still use JS Hooks if using LiveSvelte?

If you just need one simple thing in your app that uses JS it might be overkill to bring in LiveSvelte only for that.

That's true. And another downside is that once you're in the Svelte environment you can't use your Phoenix components inside those Svelte components.

I've thought about adding a library of default Svelte components which mirror the core components you get from Phoenix out of the box. But then again you lose forms and changesets etc, it's just annoying.

Where I see LiveSvelte fit is where you really need a lot of complex client side state. Sprinkle it in, but keep using phoenix components as your default, even with hooks

Post reply on HN