English | WEBM | 1920×1080 | AAC 48KHz 2ch | 3h 45m | 1.15 GB
As the number of possible states in your app grows, developing UIs can become much more complex. With the help of state machines and statecharts, you will be able to manage your app’s states in a simple, robust way, and even visualize them! In this workshop, we will discover how state machines and statecharts can take your UIs to the next level, with innovative techniques for implementing, testing, and visualizing your app’s finite states in a robust, automated way.
Table of Contents
Introduction
The Problem with Adding Features
The Case for Statecharts
Finite State Machines
Create a State Machine
Create a State Machine Exercise
Create a State Machine Solution
Modeling States
Getting Started with XState
Transitions, State & Event Objects
Interpreting Machines & Creating a Service
Visualizing State Machines
Refactoring with XState Exercise
Refactoring with XState Solution
Interpreter Exercise
Interpreter Solution
Actions in XState
XState Actions Exercise
XState Actions Solution
Statecharts & Assignment Actions
Assignment Action Exercise
Assignment Action Solution
Guarded Transitions
Guarded Transitions Exercise
Guarded Transitions Solution
Transient Transitions
Transient Transitions Exercise
Transient Transitions Solution
Delayed Transition Exercise
Delayed Transition Solution
Nested or Hierarchical States
Nested States Exercise
Nested States Solution
History States
History States Exercise
History States Solution
Parallel States
Parallel States Exercise
Parallel States Solution
The Actor Model
Actor Model Exercise
Actor Model Solution
Invoking Services
Using XState with React
Using XState with RxJS
XState React Hooks & Vue Hooks
XState FSM, Testing XState & immer
Spawning vs Invoking Actors
Redux vs XState
React and XState Q&A
Wrapping Up
Resolve the captcha to access the links!