Ask HN: How would you implement an Undo functionality on front end and back end?

[nadima]

I'm building a spreadsheets-based accounting web app and would like to offer an Undo functionality to my users. What are different ways to implement this? One way I'm considering is simply delaying write requests for a few seconds or until the user navigates away from the screen, sort of similar to the Undo feature in Gmail. The user will have a few seconds to undo the change, the app would then cancel the queued request. The drawback of this approach is that if the request is part of a flow that requires data to be committed to the database, the user will not be able to proceed to the next step until that delay is expired. E.g. imagine the user changing the currency of an invoice, which would require the server to fetch the latest fx data to update the invoice amount.

Curious what are other design alternatives out there? Any that actually write data to the database and somehow allow an undo on the data?

[throwaway888abc]

Some pointers

https://redux.js.org/recipes/implementing-undo-history

https://github.com/anthonygore/vuex-undo-redo

https://medium.com/better-programming/utilizing-the-command-...

[nadima]

Thanks for these resources. It looks like all of them are for frontend-only cases though?

[bradwood]

On the server-side you probably want some kind of transaction log or event sourcing / CQRS architecture...

The idea being that you don't write directly to a persistence layer (database) but rather that you trigger events onto some kind of queue. These events then persist in the queue for a time and then can be asynchronously acted upon. This allows for a number of interesting patterns, including undo, replay, etc.