Coding Complex App Logic, Visually
summary
Claim: modeling app flow as state machines avoids impossible boolean combos and lets code generate docs and tests. Demonstration builds a Lego checkout demo with XState, uses XState inspect to sync live visualization to the running app, runs shortest‑path to auto‑produce checkout scenarios and view steps, and exports state logic from stately.ai editor into working React code. Examples include PayPal shortcut and a fullscreen video player that returns to mini after 2s, both functioning end to end.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 3:14Why application logic becomes complex over time
- 7:04Visual formalisms
- 10:37Tower of Babel in teams
- 13:48State machines for teams
- 17:40Implementing state machines
- 20:10Introducing XState
- 24:03Tests and docs from state machines
- 29:44State charts vs spaghetti logic
- 31:53Demo: state machine from scratch
- 36:26Visual programming benefits
- 39:00Future of development
related talks
16mCoding Complex App Logic, Visually
27mMaking Application Logic Visually Collaborative
01h 01mThe visual future of reactive applications with statecharts
40mVisualize your State Management with XState
34mSimplifying Complex UIs with Finite Automata & Statecharts
31mXState: the Visual Future of State Management
27mXState: the Visual Future of State Management
22mMake legacy code delightful with statecharts