Mastering UIs with Finite State Machines
summary
Argues that deterministic Mealy-style finite state machines replace ad hoc if/else with a top-down model, using xstate and react-automata to decouple side effects via commands; demos a fetch component that only works once the command binding is enabled and shows error/retry, and describes VSCode telemetry as a production example. Presents automated snapshot testing by iterating states to get 70% coverage with one test, and claims FSMs can drive runtime bugs toward zero.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 5:09Bottomup approach
- 7:38Topdown approach
- 9:29Finite State Machines
- 12:55deterministic
- 13:34automata
- 14:38Finite state machine
- 21:03Conditions
- 21:39Automated Testing
- 23:56Resources
related talks
30mMastering UIs with Finite State Machines
45mMastering UIs with Finite State Machines
28mState machines for frontend state management
29mReactive State Machines and Statecharts
45mState of the Art User Interfaces with State Machines
20mSetState, We Need to Talk!
38mState of the Art Web User Interfaces with State Machines
37mReactive State Machines and Statecharts