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

update todo

reload data

show updates

Delayed Feedback

Traditional UI

User Experience Issues

  • Bad perceived performance
  • Blocking interactions (Spinner)

Client

Server

update todo

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

Let's create together.

Thanks!

@GionKunz