Optimistic UI

Why you can be optimistic about most of your changes and how to increase perceived performance for your users.

by Gion Kunz

All-in on Optimism

Gion Kunz

Angular GDE since 2018
Front-end developer, web standards advocate
Specialized in spa development using Angular
Onsite ramp-ups, coaching and implementation support in projects
Author of the book "Mastering Angular Components"
Frequent speaker at conferences and meetups
Teacher for web development and UX engineering at the SAE Institute in Zurich
Tutor at O'Reilly Safari Online Training
Contributor on the Angular project, author of Chartist.js library

Founder, UI Developer, UX Enthusiast at syncrea GmbH

The Problem

The problem is described very simply, because...

...waiting just sucks!

Optimistic UI

Client

Server

update todo

reload data

show updates

Delayed Feedback

Traditional UI

User Experience Issues

Bad perceived performance
Blocking interactions (Spinner)

Client

Server

update todo

reload data

immediate feedback

refresh state

Optimistic UI

Client Persistence State

We can use RxJS BehaviourSubject to cache and publish to multiple subscribers
For optimistic updates, we can publish a temporary update, until the server responds

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class TodoService {
  todos = new BehaviorSubject<Todos[]>([]);

  constructor(private http: HttpClient) {
    this.loadTodos();
  }

  loadTodos() {
    this.http
      .get<Todos[]>('http://localhost/api/todos')
      .subscribe(todos => this.todos.next(todos));
  }
}

addTodo(title: string) {
  this.todos.next([{
    title,
    done: false,
    order: 1
  }, ...this.todos.getValue()]);
    
  this.http.post('http://localhost/api/todos', {
    title,
    done: false,
    order: 1
  })
  .subscribe((todos) => this.todos.next(todos));
}

Optimistic Update

Server Sync