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.
- 218