Today, is there a way to build state-driven UI com...
# present-company
n
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
• see http://sqlsync.dev
c
I can’t vouch directly for this tool, but it sounds a bit like https://electric-sql.com/
n
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
YES! Working on the same!
c
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
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
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!)