You are viewing archived messages.
Go here to search the history.

Eli Mellen 2023-12-12 12:43:18

A very stupid slide from a presentation I’m giving at work on Friday 🖼

Eli Mellen 2023-12-12 12:44:32

Will anyone but me find this funny? No. No one will.

FRP, not that one

Eli Mellen 2023-12-15 19:35:05

Can confirm, no one got my FRP joke.

Nilesh Trivedi 2023-12-15 13:03:10

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? 🤔

Leonard Pauli 2023-12-15 13:05:19

📝 SQLSync

SQLSync is a collaborative offline-first wrapper around SQLite. It is designed to synchronize web application state between users, devices, and the edge.

Cole Lawrence 2023-12-15 13:15:04

I can’t vouch directly for this tool, but it sounds a bit like electric-sql.com

📝 ElectricSQL - Sync for modern apps

Build reactive, realtime, local-first apps directly on Postgres.

Nilesh Trivedi 2023-12-15 13:19:22

Amazing resources! Thanks @Leonard Pauli Cole Lawrence

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.

Leonard Pauli 2023-12-15 13:21:40

YES! Working on the same!

Cole Lawrence 2023-12-15 13:35:51

You might like to read about how Kinopio solved this by simply separating the events relevant to “realtime” from the events relevant to “persistence”

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 .

📝 How Kinopio is Made

You’ve probably heard, or lived, a story that goes like this…

Nilesh Trivedi 2023-12-15 13:54:30

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: 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.

📝 CSS Basics | Intro to CSS | Intro to HTML/CSS: Making webpages | Computer programming - JavaScript and the web | Computing | Khan Academy

Learn for free about math, art, computer programming, economics, physics, chemistry, biology, medicine, finance, history, and more. Khan Academy is a nonprofit with the mission of providing a free, world-class education for anyone, anywhere.

Chris Krycho 2023-12-15 16:32:34

You could build that fairly straightforwardly with Redux, and MobX might also be able to do that.

Chris Krycho 2023-12-15 16:32:57

The folks at Replay have also productized something shaped like that for debugging.

📝 Replay - The time-travel debugger from the future.

Record and replay your application with DevTools.

Chris Krycho 2023-12-15 16:34:00

(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!)