6. Interactive offline/Optimistic UI

What is an Optimistic UI?

The basic premise of Optimistic UI is that the UI will make changes on the assumption that remote operations were a success. Typically UI changes are only reflected AFTER a change has been accepted externally. e.g.

Normal UI:

User clicks CTA -> AJAX request to server -> UI updated Optimistic UI:

User clicks CTA -> UI updated -> AJAX request to server

What this means is that your application can become interactive/functional even if it is online.

For example an e-commerce site could let users add items to their basket, then navigate to their basket, all while the user was offline. Then on network connection it can sync these changes with the server. If there is any issues it could delivery a message to the user explaining (just one way to handle it).

Introducing redux-offline:

Redux-offline is a library which can help with this (only applies to applications using redux unfortunately). With it we can be explicit about what to do if the user loses network.

It is setup by adding an offline property for every action. It includes what to fire if network is lost and also what to fire if they reconnect again.

This means we can remove the networks dependency and focus on the experience. Covering all types of UX and giving us the option of a more optimistic ui update with network-resilience.

From what I can tell it works by storing the actions offline metadata in an internal array (a queue) which is processed on re-connection. All required action-based details are available in the offline property.