Complex Optimistic Updates: How to Handle More Than Just Binary-like Elements

Question

I want to build an optimistic ui, in which I can perform all CRUD operations. For example a todo app in which a user can add, update and delete todo items.

However I cannot find any resource that discusses more than just adding items. For example:

• https://redux-toolkit.js.org/rtk-query/usage/optimistic-updates
• https://www.apollographql.com/docs/react/v2/performance/optimistic-ui/

Other articles even suggest not to use optimistic updates if the server response has more than two states (e.g. success, failure).

Can someone point me to any documentation, tutorials or papers that deal with some of the following things? Or a website which has implemented this successfully?

Some problems I have when queueing requests:

1. Rollback

• User adds todo 1
• POST request 1 is send
• User makes lots of changes
• The following http requests are queued and wait for the 1st to finish
• Request 1 fails
• We roll back to original state

User lost all his changes

2. Wasted Bandwidth

• User adds todo 1
• POST request 1 is send
• User adds todo 2
• POST request 2 is queued
• User deletes todo 2
• DELETE request 3 is queued
• POST request 1 completes
• POST request 2 is made
• DELETE request 3 is made

We did not have to send request 2 and 3

Instead of queuing the requests, I could also debounce the requests and send a transaction log or just the current state to the backend. Then the backend could figure out the minimum of required database updates.

Maybe there already are some of these diffing algorithms?

Answer 1

Maybe I can take some hints from collaborative editing like Google Docs:

• https://en.wikipedia.org/wiki/Operational_transformation

• https://davidwalsh.name/collaborative-editing-javascript-intro-operational-transformation

Incredible visualisation:

• https://operational-transformation.github.io/