Visualizing app logic with
state machines
David Khourshid Β· @davidkpiano
stately.ai
ο£Ώ Frontend Friday
Code
+ Features
- Bugs
+/- Devs
+ Changes
+ Shiny new things
Time
Complexity
The path to
legacy code
Left to right
Top to bottom
File by file
Code is linear,
programs are not
π
User stories
πΌ
Mockups
π
User flows
π»
Code
π§ͺ
Tests
π©βπ«
Tutorials
π₯
π
User stories
πΌ
Mockups
π
User flows
π»
Code
π§ͺ
Tests
π©βπ«
Tutorials
Designers
Stakeholders
Developers
Logged out
Logged in
LOG IN
[correct credentials]
- Make API call to Supabase
- Initiate OAuth flow
- Ensure token is valid
- Persist token as cookie
- Redirect to logged in view
Given a user is logged out,
When the user logs in with correct credentials
Then the user should be logged in
All programs are
directed graphs
cart
shipping
contact
payment
confirmation
CHECKOUT
NEXT
NEXT
ORDER
PAYPAL
- Initial state
- Finite set of states
- Finite set of events
- Transitions
- Final states
State machines prevent
impossible states.
isLoading isSuccess hasErrors
type Status = Β | 'loading' Β | 'error' Β | 'success'
function transition(state, event) {
switch (state.value) {
case 'cart':
if (event.type === 'CHECKOUT') {
return { value: 'shipping' };
}
return state;
case 'shipping':
// ...
default:
return state;
}
}State machines
with switch statements
State
Event
const machine = {
initial: 'cart',
states: {
cart: {
on: {
CHECKOUT: 'shipping'
}
},
shipping: {
on: {
NEXT: 'contact'
}
},
contact: {
// ...
},
// ...
}
}function transition(state, event) {
const nextState = machine
.states[state]
.on?.[event.type]
?? state;
}
transition('cart', { type: 'CHECKOUT' });
// => 'shipping'
transition('cart', { type: 'UNKNOWN' });
// => 'cart'State machines
with objects
import { createMachine } from 'xstate';
const machine = createMachine({
initial: 'cart',
states: {
cart: {
on: {
CHECKOUT: 'shipping'
}
},
shipping: {
on: {
NEXT: 'contact'
}
},
contact: {
// ...
},
// ...
}
});import { interpret } from 'xstate';
const actor = interpret(machine).start();
actor.send({ type: 'CHECKOUT' });
// => { value: 'shipping' }
actor.send({ type: 'NEXT' });
// => { value: 'contact' }
npm install xstate
xstate.js.org/docs
Β
cart
shipping
contact
payment
confirmation
CHECKOUT
NEXT
NEXT
ORDER
PAYPAL
BACK
BACK
CANCEL
Identify
logical flaws
cart
shipping
contact
payment
confirmation
CHECKOUT
NEXT
NEXT
ORDER
PAYPAL
As a user, when I'm in the cartΒ and I click the checkoutΒ button, I should be on the shippingΒ page.
cart
shipping
contact
payment
confirmation
CHECKOUT
NEXT
NEXT
ORDER
PAYPAL
As a user, when I'm in the cartΒ and I checkout via PayPal, I should be taken directly to the paymentΒ screen.
cart
shipping
contact
payment
confirmation
CHECKOUT
NEXT
NEXT
ORDER
PAYPAL
Shortest path
confirmationΒ state
cart
shipping
contact
payment
confirmation
CHECKOUT
NEXT
NEXT
ORDER
PAYPAL
Shortest path
confirmationΒ state where
shipping address is provided
Statecharts
Extended state machines
idle
loading
LOAD / fetchData
success
RELOAD / fetchData
RESOLVE / assign
Actions
idle
loading
Β
LOAD
success
RELOAD
RESOLVE / assign
entry / fetchData
exit / logTelemetry
- β‘οΈ Transition actions
- π₯ Entry actions
- π€ Exit actions
Actions
start
Send for approval
sending
Β
Invocations
awaiting approval
Β
invoke / sendInvoice
invoke / waitForApproval
done (sendInvoice)
done (waitForApproval)
error
error (sendInvoice)
Retry
Compound states
loading
ready
playing
paused
loaded
next
βΈ
βΆοΈ
Parallel states
music
player
volume
playing
paused
muted
unmuted
PAUSE
PLAY
UNMUTE
MUTE
Other features
π Guarded transitions β¬οΈ Raised events β± Delayed (after) transitions βΆοΈ Eventless (always) transitions β³ History states ...
Map requirements to code
1
Code independently of frameworks
2
Make interfaces simple (read, send)
3
Use a common visual language
4
Takeaways
Final presentation state.
Questions?