Frontendmasters - State Machines in JavaScript with XState

Table of Contents
Introduction
Introduction
00:00:00 - 00:03:50
Introduction
David Khourshid gives an overview of the course structure, mentions the main topics the course covers, and shares the course repository with the students.
The Problem with Adding Features
00:03:51 - 00:10:03
The Problem with Adding Features
David explores the practice of writing bottom-up code, which leads to jumping straight into the code instead of properly modeling an application. Bottom-up code is difficult to test and the introduction of bugs is more common.
The Case for Statecharts
00:10:04 - 00:13:32
The Case for Statecharts
David explains that the solutions to problems introduced by writing bottom-up code are the use of state machines and statecharts because they allow the developer to follow the application's logic, and visualize the states and the various transitions between the states.
Finite State Machines
00:13:33 - 00:20:56
Finite State Machines
David explains that each application data flow can be represented by a directed graph, describes the different types of nodes in a directed graph, and demonstrates that finite state machines are directed graphs. Finite states, events, and transitions are also discussed in this section.
Vanilla JS State Machine
Create a State Machine
00:20:57 - 00:31:26
Create a State Machine
David recommends using objects when creating a state machine and switching states, live codes a transition object, and explains how to use an event to transition from a current state to the next state.
Create a State Machine Exercise
00:31:27 - 00:33:55
Create a State Machine Exercise
Students are instructed to create a state machine first using a switch statement, then using objects, and toggle between the inactive and active state in both implementations.
Create a State Machine Solution
00:33:56 - 00:38:35
Create a State Machine Solution
David live codes the solution to the create a state machine exercise.
XState
Modeling States
00:38:36 - 00:43:01
Modeling States
David explains that, in order to model states, the steps are to choose the states to add to the model, determine which external events will influence the state, determine how to interpret various state machines, and understand what the life cycle of an interpreter is.
Getting Started with XState
00:43:02 - 00:46:30
Getting Started with XState
David explains that XState simplifies a lot of the work needed to model states, demonstrates how to install XState, and demonstrates how to use and import XState.
Transitions, State & Event Objects
00:46:31 - 00:50:41
Transitions, State & Event Objects
David demonstrates what steps to follow to transition from one state to another, and defines and live codes an event.
Interpreting Machines & Creating a Service
00:50:42 - 00:55:56
Interpreting Machines & Creating a Service
David refactors the code created in the previous sections, builds a service, and explains that a service is a run instance of a state machine. If a state machine is a blueprint, a service is one instance of the blueprint.
Visualizing State Machines
00:55:57 - 00:58:19
Visualizing State Machines
David explains that one of the advantages of XState is to be able to visualize the machine, and explores the service machine through the XState visualizer.
Refactoring with XState Exercise
00:58:20 - 00:59:21
Refactoring with XState Exercise
Students are instructed to refactor the code from the state machine execise in section 2 using XState.
Refactoring with XState Solution
00:59:22 - 01:00:17
Refactoring with XState Solution
David live codes the solution to the refactoring with XState exercise.
Interpreter Exercise
01:00:18 - 01:01:28
Interpreter Exercise
Students are instructed to create an interpreter, to create a service using interpret, and to set the data attribute to either active or inactive. Interpret creates a new interpreter instance for the given machine.
Interpreter Solution
01:01:29 - 01:07:09
Interpreter Solution
David live codes the solution to the interpreter exercise.
XState Actions
Actions in XState
01:07:10 - 01:15:10
Actions in XState
David explains that an action in a state machine is a side effect, adds that there are three types of actions, demonstrates which action is triggered each time there is a change of state, and uses the XState visualizer to generate an image of how actions are executed.
XState Actions Exercise
01:15:11 - 01:17:17
XState Actions Exercise
Students are instructed to build an action with XState that sets the data-point attribute of the element with the box ID to wherever it was clicked on the mousedown event. The goal of the exercise is to determine at what point the mouse is clicked.
XState Actions Solution
01:17:18 - 01:23:32
XState Actions Solution
David live codes the solution to the XState actions exercise.
Statecharts & Assignment Actions
01:23:33 - 01:33:41
Statecharts & Assignment Actions
David gives a brief history of statecharts, explains that statecharts are diagrams with depth but still close enough to state machines that they can be transformed into each other, and explains the difference between an extended state and a finite state.
Assignment Action Exercise
01:33:42 - 01:40:24
Assignment Action Exercise
Students are instructed to use context to update the extended state of the drag/drop state machine.
Assignment Action Solution
01:40:25 - 01:53:25
Assignment Action Solution
David live codes the solution to the assignment action exercise.
Transitions
Guarded Transitions
01:53:26 - 01:57:46
Guarded Transitions
David explains that guarded transitions are transitions that have a conditional guard called cond that determines if a transition is allowed. If the guard returns a falsey response, no actions are executed and no transactions are taken.
Guarded Transitions Exercise
01:57:47 - 01:58:50
Guarded Transitions Exercise
Students are instructed to use a guarded transition to prevent the box element from being dragged more than 5 times which gives more control over possible inputs. This exercise introduces students to building transitions.
Guarded Transitions Solution
01:58:51 - 02:05:29
Guarded Transitions Solution
David live codes the solution to the guarded transitions exercise.
Transient Transitions
02:05:30 - 02:08:24
Transient Transitions
David explains that transient transitions are different than regular transitions because they happen on null events. They are transitions that are automatically taken when entering a state.
Transient Transitions Exercise
02:08:25 - 02:09:15
Transient Transitions Exercise
Students are instructed to only allow authorized users to be able to drag the box element by using transient transitions.
Transient Transitions Solution
02:09:16 - 02:15:03
Transient Transitions Solution
David live codes the solution to the transient transitions exercise.
Delayed Transition Exercise
02:15:04 - 02:21:41
Delayed Transition Exercise
Students are instructed to build functionality ensuring that the box element cannot be dragged for more than two seconds, after David explains that transitions happen in zero time, are never asynchronous, and that delayed transitions have a delay action.
Delayed Transition Solution
02:21:42 - 02:23:45
Delayed Transition Solution
David live codes the solution to the delayed transition exercise, and demonstrates how to build an add-on for a usecase.
Hierarchical, History & Parallel States
Nested or Hierarchical States
02:23:46 - 02:28:59
Nested or Hierarchical States
David explains that states that have common behaviors can be nested together within a visible state. Hierarchical states are equivalent to nested states.
Nested States Exercise
02:29:00 - 02:30:35
Nested States Exercise
Students are instructed to write code that will allow the box element to only move on the X-axis when the shift key is pressed.
Nested States Solution
02:30:36 - 02:36:23
Nested States Solution
David live codes the solution to the nested states exercise.
History States
02:36:24 - 02:38:10
History States
David explains that a history state allows going back to the last visited child of a parent state. History states are mostly useful when working with hierarchical and parallel states.
History States Exercise
02:38:11 - 02:40:27
History States Exercise
Students are instructed to create a state machine that shows and hides a display, and to use a history state to be able to visit the most recent mode or child state of the visible parent state.
History States Solution
02:40:28 - 02:44:25
History States Solution
David live codes the solution to the history states exercise.
Parallel States
02:44:26 - 02:46:59
Parallel States
David explains that parallel states can seem paradoxical to state machines because they allow being in two different states at the same time. However, the correct way of thinking about parallel states is to imagine a combination of states. Another word for parallel states is orthogonal states.
Parallel States Exercise
02:47:00 - 02:49:59
Parallel States Exercise
Students are instructed to build orthogonal states where light and dark mode happen at the same time as bright and dim mode.
Parallel States Solution
02:50:00 - 02:55:14
Parallel States Solution
David live codes the solution to the parallel states exercise and answers to questions from the audience about how to combine both parallel and history states.
XState Extensions
The Actor Model
02:55:15 - 02:58:09
The Actor Model
David explains that the actor model is an entity that can send a message to another actor, can create new actors, or can change its behavior as a response to a message. An actor is embodied by using invoke, and can invoke a promise, a callback, an observable, or a machine.
Actor Model Exercise
02:58:10 - 02:58:43
Actor Model Exercise
Students are instructed to use the invoke property to invoke a promise that eventually resolves or rejects with a value, and to then transition to the appropriate states.
Actor Model Solution
02:58:44 - 03:07:09
Actor Model Solution
David live codes the solution to the actor model exercise, and answers questions from the audience about queuing messages.
Invoking Services
03:07:10 - 03:13:07
Invoking Services
David demonstrates how to invoke observables and callbacks by refactoring the code from the actor model exercise.
Using XState with React
03:13:08 - 03:18:31
Using XState with React
David demonstrates how to refactor React code using XState by using specific hooks and reducers provided by React and linking XState to the framework.
Using XState with RxJS
03:18:32 - 03:21:02
Using XState with RxJS
David explains that RxJS and XState work well together by using an interpreted machine or service one can subscribe to that interprets XState into RxJS.
XState React Hooks & Vue Hooks
03:21:03 - 03:22:35
XState React Hooks & Vue Hooks
David explains that, similar to React, Vue has specific hooks that allow the use of XState with the framework. Vue provides the useMachine hook, which needs to be added to an object named setup that returns the two reactive values state and send.
XState FSM, Testing XState & immer
03:22:36 - 03:27:56
XState FSM, Testing XState & immer
David explains that XState with finite state machine Finite State Machine or FSM has no hierarchy, which allows the package to be small, introduces testing with XState, and recommends the use of the immer library. The immer library allows developers to update a state by mutating a proxy of the state.
Spawning vs Invoking Actors
03:27:57 - 03:31:27
Spawning vs Invoking Actors
David explains that spawning is creating a finite number of new actors that are available for an infinite amount of time until the machine is stopped, and invoking requires a single actor or a small amount of actors and is linked to a specific state and therefore has a specific life cycle.
Redux vs XState
03:31:28 - 03:33:55
Redux vs XState
David explains that Redux embraces the idea that there is one atomic global state, states that using the actor model is best practice because it separates children and parent states more effectively. The actor model has a higher learning curve.
React and XState Q&A
03:33:56 - 03:35:14
React and XState Q&A
David answers questions from the audience about using a service with React and XState, and about statecharts and its modeling of complexity.
Wrapping Up
Wrapping Up
03:35:15 - 03:46:17
Wrapping Up
David wraps up the course, shares additional resources to learn XState, reiterates the idea that XState is useful when trying to model the logic of an application, and answers questions about the new features introduced in XState 5.

