Well Red
Published in

Well Red

State Machines for Everyone — Part 1 Introduction

Photo by Carlos Alberto Gómez Iñiguez on Unsplash
  • Part 1 — Introduction and how to represent specific systems as Finite State Machines through tables, state diagrams, and JavaScript / TypeScript code, along with some tools to help you visualize your own system.
  • Part 2 — Exploring the process of building a Finite State Machine abstraction, and use it in both the sample we discussed in this first article, as well as some more real to life ones.
  • Part 3 — Popular libraries and variations on Finite State Machine, and different ways to use them.

State Machines and Traffic Lights

Traffic lights are a nice example when working with state machines, as they’re something we’re all familiar with.

Traffic Lights — All States
Traffic Lights — States and Actions

The Potential of State Machines

Before we dig in further I will outline some of the benefits state machines can give to you, your team, or your codebase. You can even use state machine representations to better understand systems within a product or even a UI design.

  • Remember the finite part? Knowing the states and actions up front will force you to have a better understanding of the systems you’re creating. So clarity in terms of structure and scope are two things state machines will give you.
  • For those who are programmers, I’m sure you can envision a codebase that had far to many isDisabled, isOn, isLoading, isErrored flags littered throughout levels of nested if statements, and to pick a certain path you had to traverse the same minefield of conditionals every time. State machines help to dramatically lessen or remove this top down approach of decision making. So less nesting and complexity of decision making in your codebase.
  • State machines exposed as public properties also serve as great mechanisms for context and testing. They simplify and provide a cleaner interface for users and testing mechanisms to determine what’s going on under the hood of your API or broader system.

Modelling Our Own State Machines

There are a lot of finite state machine libraries which give you access to ready made and well tested APIs. This process is nice because they’re a great concept to break down, and building your own isn’t too complicated.

Adjacency list

To start, let’s write all the possible ways our lights will transition from one colour to another. A simple way to do this is to put them in a table which has the available states of our system in one column, and the adjacent states in the other.

Adjacency List — Traffic Lights
Adjacency List — Traffic Lights Transitions

State Transition Diagram

For simple state machines we could just skip writing out the adjacency lists, but for more complex systems you will probably end up writing out a version of it anyways, so it’s a useful practice.

Traffic Lights — State Transition Diagram

State Map Using JavaScript and TypeScript

Now that we have a state transition diagram, we will build out an object which represents it. We’ll then type that object using a TypeScript interface, and in Part 2 we’ll use the interface to help us when designing our own custom state machine abstraction.

Final Resources and Tools

I’m leaving you with two helpful links to explore before reading Part 2: A talk by the creator of XState- a finite state machine library for JavaScript and Typescript, and the visualization tool XViz which lets you take a JavaScript object very similar to the one we described above and dynamically create the state transition diagram that goes along with it.


Finite State Machines are a way of representing systems with a finite number of states, and a finite number of actions to move between those states. They help make the modelled systems clearer in terms of structure and scope, and generally help to simplify and reduce nesting when used in codebases.



Exploring the tech industry one bit at a time. Brought to you by redspace.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store