State Machines and Statecharts in JavaScript

07/15/20191 Min Read — In JavaScript

A few days ago, I heard of using state machines in JavaScript. I've been listening to React Roundup podcast episode 069 The State Machines in React with David Khourshid.

David wrote a JavaScript library called XState.

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.

State machines are a way to handle state management in your front-end application. That doesn't sound exciting.

I'm still not sure what state machines can do. But it looks like we can describe different states of the UI and programmatically derive actions from it. You can make sure that you find edge cases because there can't be impossible states. You can easily plan and visualize your possible states before coding.

Here are two videos if you want to know more:

David Khourshid: Simplifying Complex UIs with Finite Automata & Statecharts:
Video David Khourshid: Simplifying Complex UIs with Finite Automata & Statecharts | JSConf Iceland 2018

Let’s learn state machines with David K. Piano! — Learn With Jason:
Video Let’s learn state machines with David K. Piano! — Learn With Jason

Further Reading: