3 ms·

Fantastic write up! For those of you who don't think Datastar is good enough for realtime/collaborative/multiplayer and/or think you need any of the PRO featur

Fantastic write up! For those of you who don't think Datastar is good enough for realtime/collaborative/multiplayer and/or think you need any of the PRO features. These three demos each run on a 5$ VPS and don't use any of the PRO features. They have all survived the front page of HN. Datastar is a fantastic piece of engineering. - https://checkboxes.andersmurphy.com/ https://checkboxes.andersmurphy.com/ - https://cells.andersmurphy.com/ https://cells.andersmurphy.com/ - https://example.andersmurphy.com/ https://example.andersmurphy.com/ (game of life multiplayer) On both the checkboxes/cells examples there's adaptive view rendering so you can zoom out a fair bit. There's also back pressure on the virtual scroll.

liotier 1y ago
> think you need any of the PRO features Pro features ? Now I see - it is open core, with a $299 license. I'll pass.
- andersmurphy 1y ago
  Good for you! I don't use anything from pro and I use datastar at work. I do believe in making open source maintainable though so bought the license. The pro stuff is mostly a collection of foot guns you shouldn't use and are a support burden for the core team. In some niche corporate context they are useful. You can also implement your own plugins with the same functionality if you want it's just going to cost you time in instead of money. I find devs complaining about paying for things never gets old. A one off life time license? How scandalous! Sustainable open source? Disgusting. Oh a proprietary AI model that is built on others work without their consent and steals my data? Only 100$ a month? Take my money!
- deleted 1y ago
  [deleted]
- rvitorper 1y ago
  It is 299$ lifetime. It is extremely cheap
wild_egg 1y ago
If I understand the code for these correctly though, you're not actually doing the "idiomatic" datastar things as the article describes? No diffing/patching individual elements, just rerender the entire page? Tbh that mental model seems so much simpler than any or all of the other datastar examples I see with convoluted client state tracking from the server. Would you build complex apps this way as well? I'd assume this simple approach only works because the UI being rendered is also relatively simple. Is there any content I can read around doing this "immediate mode" approach when the user is navigating across very different pages with possibly complicated widget states needing to be tracked to rerender correctly?
- andersmurphy 1y ago
  I mean Datastar is pretty flexible. I'd say CQRS is pretty idiomatic if you want to do multiplayer/realtime stuff. As you mentioned, once you've se that up, the mental model is much simpler. That being said the initial set up is more involved than req/response Datastar. Yes we are building complex accounting software at work with Datastar and use the same model. "Real UI" is often more complex, but a lot less heavy less divs, less data, fewer concurrent users, etc compared to these demos. Checkboxes are a lot more div dense than a list of rows for example.
dandersch 1y ago
> On both the checkboxes/cells examples there's adaptive view rendering so you can zoom out a fair bit. how do you zoom out? Also, even with your examples, wouldn't data-replace-url be a nice-to-have to auto update the url with current coordinates, e.g. ?x=123&y=456
- andersmurphy 1y ago
  Currently zoom the page web cmd+/-. At some point I'll add buttons and to proper quantised views.
zestyping 1y ago
Can you explain how these work? Does the server send small subrectangles of the large grid when the user scrolls to new regions of the grid? Does the browser actually have a two-dimensional array in memory with a billion items, or is there some other data structure?
- andersmurphy 1y ago
  Yeah the server only sends what the user is currently looking + plus a buffer around their view. There's no actual checkbox state on the client. When the user clicks a checkbox a depress animation is started and a request is made (which the server responds to with no data and a 204). The user then gets the html for the next view down a long lived SSE connection that started when they first loaded the page. Because, there's a long lived connection, it has really good compression. Same thing happens when the user scrolls. If they scroll far enough a new view is rendered. The billion items themselves are just in a server on the backend, stored in a sqlite database.

liotier 1y ago

> think you need any of the PRO features Pro features ? Now I see - it is open core, with a $299 license. I'll pass.

andersmurphy 1y ago
Good for you! I don't use anything from pro and I use datastar at work. I do believe in making open source maintainable though so bought the license. The pro stuff is mostly a collection of foot guns you shouldn't use and are a support burden for the core team. In some niche corporate context they are useful. You can also implement your own plugins with the same functionality if you want it's just going to cost you time in instead of money. I find devs complaining about paying for things never gets old. A one off life time license? How scandalous! Sustainable open source? Disgusting. Oh a proprietary AI model that is built on others work without their consent and steals my data? Only 100$ a month? Take my money!
deleted 1y ago
[deleted]
rvitorper 1y ago
It is 299$ lifetime. It is extremely cheap

wild_egg 1y ago

If I understand the code for these correctly though, you're not actually doing the "idiomatic" datastar things as the article describes? No diffing/patching individual elements, just rerender the entire page? Tbh that mental model seems so much simpler than any or all of the other datastar examples I see with convoluted client state tracking from the server. Would you build complex apps this way as well? I'd assume this simple approach only works because the UI being rendered is also relatively simple. Is there any content I can read around doing this "immediate mode" approach when the user is navigating across very different pages with possibly complicated widget states needing to be tracked to rerender correctly?

andersmurphy 1y ago
I mean Datastar is pretty flexible. I'd say CQRS is pretty idiomatic if you want to do multiplayer/realtime stuff. As you mentioned, once you've se that up, the mental model is much simpler. That being said the initial set up is more involved than req/response Datastar. Yes we are building complex accounting software at work with Datastar and use the same model. "Real UI" is often more complex, but a lot less heavy less divs, less data, fewer concurrent users, etc compared to these demos. Checkboxes are a lot more div dense than a list of rows for example.

dandersch 1y ago

> On both the checkboxes/cells examples there's adaptive view rendering so you can zoom out a fair bit. how do you zoom out? Also, even with your examples, wouldn't data-replace-url be a nice-to-have to auto update the url with current coordinates, e.g. ?x=123&y=456

andersmurphy 1y ago
Currently zoom the page web cmd+/-. At some point I'll add buttons and to proper quantised views.

zestyping 1y ago

Can you explain how these work? Does the server send small subrectangles of the large grid when the user scrolls to new regions of the grid? Does the browser actually have a two-dimensional array in memory with a billion items, or is there some other data structure?

andersmurphy 1y ago
Yeah the server only sends what the user is currently looking + plus a buffer around their view. There's no actual checkbox state on the client. When the user clicks a checkbox a depress animation is started and a request is made (which the server responds to with no data and a 204). The user then gets the html for the next view down a long lived SSE connection that started when they first loaded the page. Because, there's a long lived connection, it has really good compression. Same thing happens when the user scrolls. If they scroll far enough a new view is rendered. The billion items themselves are just in a server on the backend, stored in a sqlite database.