The visual future of reactive applications with statecharts

on YouTube ↗01h 01m

" summary

Shows a concrete claim: modeling UI logic as explicit statecharts yields automatically generated visualizations and exhaustive path-based tests instead of ad hoc booleans. Implements examples with XState, a live visualizer, and a actor model demo, turning a click-heavy fetch button into a single-state-safe flow, generating all simple paths for integration testing, using entry/exit/transition actions and timeouts, hooking into analytics for adaptive flows, and citing real-world usage like the Mars Curiosity codebase.

AI-written summary · about

" chapters (48)

1. 0:00Introduction
2. 1:00Common problem
3. 2:10Time
4. 3:02Code example
5. 4:12The bottomup approach
6. 5:17The problem with this approach
7. 6:40Finite state machines
8. 9:31Switch case statement
9. 13:33XState
10. 14:50Cal Shear
11. 15:17State Machine
12. 19:01Does this scale
13. 19:21State explosion problem
14. 22:41Extended State
15. 23:38Nested States
16. 24:33Hierarchical States
17. 26:33Orthogonal States
18. 27:52Parallel States
19. 28:35State Values
20. 29:15New Visualization Tool
21. 29:43Verifying States
22. 31:10Integration Testing
23. 35:59Determinism
24. 37:42Adaptive user interfaces
25. 38:11Transition analytics
26. 38:29Adaptive apps
27. 38:59Analytics
28. 40:28Example
29. 42:17Decision trees
30. 42:50Analytics in the interpreter
31. 43:23X8 graph
32. 43:54Reinforcement learning
33. 45:12Redux
34. 45:32Actor model
35. 46:37Observables
36. 47:12UseMachine
37. 47:39FSM
38. 48:02Gatsby
39. 48:29SE XML
40. 49:08Mars Curiosity Rover
41. 49:33Disadvantages
42. 50:01Complexity
43. 50:29Resources
44. 50:39Make your code do more
45. 50:58Thank you
46. 51:10Questions
47. 51:28Practical use
48. 52:27What is XState

" related talks

• 29mReactive State Machines and StatechartsDavid Khourshid · ReactiveConf 2018
• 21mReactive State Machines and StatechartsDavid Khourshid · Uphill Conf 2019
• 37mReactive State Machines and StatechartsDavid Khourshid · React Finland 2018
• 22mMake legacy code delightful with statechartsMatt Pocock · React Finland 2021
• 34mSimplifying Complex UIs with Finite Automata & StatechartsDavid Khourshid · JSConf Iceland 2018
• 42mTackle React component complexity using Reactive StatechartsFarzad Yousefzadeh · reactjsday 2019
• 27mMaking Application Logic Visually CollaborativeDavid Khourshid · Infobip Shift 2021
• 27mXState: the Visual Future of State ManagementDavid Khourshid · React Summit Remote Edition 2021