@davidkpiano · React Finland 2018

Reactive State Machines

And Statecharts

isLoading

loading

The most neglected variable is time.

Callbacks

Promises

Async-Await

Observables

Any sufficiently complicated model class contains an ad-hoc, informally-specified, bug-ridden, slow implementation of half of a state machine.

How I Learned to Stop Worrying and ❤️ the State Machine - Reginald Braithwaite

How can we model the behavior

of user interfaces?

API

• documented

• predictable

• testable

• un

• un

• un

🍑 🆙

The bottom-up

approach

🍑 🆙
code

Source: Ian Horrocks, "Constructing the User Interface with Statecharts", ch. 3 pg. 17

Intuition

Finite state machines

and statecharts

Finite state machines

const machine = {
  initial: 'idle',
  states: {
    idle: {
      on: { SEARCH: 'searching' }
    },
    searching: {
      on: {
        RESOLVE: 'success',
        REJECT: 'failure',
        SEARCH: 'searching'
      }
    },
    success: {
      on: { SEARCH: 'searching' }
    },
    failure: {
      on: { SEARCH: 'searching' }
    }
  }
};

function transition(state, event) {
  return machine.states[state].on[event];
}

Source: css-tricks.com/robust-react-user-interfaces-with-finite-state-machines

State machines in 

VS Live Share

http://aka.ms/vsls

Using state machines

for analytics

Using state machines

for analytics

A

B

C

D

E

Using state machines

for integration testing

A

B

C

D

E

Using state machines

for integration testing

A

B

C

D

E

Using state machines

for integration testing

Software bugs are

made visually clear

Does this scale?

Harel Statecharts

extended finite state machines

Statecharts

Statecharts

Characters

Searched

Statecharts

with xstate

class App extends Component {
  static machine = Machine({ /* ... */ });

  state = {
    appState: machine.initialState
  };

  actions = { /* ... */ };

  send(event) {
    const nextState = machine.transition(
      this.state.appState,
      event.type,
      this.state
    );
    const { actions } = nextState;

    this.setState(
      { appState: nextState },
      () => {
        const nextExtState = actions
          .reduce((extState, action) => {
            const command = this.actions[action];
            // Execute the command
            return command(extState, eventType) || extState;
          }, this.state);

        this.setState(nextExtState);
      }
    );
  }

render() {
  return (
    <form onSubmit={() => this.send('SUBMIT')}>
      <input
        type="text"
        onChange={e => this.send({
          type: 'CHANGE',
          value: e.target.value
        })}
      />

      <button>Submit</button>
    </form>
  );
}

import { scan } from 'rxjs/operators';

const machine = new Machine({/* ... */});
const event$ = // ...

const state$ = event$.pipe(
  scan(machine.transition),
  tap(({ actions }) => {
    // execute actions
  });

const machine = new Machine({/* ... */});

export const reducer = machine.transition;

// ...

class App extends Component() {
  // ...
  componentDidUpdate() {
    const { state } = this.props;
    const { actions } = state;

    const nextState = actions.reduce(action => {
      // execute the action commands
    }, this.state);

    // local state, or send it to Redux
    this.setState(nextState);
  }
  // ...
}

Source: codepen.io/davidkpiano/pen/zWrRye​

Advantages

of using statecharts

Disadvantages

of using statecharts

Statecharts

FSMs

Bottom-up

Complexity

trade-offs

Statechart
visualization?

• I just pushed our first couple statecharts to production this afternoon. We have a medical calculator in our app that handles dose calculations.
• The logic was slowly growing more confusing, especially with subtle UX tweaks as the component was maintained.
• We rewrote with a statechart and everything is much clearer! Hopefully less bugs going forward.

The future

of xstate

• Full SCXML support and conversion
• A reactive interpreter
• Editable visualization tools
• Analysis and testing tools

Resources

• The World of Statecharts - Erik Mogensen
• Statecharts: A Visual Formalism for Complex Systems - David Harel (PDF)
• Constructing the User Interface with Statecharts - Ian Horrocks (book)
• xstate documentation
• How to model the behavior of Redux apps using statecharts - Luca Matteis
• React Automata - Michele Bertoli
• Pure UI - Guillermo Rauch
• Pure UI Control - Adam Solove

and tools

Write once, write anywhere

@davidkpiano · React Finland 2018