Stop wasting time fixing unpredictable applications

Finite state machines and statecharts help developers build more predictable interfaces by providing sequential, easily-modeled logic. In this course, you'll learn how to make use of state machines in your JavaScript applications.

Coming August 2018

Meet Jon Bellah

Jon Bellah is a full-stack developer, writer, and speaker from Denver Colorado. He works as a front-end engineer for TED, where he has the privilege of helping a team of amazing people share ideas worth spreading.

Jon began writing code when he was 10 years old with the help of Geocities, Microsoft FrontPage, and a little bit of HTML Goodies. Over the last 20+ years, Jon has published countless lines of code that have been seen and encountered by millions of people.

Course Outline

In this course, we will take an application called Photobook from comps to working application. The app has many of the features that you would expect to find in apps today: authentication, data fetching, CRUD actions, and more. We'll start with some basic, presentational React components and take those all the way to a working application fully powered by statecharts.

Using xstate and react-automata, we will cover all of the important features of statecharts: parallel states, hierarchical states, history states, and guards.

What we'll cover

  1. Intro to state machines & statecharts
  2. Thinking in statecharts
  3. Events & transitions
  4. Tooling & editor setup
  5. Modeling our application
  6. Authentication states
  7. Data fetching
  8. Writing/uploading data
  9. Animations with statecharts
  10. Statecharts with React Context
  11. Maintaining statecharts as your application grows
  12. Statecharts as a refactor target
  13. Testing statecharts
  14. Using statecharts with Redux


When does it launch?

Mid-August 2018!

How long do I get access?

There is no time limit and no recurring fee.

© 2018 Jon Bellah. All rights reserved.