State Machines in JavaScript with XState, v2

4 hours, 8 minutes CC
State Machines in JavaScript with XState, v2

Course Description

If you build large JavaScript apps and want to stop running into weird edge cases, you'll want to learn state machines! Learn to model your app with clear and robust app logic with state machines and statecharts. You'll build state machines without any libraries in pure JavaScript, then use XState to take advantage of a wide variety of other features.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: December 21, 2021

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 6 minutes
  • Introduction
    David Khourshid introduces the course by providing a brief overview of the course material and walks through the course repository. A demonstration of the final state of the project is also provided in this segment.

Software Modeling

Section Duration: 48 minutes
  • Software Modeling
    David discusses what software modeling is, event-driven architecture, how to specify behavior in an application with given, when, and then. Event-first compared to state-first, state machines, and statecharts are also discussed in the segment.
  • State Machine in Vanilla JavaScript
    David walks through creating a finite state machine to handle state switches and correctly handle state with multiple event triggers. How to use an object as a lookup table instead of injecting into a library is also covered in this segment.
  • State Modeling Exercise
    Students are instructed to create a state machine transition function for the loading play and pause function of the media player using a switch statement or an object. Then determine a simple way to interpret it and make it an object that accepts .send events.
  • State Modeling Solution
    David live codes the solution to the state modeling exercise.
  • State Machines Q&A
    David answers students' questions regarding if creating state machines is the JavaScript implementation of the state pattern and if XState is compatible with state machines written in SCXML. Questions regarding if there is a reason to name states in all capitals, how to determine what states should be named, and if a state can receive multiple events at the same time are also covered in this segment.

XState

Section Duration: 17 minutes

Actions

Section Duration: 27 minutes
  • Actions
    David discusses what an action is, demonstrates entry compared to exit actions, inline compared to serialized, multiple actions, and built-in actions. A visual demonstration of how actions are expressed on a state machine path is also covered in this segment.
  • Actions Exercise
    Students are instructed to add in the missing states. A brief discussion of built-in actions is also provided in this segment.
  • Actions Solution
    David walks through the solution to the actions exercise.
  • Actions Q&A
    David answers student's questions regarding if raise can be used to send a child state to a parent state, when side effects should change, if actions are executed in sequence, and will raise SKIP only execute when the loading sequence is done. Why there are multiple ways to do the same thing even if there is a preferred way and how raise compares to send are also covered in this segment.

Context

Section Duration: 12 minutes

Guards

Section Duration: 14 minutes

Compound States

Section Duration: 15 minutes

Parallel States

Section Duration: 14 minutes

Final States

Section Duration: 15 minutes

History States

Section Duration: 11 minutes

Actor Model

Section Duration: 54 minutes
  • Actor Model Overview
    David discusses and demonstrates what the actor model is, how to invoke promise, callback, and machine actors.
  • Actor Model in Vanilla JavaScript
    David walks through creating an actor that accepts an event, changes, and holds its own internal state using vanilla JavaScript and how to subscribe to that actor's internal state. The internal state of an Actor can include other actors that it decides to create.
  • Ways to Invoke an Actor
    David demonstrates implementing an actor into a state machine and how to invoke an actor for a promise, callback, and machine. A brief demonstration of forward(), creating a sequence diagram, and a brief discussion of spawning compared to invoking are also provided in this segment.
  • Actor Model Exercise
    Students are instructed to Instead of an external LOADED event, invoke a promise that returns the song, add an `onDone` transition to assign the song data, and transition to 'ready.hist'. Then invoke the audio callback (use `src: invokeAudio`) so that it can receive events that this machine sends it.
  • Actor Model Solution
    David walks through the solution to the actor model exercise.
  • Actor Model Q&A
    David answers student's questions regarding what the difference between a service and an actor is and what the difference between spawn and invoke is. Questions regarding if it's possible to send an event from outside the machine if the actor's ID is known and if it's possible to have two separate machines interacting with each other as actors are also covered in this segment.
  • Testing
    David discusses strategies for testing state machines and using state machines for model based testing. An article regarding model based testing in react with state machines is also discussed in this segment.

Wrapping Up

Section Duration: 9 minutes
  • Wrapping Up
    David wraps up the course by providing a source for state machines for inspiration and answering a students question regarding the pros and cons of given, when, then syntax compared to model based testing that's all in one. Recommendations for model based testing with state machines that use actors, if context can be serializable or if anything can be stored in context, and an overview of material covered in this course is also provided in this segment.
There is an excellent XState course on Frontend Masters
Baptiste Devessier

Baptiste Devessier

BDevessier

Great course! 👏 Covers all the cool parts of XState in detail: actions, context, guards, compound / parallel / history states, and actor model
Ahmed Rizwan

Ahmed Rizwan

sudo_rizwan

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now