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

Demystifying State Machines

Demystifying State Machines

Jon Bellah

August 22, 2018
Tweet

More Decks by Jon Bellah

Other Decks in Technology

Transcript

  1. 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
  2. An abstract machine that can be in exactly one of

    a finite number of states at a given time.
  3. 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
  4. “A statechart is a magic box, you tell it what

    happened and it tells you what to do.” Luca Matteis
  5. Actions const statechart = { initial: 'loggedIn', states: { loggedIn:

    { onEntry: ['setUser'], onExit: ['unsetUser'], on: { LOGOUT: 'loggedOut', } } } }
  6. form: { on: { SUBMIT:[ { target: ‘loading', cond: ({

    state }) => { return Object.values(state).filter(v => v === '').length === 0 } }, { target: 'error' } ] } } Guards
  7. History const statechart = { initial: 'switchOff', states: { switchOff:

    { on: { TOGGLE: 'switchOn', }, }, switchOn: { on: { TOGGLE: 'switchOff', }, }, hist: { history: true } }, };
  8. const statechart = { initial: 'red', states: { green: {

    on: { TIMER: 'yellow', }, }, yellow: { on: { TIMER: 'red', }, }, red: { on: { TIMER: 'green', }, }, }, };
  9. 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);
  10. import { testStatechart } from 'react-automata'; import { statechart, Stoplight

    } from './Stoplight'; test('Stoplight', () => { testStatechart({ statechart }, Stoplight); }); Stoplight.test.js
  11. exports[`Stoplight: red 1`] = ` <div> Red <button onClick={[Function]} type="button"

    > Next Light </button> </div> `; Stoplight.snapshot.js
  12. • JavaScript Promises • Vending machines • Turnstyles • Traffic

    lights • NASA Space Launch System • Regex • Video games • Tesla Manufacturing • Computational biology • Aviation
  13. 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