

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,511