Maya Shavin
for UI
Maya Shavin
Composition API allows us to build component differently
Set local state
Update local state
Render component
Multiple clicks?
Loading state?
Error state?
Disabled?
Bottom š
Basic actions
New action
New action
Bug fixes
Bug fixes
Bottom š
Difficult to maintain
Difficult to test
š
Hard to understand
State Machines
Finite
Deterministic Finite Automata
Deterministic
Finite
Automaton
one initial state
finite number of states
finite number of events
transition map triggered by events
State machines & UI ?
UI phases/components are dependent
Transition between phases based on actions
Actions are events triggered
Building user interfaces === building userĀ Ā Ā Ā Ā Ā
diagrams
graphs
trees
flows
State machines
is used everywhere
Promises
Async/Await
Callbacks
Observables
State machines & state charts for modern web
Create
Interpret
Execute
State machine/chart
Manage
State machine/chart
Machine
transition
Events
State machine/chart
Actions
States
const fetchMachine = Machine({
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
})
}
}
}
}
});
@xstate/vue
inactive
toggle
active
toggle
import { Machine } from 'xstate';
export const toggleMachine = Machine({
id: 'toggle',
context: {
/* some data */
},
initial: 'inactive',
states: {
inactive: {
on: { toggle: 'active' }
},
active: {
on: { toggle: 'inactive' }
}
}
});
Advantages of XState
Code reusability
Test coverage
Code scalability & maintenanceĀ
Better code design & planning
Easy to debug and spot bugs
Visually clear view of the code flow
Resources
State machine/chart
console.log(Maya)
Senior Software Engineer
Core maintainer of StorefrontUI
NuxtJS Ambassador
Everything about Frontend/Web
Google Developer Expert
Vue.js Israel Organizer
THANK YOU!
Plan. Model. Develop
XState for UI in Vue
By Maya Shavin
XState for UI in Vue
- 1,772