State of the Art User Interfaces with State Machines
summary
Finite state machines and statecharts model every UI state, ignore duplicate events (so clicking while searching fires no extra API calls), and expose missing transitions that cause bugs like the FaceTime microphone-on issue. The JavaScript/TypeScript library XState encodes machines as objects, feeds a visualizer to simulate states, runs an interpreter with a single onTransition hook for telemetry, and generates tests by enumerating simple/shortest paths; teams use it in Visual Studio Live Share and a Vault tutorial, and it maps to SCXML for broader toolchains.
AI-written summary · about
chapters (35)
- 0:00Introduction
- 1:11Apple FaceTime Bug
- 6:50Code
- 8:58Complexity
- 10:52Software Modeling
- 11:48Finite State Machines
- 12:41Searching State
- 13:42State Machines in Code
- 15:09Design Your Weekend
- 16:03Using State Machines
- 17:31Visualizing Software Bugs
- 19:27State Explosion
- 19:56State Charts
- 20:37Actions
- 21:38Nested States
- 22:37Orthogonal States
- 24:34Grouping States
- 25:18XState
- 26:10Visualization
- 26:30Example
- 28:22Adaptivity Analytics
- 29:11Visualizing State Machines
- 30:56Decision Trees
- 31:21Automatic Decision Trees
- 32:02Interpret Function
- 33:30Reinforcement Learning
- 34:52Vault Project
- 35:36Service Workers
- 36:45SC XML
- 38:02Advantages
- 39:09Disadvantages
- 40:04Complexity tradeoffs
- 40:32World of State Charts
- 40:43Make your code do more than managing States
- 41:03Questions
related talks
38mState of the Art Web User Interfaces with State Machines
29mReactive State Machines and Statecharts
27mXState: the Visual Future of State Management
28mState machines for frontend state management
31mXState: the Visual Future of State Management
34mSimplifying Complex UIs with Finite Automata & Statecharts
34mStill Not into State Machines in 2023?!
38mInto the Visual World of State Machines