Demystifying State Machines

https://learnstatemachines.com

Transcript

1. Demystifying State Machines
2. @jonbellah Front-end Engineer at
3. A long, long time ago… at least like 6 or 7 years
5. jQuery
6. State is hard
7. Backbone
8. State is still hard
9. React
10. State is still hard
11. React with Redux
12. State is still hard
14. Why?
15. State is implicit
16. { this.state.isError ? "Do something" : false; }
17. { this.state.isError &&
 !this.state.isFetching ? "Do something else” : false; }
18. this.state.isError this.state.isFetching this.state.isSuccess this.state.isAdmin this.state.hasMore this.state.isEmpty this.state.isLoading
20. Event-action paradigm
21. Bottom-up Approach •Difficult to understand •Difficult to test •Contains bugs even after testing and fixing •Difficult to enhance •Code quality deteriorates as features are added Source: Constructing the user interface with statecharts, Ian Horrocks
22. State Machines
23. An abstract machine that can be in exactly one of a finite number of states at a given time.
24. You’re already writing state machines.
25. Event-state-action paradigm
26. Automata Theory Deterministic Finite Automata
31. State Explosion
32. Statecharts
33. Statecharts: A visual formalism for complex systems David Harel, 1987
34. Hierarchy
35. Orthogonality
36. Advantages of Statecharts (According to NASA) • Visualized modeling • Precise diagrams • Automatic code generation • Comprehensive test coverage • Accommodation of late-breaking
 requirement changes Source: State machine modeling of the Space Launch System Solid Rocket Boosters, Harris & Patterson-Hine
38. Statecharts represent the control of your applications.
39. “A statechart is a magic box, you tell it what happened and it tells you what to do.” Luca Matteis
40. xstate github.com/davidkpiano/xstate
41. Functional, stateless JavaScript finite state machines and statecharts.
42. Actions const statechart = { initial: 'loggedIn', states: { loggedIn: { onEntry: ['setUser'], onExit: ['unsetUser'], on: { LOGOUT: 'loggedOut', } } } }
43. form: { on: { SUBMIT:[ { target: ‘loading', cond: ({ state }) => { return Object.values(state).filter(v => v === '').length === 0 } }, { target: 'error' } ] } } Guards
44. History const statechart = { initial: 'switchOff', states: { switchOff: { on: { TOGGLE: 'switchOn', }, }, switchOn: { on: { TOGGLE: 'switchOff', }, }, hist: { history: true } }, };
45. Statecharts With React
46. One statechart does not rule them all Source: gundersons.com
48. Statecharts + Components =
49. react-automata github.com/MicheleBertoli/react-automata
51. const statechart = { initial: 'red', states: { green: { on: { TIMER: 'yellow', }, }, yellow: { on: { TIMER: 'red', }, }, red: { on: { TIMER: 'green', }, }, }, };
53. class Stoplight extends React.Component { handleClick = () => { this.props.transition('TIMER'); }; render() { return ( <div> <State value="red">Red</State> <State value="yellow">Yellow</State> <State value="green">Green</State> <button type="button" onClick={this.handleClick}> Next Light </button> </div> ); } } export default withStatechart(statechart)(Stoplight);
54. Testing Statecharts
55. Jest
56. import { testStatechart } from 'react-automata'; import { statechart, Stoplight } from './Stoplight'; test('Stoplight', () => { testStatechart({ statechart }, Stoplight); }); Stoplight.test.js
57. exports[`Stoplight: red 1`] = ` <div> Red <button onClick={[Function]} type="button" > Next Light </button> </div> `; Stoplight.snapshot.js
58. Statecharts !== Automatic bug-free code
59. Statecharts as a refactor target
60. • JavaScript Promises • Vending machines • Turnstyles • Traffic lights • NASA Space Launch System • Regex • Video games • Tesla Manufacturing • Computational biology • Aviation
61. Resources w3.org/TR/scxml statecharts.github.io spectrum.chat/statecharts Statecharts: A visual formalism for complex systems by David Harel
 Constructing the User Interface with Statecharts
 by Ian Horrocks
62. learnstatemachines.com
63. learnstatemachines.com/workshop
64. “Make impossible states impossible.” @davidkpiano