Live data from Hacker News

How to build undo/redo in a multiplayer environment by Liveblocks

liveblocks.io

41–49 of 49 posts

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#41
post #40

I've implemented undo/redo a number of times. I agree whole-heartedly that the Command pattern is the way to do it. Undo has a reputation for being difficult, but my experience is that it's smooth sailing as long as you build it into the tool on day 1 . If the app is architected around undo, it's easy, but trying to retrofit it onto an application later is always a nightmare. This is very similar to the experience of…

Command-pattern is the secret sauce for the ultimate and optimal Undo functionality. Glad you're spreading the good word!

I'm doing my part!

https://gameprogrammingpatterns.com/command.html#undo-and-re...

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#42
post #9

I know slightly too much about the problem space to have questions about how it's implemented, but I just want to say this is one of the neatest presentations I've seen on this site. It's a great article on an interesting topic and made 100x better by the visualisations

Agreed, the visualizations are really nice.

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#43

> Depending on the use case, the state of features like user selection, user page selection, user zoom setting, etc. could be included in the undo/redo stack to provide a great experience. Does anyone have an idea what these use cases could be? My mental model for undo/redo is based on productivity applications and I’m at a loss; I’m genuinely curious though since this is something I’ve been implementing.

Google Maps is one such example. Every time you click on something, change the zoom, toggle the layers, etc., it gets saved to state (and persisted to the URL). That way you can use your browser back/forward buttons to switch between different places or views of places, and also share that with your friends.

Miro (the collaborative whiteboard)/Figjam is another... the boards can grow pretty big in x-y space, and losing your place in space is very easy to do, especially if you ctrl-z a few times and forget what you were even working on. Just knowing that "somewhere on this board, something changed" isn't helpful if you can't see what it was.

Analytics is another such use case, for when you're composing queries or search filters, date ranges, etc. Google Analytics does something similar by giving each set of criteria its own unique URL, so that you can use the back/forward in your browser to go between states. Not exactly the same as an undo/redo button, but pretty much the same idea.

Another example: I work for a solar company, and we're building a web app that equipment installers can use to monitor the performance of rooftop solar arrays they've installed. It tracks, for example, each solar module's power production on a heatmap, arranged in the same layout as on the actual roof. There's a lot of interaction that can happen... selecting a particular unit, choosing a particular timeframe, deciding which metric you want to look at, search terms, table filters, sort order, etc.

None of that needs to be written to our database as actual changes to the layout and device pairings. But it would still be handy handy for users to be able to undo/redo, bookmark, permalink, etc.

I think of it this way: A set of UI states like that, taken as a whole, is in and of itself a form of "data"... it is a human user's carefully framed view of some point in time, and some selection of data, that they have deemed important. Being able to save and retrieve that state in case they make a mistake (cat jumped on the mouse) or want to share it with others ("hey, check out what's happening to this module on X date at 4pm") is helpful, even if it doesn't ever need to be written to the server (since it can be stored as local state and/or URL strings).

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#44

I've implemented undo/redo a number of times. I agree whole-heartedly that the Command pattern is the way to do it. Undo has a reputation for being difficult, but my experience is that it's smooth sailing as long as you build it into the tool on day 1 . If the app is architected around undo, it's easy, but trying to retrofit it onto an application later is always a nightmare. This is very similar to the experience of…

This is some great nugget of knowledge, thanks for sharing. it's too bad all my programming enthusiasm is going into a 9-5

If you want more nuggets from this poster, I suggest reading his games programming book. It’s light reading (but full of great concepts and explanations) that I personally read outside my 9-5 for pleasure.

https://gameprogrammingpatterns.com/

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#46
Light mode for the site please, those of us with Astigmatism can't use it. Supabase launched the same and they eventually had to add it because of demand, not sure why dark mode is so heavily default nowadays. https://jessicaotis.com/academia/never-use-white-text-on-a-b...

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#47
post #46

Light mode for the site please, those of us with Astigmatism can't use it. Supabase launched the same and they eventually had to add it because of demand, not sure why dark mode is so heavily default nowadays. https://jessicaotis.com/academia/never-use-white-text-on-a-b...

Noted. Thanks for the feedback. We do have a light theme version on the dashboard, it would be great to add it to the website too.

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#48

I've implemented undo/redo a number of times. I agree whole-heartedly that the Command pattern is the way to do it. Undo has a reputation for being difficult, but my experience is that it's smooth sailing as long as you build it into the tool on day 1 . If the app is architected around undo, it's easy, but trying to retrofit it onto an application later is always a nightmare. This is very similar to the experience of…

For https://curvefever.pro we actually decided to store the state of the world for undo purposes, this way you can go anywhere back in time in constant time, and to redo you execute the commands again. The big advantage is that you don't have to create an undo function for each command (which might be tricky in some cases, as many times it still involves storing state) and you don't have to iterate through/apply all the commands to go back at a specific time. To save memory, we actually only store the state every 5 ticks (so if you want go to back to tick 23, you go back to tick 20 and run the simulation forward for 3 ticks).

Re: How to build undo/redo in a multiplayer environment by Liveblocks

#49
post #48

I've implemented undo/redo a number of times. I agree whole-heartedly that the Command pattern is the way to do it. Undo has a reputation for being difficult, but my experience is that it's smooth sailing as long as you build it into the tool on day 1 . If the app is architected around undo, it's easy, but trying to retrofit it onto an application later is always a nightmare. This is very similar to the experience of…

For https://curvefever.pro we actually decided to store the state of the world for undo purposes, this way you can go anywhere back in time in constant time, and to redo you execute the commands again. The big advantage is that you don't have to create an undo function for each command (which might be tricky in some cases, as many times it still involves storing state) and you don't have to iterate through/apply all…

To be more clear, in case an "undo" of a player action has to happen, the state before that action is loaded, the action is removed and the world ticked forward again with all the commands (excepting the removed one).
Post reply on HN