Making Application Logic Visually Collaborative
summary
Argues that application logic becomes precise, testable and team-visible when extracted into executable diagrams backed by state machines, statecharts and the actor model. Shows XState + XState Inspect and the new Stately visualizer turning code into a bi‑directional diagram (demo: a checkout wizard where UI actions update the graph and the graph drives views), auto‑generating shortest‑path step lists and component views. Claims this reduces bugs and documentation drift and describes Stately.ai, inspector, registry and an editor that already work.
AI-written summary · about
chapters (24)
- 0:00Intro
- 0:59Code is Read
- 1:39Human and Computer
- 2:42No Disconnect
- 3:49Communication
- 4:00Diagrams
- 4:53User Stories
- 6:07Sequence Diagrams
- 7:05State Machines State Charts
- 8:50Visual Formalisms
- 9:43Current State
- 10:40Reducers
- 11:45State Machines
- 12:59Actor Model
- 13:18Searching State
- 14:30Searching State Code
- 16:02Demo
- 21:08State Management vs State Orchestration
- 22:13Using XState
- 22:53statelyai biz
- 23:23registry
- 24:37stately editor
- 25:08recap
- 26:18the future
related talks
16mCoding Complex App Logic, Visually
01h 01mThe visual future of reactive applications with statecharts
40mCoding Complex App Logic, Visually
27mXState: the Visual Future of State Management
19mIntroducing state machines and statecharts
22mMake legacy code delightful with statecharts
34mSimplifying Complex UIs with Finite Automata & Statecharts
37mReactive State Machines and Statecharts