Rise of the state machines

Mat Warger

@mwarger

state Management

and more

state Management

state Management

state Management

state Management

state Management

state Management

problems

  • Software
  • Time
  • Users

software

software

is hard

"THIS SHOULD NEVER HAPPEN"

Title Text

Title Text

Title Text

Time

Time

is relative

situation

Reece went back in time too late, Sarah was killed,  and John Connor was never born.

result

SKYNET results in JUDGEMENT DAY.  DEATH to all humans.

Reece went back just in time, Sarah was saved,  and John Connor was born.

SKYNET results in JUDGEMENT DAY.  John Connor led the resistance and saved HUMANITY.

situation

result

A user types in their username and password, taps the sign-in button, and then clicks a link to a page.

User is signed in and is routed to the selected page.

A user types in their username and password, clicks a link to a page, and then taps the sign-in button.

User begins navigating and then executes a login action - may the fastest request win!

users

users

Are

U

N

p

R

e

d

i

c

t

a

b

l

e

users

Are

U

N

p

R

e

d

i

c

t

a

b

l

e

your users

your users

USER INPUT

STATE MACHINES

STATE MACHINES

Finite Automata

What are state machines?

  • An INITIAL STATE
  • A finite number of STATES
  • A number of EVENTS
  • A TRANSITION function between states
  • A FINAL STATE (optional)

What are state machines?

example

example

example

goals of xstate

  • Event-based architecture
  • Platform and framework-agnostic
  • Adherence to the SCXML Specification (including serialization)
  • Functional, type-safe*, with zero dependencies

example

INITIAL STATE

Fetch Machine

STATES

EVENTS

example

INITIAL STATE

Fetch Machine

STATES

EVENTS

and TRANSITIONS

Final State

state

state

action

state

event

state

event

+

=

state

event

+

=

state

state

event

+

=

transition

state

event

+

=

something happens

sound familiar?

you're already using them

you're already using them

one
key
Difference

one

state

at a time

what can I do with this?

  • State Visualization
  • Animations
    • ​Transitions
    • CSS
  • Model-based Testing

visualize large workflows

animations

model-based testing

demo

trade-offs and gotchas

everything is a state

 (async, "loading", etc)

NO EXCEPTIONS!

Resources

Thank you

@mwarger - Twitter, Github

mw.codes

Rise of the State Machines

By Mat Warger

Rise of the State Machines

Come with me if you want to live... without confusing state management! State machines enforce a simple set of rules for your application state - a single state is allowed at any given time and only certain transitions can be made between states. These explicit rules lead to more predictable code and fewer bugs. In this talk, we'll discover what state machines are and learn how they can be incorporated into modern applications. We'll also see how using state machines can help communicate meaning and encode business logic across teams (and beyond just developers). You'll leave with an understanding of how to effectively create and use state machines for your own applications while keeping the business logic clean and declarative. Terminate complexity with state machines! 👍

  • 2,411