David Khourshid
Microsoft
State Machines in JavaScript with XState, v2
4 hours, 8 minutes CC
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
CloseLearn 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
Table of Contents
Introduction
Section Duration: 6 minutes
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
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.
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.
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.
David live codes the solution to the state modeling exercise.
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
David demonstrates how to visualize the path of a state machine, installing XState, using the createMachine function, and the interpret function from XState. A demonstration of the first part of the state transitions exercise is also provided in this segment.
Students are instructed to recreate the playerMachine to practice adding the initial states, states in the state object, and transitions in each of those states.
David walks through the solution to the state transitions exercise. A brief demonstration of XState inspect is also provided in this segment.
Actions
Section Duration: 27 minutes
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.
Students are instructed to add in the missing states. A brief discussion of built-in actions is also provided in this segment.
David walks through the solution to the actions exercise.
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
David discusses and demonstrates what "extended state" is, assigning to context by using assign(), and reading from context using state.context.
Students are instructed to add the initial context for the title, artist, duration, time elapsed, likeStatus, and volume. Students are then instructed to change the actions to assign to context.
David walks through the solution to context exercise. A student's question regarding updating context with Immer is also covered in this segment.
Guards
Section Duration: 14 minutes
David discusses what guarded transitions are, inline guards, serialized guards, multiple guarded transitions, and eventless transitions.
Students are instructed to add guarded transitions to ensure the correct conditions are met before changing state or performing an action. A brief demonstration of eventless transitions are also provided in this segment.
David walks through the solution to the guarded transitions exercise. A student's question regarding how guards are visualized in the state chart is also covered in this segment.
Compound States
Section Duration: 15 minutes
David discusses what hierarchical states are, initial states, selection transitions, and targeting state nodes by ID.
Students are instructed to refactor the paused and playing states to be children of the ready state.
David walks through the solution to the compound states exercise. Student questions regarding the differences between tags and meta and what are some best practices for maintaining deeply nested compound states in large machines are also covered in this segment.
Parallel States
Section Duration: 14 minutes
David discusses and demonstrates what orthogonal (parallel) states are, regions, and state value of parallel states.
Students are instructed to refactor to include two parallel regions of player and volume.
David walks through the solution to the parallel states exercise.
David answers student questions regarding if it's better to use final in nested states rather than target Id, if splitting the child states into their own functions or files is recommended to help readability, and if a serializable machine could be obtained are also covered in this segment.
Final States
Section Duration: 15 minutes
David discusses and demonstrates what final states are used for, specifying final states with type: 'final', done transitions with onDone, final states in compound states, final states in parallel states, and top-level final states of machine.
Students are instructed to add a 'finished' final state to the target.
David walks through the solution to the final states exercise.
David answers students questions regarding if after is a declarative settimeout and if the state machine can be restarted via a raise event. Questions regarding if each region has its own ondone transition and if the .loading and ondone transition needed due to transitioning to a child state are also covered in this segment.
History States
Section Duration: 11 minutes
David discusses and demonstrates what history states are used for, previous states, specifying history states, shallow history, and deep history.
Students are instructed to go to the most recent child of the 'ready' state by adding a sibling history state.
David walks through the solution to the history states exercise.
David answers student's questions regarding if history states are similar to having async work coming back to a machine and if there is a way to set default data in the visualizer to avoid typing in data each time. Questions regarding if history works for parallel states and what makes an infinite or recursive machine are also answered in this segment.
Actor Model
Section Duration: 54 minutes
David discusses and demonstrates what the actor model is, how to invoke promise, callback, and machine actors.
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.
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.
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.
David walks through the solution to the actor model exercise.
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.
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
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
BDevessier
Great course! 👏 Covers all the cool parts of XState in detail: actions, context, guards, compound / parallel / history states, and actor model
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