Maya Shavin
Smart & Controllable UI
with
Maya Shavin
State management
MobX
manage state flow of different user interface controls
State management
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
Promises
Async/Await
Callbacks
Observables
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 & 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
})
}
}
}
}
});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
Media Developer Expert (MDE)
THANK YOU!
Plan. Model. Develop
Smart & Controllable UI with (X)state machine
By Maya Shavin
Smart & Controllable UI with (X)state machine
UI components are built on user flows or state graphs. To manage these states, we usually resolved to boolean variables system like isLoading. But this proves to be buggy and hard to maintain as the codebase grows. There is a better solution. In my talk, we will explore how to fully control our app's states and develop a more adaptive UI system to users' behavior with state machines, statecharts and more.
