What

• is xstate
• is SCXML
• is a finate state machine
• is a state chart
• are some basics

Why

• use it
• not use it

How

• configuring state nodes
• lets model my garage door

When

• should you reach for this

Where

• to find out more

...is XState

XState is a library for creating, interpreting, and executing finite state machines and statecharts, as well as managing invocations of those machines as actors.

Created and primarily maintained by David Khourshid @DavidKPiano

API goals

• Based upon state machine formali SCXML
• and David Harel's state charts
• Promotes the actor model
• Framework and platform agnostic
• Pure functional API
• Zero dependancies

...is a finite state machine

Formally, finite state machines have five parts:
1. One initial state
2. A finite number of states
3. A finite number of events
4. a mapping of transitions
5. A finite number of (possibly empty) final states

...are some key terms for State Charts

• Actions - side effects of events
• Guards - conditional transitions
• Context - extended state (or store)
• Hierarchy - nested states
• Orthogonality - parallel states

...use XState

• Based on 30 years of state chart formalisations, benefiting from working groups reseach into edge cases
• refuge from "shiney object syndrome"
• Now in version 4 its passed the critial threshold of maturity
• Strong and growning community
• Its east to understand a chart
• the behaviour is decoupled
• process of building exposes all states to be explored
• studies show that there are less bugs
• better documentation
• easier to work with BA's and designers
• easier to make changes

...not use XState

• Programmer need to learn something new
• Learning curve is steep!
• Different way of coding
• The overhead of extracting the behaviour may increase the number of lines written, especially for smaller charts.

...should you reach for this

perhaps when your building something complicated

...can i learn more

• The XState docs are excellent
• Any of David Khourshid talks on youtube
  • js conf iceland
  • Formal Forms with State Machines | React Next 2019
  • fun fun function XState
  • and many more
• STATECHARTS - David HAREL
• statecharts.github.io/