Let U(I) be optimistic

@vilvaathibanpb

- Vilva Athiban P B

About me

JavaScript / GraphQL  earns my bread

Hobbies: Travel and painting

code@ProductRide (productride.com)

A Youtube series "Known Unknowns" - Vilva Athiban (Channel name)

@vilvaathibanpb

About Product Ride

(productride.com)

• Quality products at affordable price

• MVP Program

• Workshops

• Hire from the pool of skilled devs

Lets Begin

Optimistic UI

• Optimistic UI is a front-end development paradigm wherein, the client updates the UI optimistically assuming the request is successful.

• It switches to the final state while the real operation is still in progress

• Predictive and not a Lie

• It knows how the UI work and is efficient enough not to lose time

Optimistic UI - Advantages

• Makes your app feel faster

• Seamless operation on slow devices

• Doesn't break user's FLOW

• Streamlines the experience by removing unnecessary states and distractions

Optimistic UI - Key Metrics

• 1 second can also be "forever" sometimes

• Response to control activation - 100 to 200 ms

• API success rate > 97%

• Response time < 2 seconds to avoid breaking user's Flow

Different types of Optimistic UI with Real-world examples

• Subtle UI - Twitter Likes

• Subtle UI With Progress - Fb Messenger

• With Progress and Actions - Tinder

• Subtle UI with Error - Google Docs

Subtle UI - Twitter

Subtle UI with Progress

Facebook Messenger

Request in Progress

Request Successful

UI with Progress & Actions

Tinder

Handling Errors

• Salience - The notification should be visible, user should not miss it

• Causality - The user should be able to understand which action caused this error. We already updated the UI, the action is “finished” in the mind of the user.

Optimistic UI

+

GraphQL

= 

Normal Process

UI

GraphQL

Server

Mutation Request

Mutation Response

Refetch Query

Query Response

& UI updates

Using Update

UI

GraphQL

Server

Mutation Request

Mutation Response

update callback

UI update

Optimistic UI

UI

GraphQL

Server

Mutation Request

Mutation Response

UI update

On Error reverts UI update

Code & Demo

Thank you

QA Time: 

@vilvaathibanpb

Please drop in some suggestions and feedback, so I can get better next time 

contact@productride.com