Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Demystifying State Machines

Demystifying State Machines

9c152b1584187e23aa5d9b1dc2f697b7?s=128

Jon Bellah

August 22, 2018
Tweet

Transcript

  1. Demystifying State Machines

  2. @jonbellah Front-end Engineer at

  3. A long, long time ago… at least like 6 or

    7 years
  4. None
  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

  13. None
  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

  19. None
  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

  27. None
  28. None
  29. None
  30. None
  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
  37. None
  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

  47. None
  48. Statecharts + Components =

  49. react-automata github.com/MicheleBertoli/react-automata

  50. None
  51. const statechart = { initial: 'red', states: { green: {

    on: { TIMER: 'yellow', }, }, yellow: { on: { TIMER: 'red', }, }, red: { on: { TIMER: 'green', }, }, }, };
  52. None
  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