@davidkpiano · FEDC Taiwan 2018

The (Finite) State

of Reactive Animations

twitch.tv/keyframers

I live here

The most neglected variable is time.

📞

🔙

🙏🤐

🅰️⚓️

🅰️🏋️‍♀️

🔭

🅰️

⚽️🎾🎱

Callbacks

Promises

Async-Await

Observables

(Continuous) events

Discrete changes

A "reactive animation" is one involving discrete changes, due to events.

[

]

. . .

Value

Array

Promise

Observable

3.5s

import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

const bodyElement = document.querySelector('body');

const mouseMove$ = fromEvent(body, 'mousemove');

// Stream of mouse positions
const mousePos$ = mouseMove$.pipe(
  map(event => ({
    x: event.clientX,
    y: event.clientY
  }))
);

Creating Observables

npm install rxjs --save

reactivex.io/rxjs







mouseMove$.subscribe((value) => {
  // do anything with the value
});


mousePos$.subscribe((value) => {
  const { x, y } = value;

  bodyElement.style
    .setProperty('--mouse-x', x);
  bodyElement.style
    .setProperty('--mouse-y', y);
});

Subscribing to Observables

css-tricks.com/animated-intro-rxjs

For more information:

CSS Variables!

How can we model the behavior

of user interfaces?

API

Human

documented
predictable
testable

#Frameworkless

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

state management library

State machine...?

Source: Modal Windows by Jakub Antalík

// ...
onValidate(password) {
  fetch(API + '&password=' + password)
    .then(data => this.setState({ data }));
}
// ...

Show data when results retrieved

// ...
onValidate(password) {
  this.setState({ loading: true });

  fetch(API + '&password=' + password)
    .then(data => {
      this.setState({ data, loading: false });
    });
}
// ...

Show loading screen

Show data when results retrieved

Hide loading screen

// ...
onValidate(password) {
  this.setState({ loading: true });

  fetch(API + '&password=' + password)
    .then(data => {
      this.setState({ data, loading: false });
    })
    .catch(error => {
      this.setState({
        loading: false,
        error: true
      });
    });
}
// ...

Show loading screen

Show data when results retrieved

Hide loading screen

Show error

Hide loading screen

// ...
onValidate(password) {
  this.setState({
    loading: true,
    error: false
  });

  fetch(API + '&password=' + password)
    .then(data => {
      this.setState({
        data,
        loading: false,
        error: false
      });
    })
    .catch(error => {
      this.setState({
        loading: false,
        error: true
      });
    });
}
// ...

Show loading screen

Show data when results retrieved

Hide loading screen

Show error

Hide loading screen

Hide error

// ...
onValidate(password) {
  if (this.state.loading) return;

  this.setState({
    loading: true,
    error: false,
    canceled: false
  });

  fetch(API + '&password=' + password)
    .then(data => {
      if (this.state.canceled) {
        return;
      }

      this.setState({
        data,
        loading: false,
        error: false
      });
    })
    .catch(error => {
      // 什么他妈的
      if (this.state.canceled) {
        return;
      }

      this.setState({
        loading: false,
        error: true
      });
    });
}

onCancel() {
  this.setState({
    loading: false,
    error: false,
    canceled: true
  });
}
// ...

Show loading screen

Show data when results retrieved

Hide loading screen

Show error

Hide loading screen

Hide error

Validation in progress already

Cancel cancellation

Ignore results if cancelled

Ignore error if cancelled

Cancel search

        error: false
      });
    })
    .catch(error => {
      // 什么他妈的
      if (this.state.canceled) {
        return;
      }

      this.setState({
        loading: false,
        error: true
      });
    });
}

🍑 🆙

The bottom-up

EVENT

ACTION 1
ACTION 2
ACTION 3
ACTION 4
ACTION 5
ACTION 6

approach

State

🍑 🆙
code

Difficult to understand

Difficult to test

Will contain bugs

Difficult to enhance

Features make it worse

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

Intuition

UI components are not independent
Actions are based on event & state
The event-action paradigm is too simple

Finite state machines

and statecharts

Finite state machines

have one initial state
a finite number of states
a finite number of events
a mapping of state transitions
triggered by events
a finite number of final states

Idle

Pending

Rejected

Fulfilled

Fetch

Resolve

reject

promisejs.org/implementing

Idle

Searching...

Success

Failure

RESOLVE

REJECT

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];
}

Define transitions between
states & actions

Transition function determines
next state from state + event

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

Source: codepen.io/davidkpiano/pen/WKvPBP

Source: codepen.io/davidkpiano/pen/vmXErw

State machines in

VS Live Share

http://aka.ms/vsls

Signed out

Signing in

Signed in

Sharing...

Shared

Joining...

Joined

share Success

Join Success

Join

Leave

End Collab session

Using state machines

for analytics

transition(currentState, event) {
  const nextState = // ...

  Telemetry.sendEvent(
    currentState,
    nextState,
    event
  );

  return nextState;
}

Using state machines

for analytics

Using state machines

for integration testing

Shortest path algorithms (Dijkstra, Bellman-Ford, A* search, etc.)
Analytics provides weights
Represents all happy paths
Can be automatically generated

A → B
A → B → C
A → D
A → D → E

Using state machines

for integration testing

Depth-first search (DFS) algorithm for finding all simple paths
Represents all possible user flows
Reveals all edge cases
Can be automatically generated ⚠️

A → B
A → B → C
A → D
A → D → E
A → D → E → C
A → D → B → C
A → B → E → C
A → D → E → B → C

Software bugs are

made visually clear

idle

success

failure

FETCH

RESOLVE

ERROR...?

Error

RETRY

Does this scale?

