XState

FINITE STATE MACHINE

An abstract machine that can be in exactly one of a finite number of states at any given time.

Finite-State Machine

https://en.wikipedia.org/wiki/Finite-state_machine

Deterministic

Finite

Automata

Predetermined Sequence

Pure Process
(new state = state + action)

Predefined
States

http://slides.com/davidkhourshid/finite-state-machines#/16

https://medium.com/@brianray_7981/tutorial-write-a-finite-state-machine-to-parse-a-custom-language-in-pure-python-1c11ade9bd43

Adjacency list

http://slides.com/davidkhourshid/finite-state-machines#/24

First FSM

https://github.com/davidkpiano/xstate

Hierarchical (Nested) State Machines

https://github.com/davidkpiano/xstate

Parallel State Machines

https://github.com/davidkpiano/xstate

History States

https://github.com/davidkpiano/xstate

Why Finite State Machine？

http://slides.com/davidkhourshid/finite-state-machines#/9

http://slides.com/davidkhourshid/finite-state-machines#/10

CONST Foo = (m, s, a) => m[s][a]

It's Pure Function!

Common Language for
designers & developers

Eliminate
unnecessary state

Easy to Test

Reusable Logic

Fist Example

For Vue

What's wrong？

<button @click="onClick">
  Fetch
</button>

//

const onClick = () => {
  if (isLoading) return
  fetch();
}

Example!