Maya Shavin - Vue Nation 2022
@mayashavin
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 states we always have to go through...
@mayashavin
How PM imagine the feature
Long document describes the feature behaviors in details
Design scenarios and UI that capture the specs and requirements
Specs turned into actual code & visually seen on client-side.
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
@mayashavin
When something happens, how do the app react?
Events
Behaviors (states)
@mayashavin
@mayashavin
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
@mayashavin
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
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
Seeing is believing... as always
@mayashavin
Vue 3 Pinia XState XState/vue XState/inspect XState/graph
@mayashavin
@mayashavin
Start planning first, before coding
@mayashavin
@mayashavin
mayashavin.com