Harel Statecharts

extended finite state machines

Statecharts

Idle

Searching...

onEntry / prefetchResources

onEntry / fetchResults

Actions - onEntry, onExit, transition
Guards - conditional transitions

[query.length > 0]

Statecharts

Actions - onEntry, onExit, transition
Guards - conditional transitions
Hierarchy - nested states
Orthogonality - parallel states
History - remembered states

Bold ON

Bold OFF

Italics ON

Italics OFF

Underline ON

Underline OFF

Characters

Idle

Searching...

Success

Failure

RESOLVE

REJECT

Idle

Searching...

Success

Failure

RESOLVE

REJECT

Searched

Statecharts

with xstate

npm install xstate --save

Actions - onEntry, onExit, transition
Guards - conditional transitions
Hierarchy - nested states
Orthogonality - parallel states
History - remembered states

const lightMachine = Machine({
  initial: 'green',
  states: {
    green: {
      on: {
        TIMER: 'yellow'
      }
    },
    yellow: {
      on: {
        TIMER: 'red'
      }
    },
    red: {
      on: {
        TIMER: 'green'
      }
    }
  }
});

const nextState = lightMachine
  .transition('green', 'TIMER');

// State {
//   value: 'yellow' 
// }

const lightMachine = Machine({
  initial: 'green',
  states: {
    green: {
      on: {
        TIMER: 'yellow'
      }
    },
    yellow: {
      onEntry: ['activateYellow']
      on: {
        TIMER: 'red'
      }
    },
    red: {
      onExit: ['stopCountdown']
      on: {
        TIMER: 'green'
      }
    }
  }
});

const lightMachine = Machine({
  initial: 'green',
  states: {
    green: {
      on: {
        TIMER: {
          yellow: {
            cond: (xs, event) =>
              event.elapsed > 10000
          }
        }
      }
    },
    yellow: {
      on: {
        TIMER: 'red'
      }
    },
    red: {
      on: {
        TIMER: 'green'
      }
    }
  }
});

const lightMachine = Machine({
  initial: 'green',
  states: {
    green: {
      on: {
        TIMER: 'yellow'
      }
    },
    yellow: {
      on: {
        TIMER: 'red'
      }
    },
    red: {
      initial: 'walk',
      states: {
        walk: {
          { on: { PED_COUNTDOWN: 'wait' } }
        },
        wait: {
          { on: { PED_COUNTDOWN_END: 'stop' } }
        },
        stop: {}
      }
    }
  }
});

const lightsMachine = Machine({
  parallel: true,
  states: {
    northSouthLight: {
      initial: 'green',
      states: {
        // ...
      }
    },
    eastWestLight: {
      initial: 'red',
      states: {
        // ...
      }
    }
  }
});

const payMachine = Machine({
  initial: 'method',
  states: {
    method: {
      initial: 'card',
      states: {
        card: {
          on: { SELECT_CASH: 'cash' }
        },
        cash: {
          on: { SELECT_CARD: 'card' }
        }
      },
      on: {
        NEXT: 'review'
      }
    },
    review: {
      on: {
        PREV: 'method.$history'
      }
    }
  }
});

github.com/davidkpiano/xstate

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

let currentState = machine.initialState;

// ...

function send(event) {
  const nextState = machine.transition(currentState, event);
  const { actions } = nextState;

  // Set the next state
  currentState = nextState;

  // Execute each action
  actions.forEach(action => action());
}

machine.transition() is
just a reducer function!

Source: codepen.io/davidkpiano/pen/zWrRye

Advantages

of using statecharts

Visualized modeling
Precise diagrams
Automatic code generation
Comprehensive test coverage
Accommodation of late-breaking requirements changes

Statechart Autocoding for Curiosity Rover

Disadvantages

of using statecharts

Learning curve

Modeling requires planning ahead

Not everything can be modeled (yet)

Statecharts

FSMs

Bottom-up

Complexity

trade-offs

States & logic

Code Complexity

Statechart
visualization?

bit.ly/xstate-viz

BETA!

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

Learn once, write anywhere

Model once, implement anywhere

Make your code do more with state machines.

Thank you FEDC Taiwan!

@davidkpiano · FEDC Taiwan 2018

The Finite State of Reactive Animations

By David Khourshid

The Finite State of Reactive Animations

FEDC Taiwan 2018

4,627

The (Finite) State

of Reactive Animations

The most neglected variable is time.

📞

🔙

🙏🤐

🅰️⚓️

🅰️🏋️‍♀️

🔭

🅰️

⚽️🎾🎱

Callbacks

Promises

Async-Await

Observables

(Continuous) events

Discrete changes

A "reactive animation" is one involving discrete changes, due to events.

[

]

. . .

Value

Array

Promise

Observable

Creating Observables

Subscribing to Observables

How can we model the behavior

of user interfaces?

API

Human

documented

predictable

testable

un

un

un

#Frameworkless

🍑 🆙

The bottom-up

approach

🍑 🆙 code

Intuition

Finite state machines

and statecharts

Finite state machines

State machines in

VS Live Share

Using state machines

for analytics

Using state machines

for analytics

Using state machines

for integration testing

Using state machines

for integration testing

Software bugs are

made visually clear

Does this scale?

Harel Statecharts

extended finite state machines

Statecharts

Statecharts

Statecharts

with xstate

Advantages

of using statecharts

Disadvantages

of using statecharts

Learning curve

Modeling requires planning ahead

Not everything can be modeled (yet)

Complexity

trade-offs

Statechart visualization?

bit.ly/xstate-viz

The future of xstate

Resources

and tools

Make your code do more with state machines.

🍑 🆙
code

Statechart
visualization?