Modeling UI with Statecharts

Presentation originally given on 09/24/2020.

This presentation was transcribed into a blog post!

Overview

In this presentation, I explore one of the most pervasive types of bugs in modern applications, impossible state bugs, and how statecharts can help us model our UI in a way that prevents impossible states altogether. I introduce what statecharts are and how to think in terms of them, then I walk through rewriting a complicated user flow using XState, a library for state machines in JavaScript.

Resources

• statecharts.github.io
• XState
• Redux is half of a pattern
• Vaguely reassuring state machines

Viewing the Presentation

This presentation is built with mdx-deck, a library for building slideshows with MDX (Markdown with JSX/React).

You can download a static version of the slides as a PDF here.

To run and interact with the slides yourself, first clone the repo and install the project dependencies with yarn:

$ git clone https://github.com/courier-new/statecharts-presentation.git
$ cd statecharts-presentation
$ yarn

Then run the slideshow:

$ yarn start

All of the slides are served from deck.mdx. To re-export an updated PDF, see the mdx-deck docs.