https://futureofcoding.org/ logo
#present-company
Title
# present-company
n

Nilesh Trivedi

12/15/2023, 1:03 PM
Today, is there a way to build state-driven UI components (like React/Vue/Svelte) where some of the state, but not all, can be persisted periodically in the backend perhaps as an event log which would enable things like playback of past interactions? How would you go about creating something like this with usual tools like Javascript, REST and Postgresql? 🤔
l

Leonard Pauli

12/15/2023, 1:05 PM
• see http://sqlsync.dev
c

Cole

12/15/2023, 1:15 PM
I can’t vouch directly for this tool, but it sounds a bit like https://electric-sql.com/
n

Nilesh Trivedi

12/15/2023, 1:19 PM
Amazing resources! Thanks @Leonard Pauli @Cole One reason I mentioned PARTIAL sync is for interactivity like dragging and dropping (which requires tracking cursor position in the state) which is too costly to store for long-term.
l

Leonard Pauli

12/15/2023, 1:21 PM
YES! Working on the same!
c

Cole

12/15/2023, 1:35 PM
You might like to read about how Kinopio solved this by simply separating the events relevant to “realtime” from the events relevant to “persistence” https://pketh.org/how-kinopio-is-made.html
Websockets create that magical collaboration feeling by enabling a real-time stream of messages to be sent and received by a client, e.g.
Pirijan moved cardId ABC123 to position {x: 100, y: 200}
. These messages are relayed by the server to collaborators whose space state is updated. e.g. updating the position of the card.
The problem with saving data with websockets is that they’re too fast. Authenticating that many messages per second and writing them to disk would be really inefficient. E.g. If you’re moving a card from position
x: 20
to
x: 420
, Kinopio will use websockets to broadcast many updates during the move:
moving card x to 21
,
moving card x to 24
, `moving card x to 28`… potentially hundreds of messages. Or you could send a single API request after you’ve moved the card,
PATCH card.x = 420
.
n

Nilesh Trivedi

12/15/2023, 1:54 PM
My kid just showed me this example at KhanAcademy where you can play back a video but also make changes to the state at any time: https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pt/css-basics If you resume the playback, your changes get lost so the integrity of the standard history remains.
c

Chris Krycho

12/15/2023, 4:32 PM
You could build that fairly straightforwardly with Redux, and MobX might also be able to do that.
The folks at Replay have also productized something shaped like that for debugging.
(Mark Erikson, one of the Redux maintainers for the past several years, works there. He would probably be happy to chat about some of the things they do, and they do a lot of “working in public” as well. I can put you in touch with him if you like!)