Table of Contents
IntroductionDavid 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 ModelingDavid 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 Modeling ExerciseStudents 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 SolutionDavid live codes the solution to the state modeling exercise.
Getting Set Up with XStateDavid 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.
State Transitions ExerciseStudents are instructed to recreate the playerMachine to practice adding the initial states, states in the state object, and transitions in each of those states.
State Transitions SolutionDavid walks through the solution to the state transitions exercise. A brief demonstration of XState inspect is also provided in this segment.
ActionsDavid 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 ExerciseStudents are instructed to add in the missing states. A brief discussion of built-in actions is also provided in this segment.
Actions SolutionDavid walks through the solution to the actions exercise.
Actions Q&ADavid 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.
ContextDavid discusses and demonstrates what "extended state" is, assigning to context by using assign(), and reading from context using state.context.
Context ExerciseStudents 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.
Context SolutionDavid walks through the solution to context exercise. A student's question regarding updating context with Immer is also covered in this segment.
GuardsDavid discusses what guarded transitions are, inline guards, serialized guards, multiple guarded transitions, and eventless transitions.
Guarded Transitions ExerciseStudents 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.
Guarded Transitions SolutionDavid 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 StatesDavid discusses what hierarchical states are, initial states, selection transitions, and targeting state nodes by ID.
Compound States ExerciseStudents are instructed to refactor the paused and playing states to be children of the ready state.
Compound States SolutionDavid 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 StatesDavid discusses and demonstrates what orthogonal (parallel) states are, regions, and state value of parallel states.
Parallel States ExerciseStudents are instructed to refactor to include two parallel regions of player and volume.
Parallel States SolutionDavid walks through the solution to the parallel states exercise.
Parallel States Q&ADavid 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 StatesDavid 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.
Final States ExerciseStudents are instructed to add a 'finished' final state to the target.
Final States SolutionDavid walks through the solution to the final states exercise.
Final States Q&ADavid 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 StatesDavid discusses and demonstrates what history states are used for, previous states, specifying history states, shallow history, and deep history.
History States ExerciseStudents are instructed to go to the most recent child of the 'ready' state by adding a sibling history state.
History States SolutionDavid walks through the solution to the history states exercise.
History States Q&ADavid 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 OverviewDavid discusses and demonstrates what the actor model is, how to invoke promise, callback, and machine actors.
Ways to Invoke an ActorDavid 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 ExerciseStudents 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 SolutionDavid walks through the solution to the actor model exercise.
Actor Model Q&ADavid 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.
TestingDavid 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 UpDavid 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.