General
Complete name : 4. Statecharts & Assignment Actions.mp4
Format : WebM
Format version : Version 2
File size : 60.1 MiB
Duration : 10 min 8 s
Overall bit rate mode : Variable
Overall bit rate : 829 kb/s
Writing application : Lavf57.71.100
Writing library : Lavf57.71.100
FileExtension_Invalid : webm

Video
ID : 2
Format : VP8
Codec ID : V_VP8
Duration : 10 min 8 s
Bit rate : 595 kb/s
Width : 1 920 pixels
Height : 1 080 pixels
Display aspect ratio : 16:9
Frame rate mode : Constant
Frame rate : 29.970 (30000/1001) FPS
Compression mode : Lossy
Bits/(Pixel*Frame) : 0.010
Stream size : 43.2 MiB (72%)
Language : English
Default : Yes
Forced : No

Audio
ID : 1
Format : Vorbis
Format settings, Floor : 1
Codec ID : A_VORBIS
Duration : 10 min 8 s
Bit rate mode : Variable
Bit rate : 192 kb/s
Channel(s) : 2 channels
Sampling rate : 48.0 kHz
Compression mode : Lossy
Delay relative to video : -3 ms
Stream size : 13.9 MiB (23%)
Writing application : Lavc57.89.100
Language : English
Default : Yes
Forced : No