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

GraphQL

Server

Mutation Request

Mutation Response

Refetch Query

Query Response

& UI updates

Using Update

GraphQL

Server

Mutation Request

Mutation Response

update callback

UI update

Optimistic 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

Let U(I) be optimistic

- Vilva Athiban P B

About me

About Product Ride

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

UI with Progress & Actions

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

Using Update

Optimistic UI

Code & Demo

Thank you

QA Time:

@vilvaathibanpb

contact@productride.com