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

setState Machine

setState Machine

What if your components' state was deterministic?
Learn about the implementation of State Machines to manage React Components' state - from the basics of Automata theory to autogenerated tests.

Michele Bertoli

April 13, 2018
Tweet

More Decks by Michele Bertoli

Other Decks in Programming

Transcript

  1. setState Machine
    @MicheleBertoli

    View full-size slide

  2. I’m Michele, a React fanboy

    View full-size slide

  3. I work in Ads at Facebook and I
    build user interfaces

    View full-size slide

  4. State is hard

    View full-size slide

  5. Infinite Scroll
    ● Attach an event handler to scroll
    ● Check if the user scrolled > 90%
    ● Fetch more data

    View full-size slide

  6. if (scrollPercentage > 0.9) {
    this.fetch()
    }

    View full-size slide

  7. if (
    scrollPercentage > 0.9 &&
    !this.state.isFetching
    ) {
    this.fetch()
    }

    View full-size slide

  8. {this.state.isFetching
    ? 'Loading...'
    : null}

    View full-size slide

  9. if (!data.hasMore) {
    this.detach()
    }

    View full-size slide

  10. {this.state.hasError
    ? 'Something went wrong'
    : null}

    View full-size slide

  11. {isEmpty
    ? (isFetching ? Loading... : Empty.)
    :


    }
    source: github.com/reactjs/redux

    View full-size slide

  12. Bottom-up
    ● Focus on linear transitions
    ● Hard to understand
    ● Edge cases

    View full-size slide

  13. State Machine

    View full-size slide

  14. Automata Theory
    ● Abstract machines
    ● Deterministic finite automata

    View full-size slide

  15. SEMI NO-SEMI
    TOGGLE
    TOGGLE

    View full-size slide

  16. SEMI
    SPACE
    SEMI
    TAB
    NO-SEMI
    TAB
    NO-SEMI
    SPACE
    TOGGLE SEMI
    TOGGLE SEMI
    USE TAB USE TAB

    View full-size slide

  17. “A visual formalism
    for complex systems.”
    David Harel, 1987

    View full-size slide

  18. Statecharts
    Extension of the conventional
    formalism of state machines and
    state diagrams

    View full-size slide

  19. Orthogonality

    View full-size slide

  20. A
    B
    event [guard]

    View full-size slide

  21. A
    B
    event / action

    View full-size slide

  22. A
    entry action1
    exit action2, action3

    View full-size slide

  23. Statechart
    Event Actions

    View full-size slide

  24. “A statechart is a magic-box:
    you tell it what happened,
    and it tells you what to do.”
    Luca Matteis, 2018

    View full-size slide

  25. yarn add xstate

    View full-size slide

  26. xstate
    Functional, Stateless JS Finite State
    Machines and Statecharts

    View full-size slide

  27. entry removeSemicolons
    entry addSemicolons
    noSemi
    semi
    TOGGLE
    TOGGLE

    View full-size slide

  28. const prettyMachine = Machine({
    initial: 'semi',
    states: {
    semi,
    noSemi,
    },
    })

    View full-size slide

  29. const semi = {
    on: { TOGGLE: 'noSemi' },
    onEntry: 'addSemicolons',
    }

    View full-size slide

  30. const noSemi = {
    on: { TOGGLE: 'semi' },
    onEntry: 'removeSemicolons',
    }

    View full-size slide

  31. const { actions } = prettyMachine
    .transition('semi', 'TOGGLE')
    // => ["removeSemicolons"]

    View full-size slide

  32. yarn add react-automata

    View full-size slide

  33. react-automata
    A state machine abstraction for
    React

    View full-size slide

  34. start
    entry attach
    listening
    SUCCESS [hasMore]
    ERROR / error
    SCROLL [scrollPercentage > 0.9]
    READY
    fetching
    entry fetch
    finish
    SUCCESS [!hasMore]
    entry detach

    View full-size slide

  35. withStatechart(statechart)(MyInfiniteScroll)

    View full-size slide

  36. start
    entry attach
    listening
    finish
    SUCCESS [!hasMore]
    SUCCESS [hasMore]
    ERROR / error
    SCROLL [scrollPercentage > 0.9]
    READY
    fetching
    entry fetch
    entry detach

    View full-size slide

  37. class MyInfiniteScroll extends React.Component {
    attach() {}
    // render() {}
    }

    View full-size slide

  38. attach() {
    this.element.addEventListener(
    'scroll',
    this.handleScroll
    )
    }

    View full-size slide

  39. start
    entry attach
    READY
    SUCCESS [hasMore]
    listening
    finish
    SUCCESS [!hasMore] ERROR / error
    SCROLL [scrollPercentage > 0.9]
    fetching
    entry fetch
    entry detach

    View full-size slide

  40. this.props.transition('READY')

    View full-size slide

  41. ERROR / error
    SUCCESS [!hasMore]
    SUCCESS [hasMore]
    entry fetch
    fetching
    READY
    start
    entry attach
    listening
    finish
    SCROLL [scrollPercentage > 0.9]
    entry detach

    View full-size slide

  42. class MyInfiniteScroll extends React.Component {
    attach() {}
    fetch() {}
    // render() {}
    }

    View full-size slide

  43. fetch() {
    const { transition } = this.props
    loadData()
    .then(data => transition('SUCCESS', data)
    .catch(() => transition('ERROR'))
    }

    View full-size slide

  44. React
    Automata
    Transition
    (evt, data)
    Action
    Methods

    View full-size slide

  45. withStatechart(statechart, { devTools: true })(
    MyInfiniteScroll
    )

    View full-size slide

  46. “The best testing strategy
    is not writing tests.”
    Michele Bertoli, 2016

    View full-size slide

  47. testStatechart({ statechart }, MyInfiniteScroll)

    View full-size slide

  48. exports[`fetching`] = `

    Loading...

    `;

    View full-size slide

  49. exports[`error`] = `

    Something went wrong

    `;

    View full-size slide

  50. Benefits
    ● Fewer bugs
    ● Easy to understand
    ● What vs when

    View full-size slide

  51. “2018 front-end trend prediction:
    Everybody's going to start using
    state machines for UIs.”
    Max Stoiber, 2018

    View full-size slide

  52. bit.ly/automata-calculator

    View full-size slide

  53. Takeaways
    ● States > Transitions
    ● Top-down
    ● Read more papers

    View full-size slide

  54. Constructing the User
    Interface with
    Statecharts
    Ian Horrocks, 1998
    bit.ly/statecharts-book
    Statecharts: A Visual
    Formalism for
    Complex Systems
    David Harel, 1987
    bit.ly/statecharts-paper

    View full-size slide

  55. T
    @gandellinux
    @DavidKPiano
    @ryanflorence
    @mogsie

    View full-size slide

  56. @MicheleBertoli

    View full-size slide