Reactive State Machines and Statecharts
summary
An end-to-end demo of modeling UI behavior as state machines and statecharts: a pure transition function that becomes a statechart interpreter, an interactive statechart visualization that syncs with the code, and automated test generation that produces 27 generated integration tests from one workshop app. The talk shows hierarchy, parallel regions, guards and entry/exit actions, uses telemetry-weighted graphs to find hot paths, and cites real uses (complex sign-in flow, Gatsby, Spectrum) to show the approach actually reduces bugs and surfaces edge cases.
AI-written summary · about
chapters (18)
- 0:00Introduction
- 0:10Show of hands
- 1:25Time
- 3:45APIs
- 4:30Example
- 7:30The bottomup approach
- 9:10Intuition
- 10:35Finite State Machines
- 13:20State Machines as Switch Statements
- 16:00Live Share
- 17:20Application Analytics
- 21:30Testing
- 22:10Formal Methods
- 26:17Xdate
- 27:15History
- 28:47Statechart
- 30:15Advantages
- 32:20Tradeoffs
related talks
01h 01mThe visual future of reactive applications with statecharts
19mIntroducing state machines and statecharts
34mSimplifying Complex UIs with Finite Automata & Statecharts
42mTackle React component complexity using Reactive Statecharts
28msetState Machine
45mState of the Art User Interfaces with State Machines
28mState machines for frontend state management
22mMake legacy code delightful with statecharts