Visualize
your State Management with XState
Maya Shavin - Vue Nation 2022
@mayashavin
A LITTLE BIT about me
Senior Software Engineer
MICROSOFT
Core Team
STOREFRONT-UI
Organizer
VUEJS ISRAEL
Blogger & Book Author
@mayashavin
mayashavin.com
〞
Good programmers write code that human can understand.
– Martin Fowler
@mayashavin
〞
Code is read much more often than it is written...
– Raymond Chen
MICROSOFT DEV BLOG
@mayashavin
@mayashavin
the feature lifecycle
The states we always have to go through...
@mayashavin
idea
How PM imagine the feature
Specs
Long document describes the feature behaviors in details
Design
Design scenarios and UI that capture the specs and requirements
release
Specs turned into actual code & visually seen on client-side.
CODE
Implement the feature based on the priorities
What human thinks
What computer understands
@mayashavin
Code translates
what we imagine our feature
into
what computer can display
@mayashavin
Sequence Diagram
Flow charts
Wireframes
User flows design
Specifications
reading IS understanding
Visualizing
@mayashavin
When something happens, how do the app react?
Events
Behaviors (states)
@mayashavin
State Management
- Manage conditions of an app/ component/ feature at a given session period.
- Keep consistency of data flows.
@mayashavin
The developer way
The classic 🍑 approach to everything
@mayashavin
Basic actions
New action
New action
Bug fixes
Bug fixes
Just make it work... at the minimal
@mayashavin
Mixed up logic & events & actions
Event handlers
Callbacks
Logic
Logic
@mayashavin
Flux pattern
@mayashavin
State machines
The explicit way to handle complex UI states
@mayashavin
State
State
State
Event
Event
Event
Finites of States
Transition using Event
State data control using Actions
@mayashavin
JS State Machines
xstate.js.org
npm i xstate
Vue, React, Svelte
@mayashavin
const fetchMachine = createMachine({
id: 'fetch',
initial: 'idle',
context: { retries: 0 },
states: {
idle: {
on: {
FETCH: 'loading'
}
},
loading: {
on: {
RESOLVE: 'success',
REJECT: 'failure'
}
},
success: {
type: 'final'
},
failure: {
on: {
RETRY: {
target: 'loading',
actions: assign({
retries: (context, event) => context.retries + 1
})
}
}
}
}
});
@mayashavin
import { interpret } from 'xstate';
const machine = createMachine({/* configuration */})
const service = interpret(machine)
service.onTransition(newState => {
/* do something during transition from one state to another */
}).start();
service.send('EVENT');
import { myMachine } from '../machines/myMachine';
import { interpret } from "xstate";
import { useActor } from '@xstate/vue'
const service = interpret(myMachine).start()
export default {
setup() {
const { state, send } = useActor(service)
const transition = () => send('EVENT')
return { state, transition }
}
}
Vue
Demo
Seeing is believing... as always
@mayashavin
Vue 3 Pinia XState XState/vue XState/inspect XState/graph
Requirements
- Define state machine Wizard for cart checking out cart
- Visualize the state machine for wizard steps
- Guarding steps with condition (shipping address)
- Auto generate visual flow for the wizard
@mayashavin
State management
State machine - XState
VueX
Pinia
Architecture
@mayashavin
Start planning first, before coding
REsources
@mayashavin
Thank you
@mayashavin
mayashavin.com
Visualize your state management with XState
By Maya Shavin
Visualize your state management with XState
- 909