Statecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the behavior of your application, from the individual components to the overall application logic.

xstate

Our applications have lots of states that they can be in.

We usually remember “Loading” and “Successful”. If we’re having a particularly good day, we’ll get “Error” handled as well.

But what about other states that our application can be in?

Things like “Haven’t requested yet” or “The request was successful but there isn’t any data for us to show”.

It’s frustrating to think you’re “done” and then an edge case shows up (and this cycle repeats at least one more time).

Fed up with forgetting to handle the edge cases that appear when developing UIs, Isaac Mann started looking for a solution.

The answer? State machines.

In this course, Isaac will teach you how to plan and visualize your application’s states and the transitions between them through the creation of a React & XState powered Star Wars quiz app.

Maxime Bourgeois

Taylor Bell: Hey, Isaac. Thanks for joining me today.Isaac Mann: Glad to be here.Taylor Bell: Cool. So I wanted to ask you a couple of questions about your new course on building sturdy UIs with XState. What is XState?Isaac Mann: Well, XState is a library that you can use to make state machines and use them inside of your applications. It can be used with React, or Angular or any modern framework or even just plain JavaScript.Taylor Bell: Cool. And so what is a state machine?Isaac Mann: Yeah, okay, so that's the longer question. So the state machines are ways of managing state that goes from one specific state to another. So you can think of the states of your application as these series of circles that represent the states that are in your application and then you draw arrows between them to describe the transitions, which are the ways you move from one state to another. And the state machine is all of those circles and arrows together that describe how your state changes over time inside your application.Taylor Bell: Cool. So how did you first find out about state machines?Isaac Mann: Well, I watched a video by David Khourshid and he was just showing how to use XState in your applications and it seemed really exciting. I actually first heard about the idea of state machines in university and it was a very academic concept and I never used it in real code until I heard about XState that David wrote. And it was just really exciting to me to see that, oh, this academic concept that has some rigorous logic behind it is actually applicable and can be really useful. So that was what got me first excited about it.Taylor Bell: Cool. And so how are they useful? So what will somebody take away from your course?Isaac Mann: So the most useful thing about state machines is that ... Well there are three things that I really like about states machines. It's an old concept so it's been tested and it's rigorous. It helps you to see things visually and so you can have a visualization of how your state changes over time and it's a well structured so that you can be intentional about how your state changes. So if you set up your states in your visual diagram and you explicitly create the transitions between them, if you don't draw transition there, it's not possible for it to happen. So you can't accidentally have a transition because events get fired out of sync or you didn't plan for something. It just won't let it happen.Taylor Bell: What's the material in your course? What is the trajectory that your course will take the learner on?Isaac Mann: Right. So in the Constructing Sturdy UIs With XState course, we start building an application that builds out over the course of the whole series. You make an application that is a quiz application where you kind of match a Star Wars character with their home world, and we start by making several different state machines that help you manage the UI of that application in a way that's well structured and not prone to errors. So we start with a network state machine and then we do a selection machine where it controls whether you've selected an item or not. We do a matching machine that controls whether you've actually matched a person and their home world. And, yeah, so it's just all about how those state machines can be used with actual components and actually interacting with each other in a real application.Taylor Bell: Cool. And so after somebody works through your course, what should their next steps be? How can they apply this to their real life?Isaac Mann: Right. So you probably are already using state machines in your application code, you probably just don't know that they're there. You maybe have an enum that is simulating states and you're not defining the transitions between them rigorously. And so the best application step after watching this course is to find those places in your code that really are actually state machines already, but not very well defined and making them into explicit state machines that don't have accidental transitions between your states.Taylor Bell: Cool. So thanks so much for meeting with me today to tell me a little bit more about your new course and I'm excited to check it out.Isaac Mann: Great. Yeah, it was good talking with you.Taylor Bell: All right, thanks.

State machines give you the power to make sturdy UIs for three main reasons:

1. They encourage planning, so you know ahead of time what states your component should handle.
2. They've been used and refined for decades, so the technology has very few unexpected edge cases.
3. They can be rendered visually, so you can understand at a glance what is happening.

In Construct Sturdy UIs with XState, we'll create an app that allows users to match a Star Wars character with their home world.  We'll use XState to ensure that the UI is predictable and resilient.

react

Introducing Construct Sturdy UIs with XState

building-ui-s-with-xstate-resources-cheatsheet

Cheat sheets

Sketch Notes

Finite state machines force you to do some up front thinking and be explicit about the states and transitions that are valid for your program.  We’ll use the XState visualizer tool to create a state machine to manage an http request.

Handle http request state with XState

It can be tedious to create a paired success and failure event for each external action that a state machine triggers.  Instead xstate can integrate directly with a promise and respond to the resolve or reject status of the promise itself.

Invoke an XState Service when Entering a State

If a network call returns an empty list, that should be rendered differently than a list with elements in it.  We’ll create two substates of the http success state (withData and withoutData) and choose which substate to transition to based on the http response using an automatic transition and a guard.

Block a State Transition with a Guard

To match an element from one list with an element in a second list, it doesn’t matter which list is selected first, but the question isn’t answered until both elements have been selected.  We’ll model this concept by keeping the selection status of each list in parallel states of a state machine.

Control Transitions Order with Parallel States

All of this code lives in one component so far, but our apps have multiple components.  We'll split the app into list components and a question component with each component having its own state machine.  Each component will update its own state machine when it receives an event from a different component.

Communicate between State Machines in Different Components

In order to make sure the user actually picked the answer they wanted, we’ll add a confirmation state to the state machine that gives them the option to submit their answer or go back and change it.  When they go back, we need the state machine to remember all the substates that were active in the previous state.  We’ll accomplish this using a history state.

Save Previous States with a History State

Activities are useful for anything that needs to be executed at the beginning and end of a state.  Like an animation that needs to stop or an observable that needs to be unsubscribed.  We'll add a completely spurious `Dark Side` mode for the quiz that makes all the ui elements float around the screen so that users have a more difficult time taking the quiz.  Leaving `Dark Side` mode should return all elements to their original locations.

Construct Sturdy UIs with XState

Isaac Mann

What you'll learn:

Prerequisites:

Credits

Course Content

You might also like these resources:

Introduction to Cloudflare Workers

Create an eCommerce Store with Next.js and Stripe Checkout

Practical Git for Everyday Professional Use