![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/7635580/vue.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Maya Shavin
for UI
Maya Shavin
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/mayashavin/image/upload/v1634718495/logos/51KCsPEiaaL._SY445_SX342_QL70_FMwebp_.webp)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Composition API allows us to build component differently
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8238510/Screen_Shot_2021-02-14_at_22.06.22.png)
Set local state
Update local state
Render component
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8238544/kitty.gif)
Multiple clicks?
Loading state?
Error state?
Disabled?
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8238510/Screen_Shot_2021-02-14_at_22.06.22.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8238576/Screen_Shot_2021-02-14_at_22.55.24.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8227642/what.gif)
Bottom š
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Basic actions
New action
New action
Bug fixes
Bug fixes
Bottom š
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Difficult to maintain
Difficult to test
š
Hard to understand
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8227609/errorcat.gif)
State Machines
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Finite
Deterministic Finite Automata
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8227667/Screen_Shot_2021-02-11_at_13.46.12.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8227690/9e206d0b4d772b0db2077a3817b091ad.gif)
Deterministic
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Finite
Automaton
one initial state
finite number of states
finite number of events
transition map triggered by events
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8238616/event.png)
State machines & UI ?
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8239455/1be75efd-3fbe-4c08-8dff-aca6b7e9a111.jpg)
UI phases/components are dependent
Transition between phases based on actions
Actions are events triggered
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Building user interfaces === building userĀ Ā Ā Ā Ā Ā
diagrams
graphs
trees
flows
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
State machines
is used everywhere
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Promises
Async/Await
Callbacks
Observables
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8238616/event.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/mayashavin/image/upload/v1561925029/CSSinJS/javascript.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/mayashavin/image/upload/v1561925029/CSSinJS/javascript.png)
State machines & state charts for modern web
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/7870672/220px-React-icon.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/7635580/vue.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/7635579/23617963.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8239639/Screen_Shot_2021-02-15_at_10.59.42.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Create
Interpret
Execute
State machine/chart
Manage
State machine/chart
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Machine
transition
Events
State machine/chart
Actions
States
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8238616/event.png)
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
})
}
}
}
}
});
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/7635580/vue.png)
@xstate/vue
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8239686/toggle.gif)
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' }
}
}
});
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8240224/enough-blah-blah.jpg)
Advantages of XState
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
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
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
State machine/chart
console.log(Maya)
![](https://res.cloudinary.com/mayashavin/image/upload/w_500,h_500,c_thumb,r_max/v1571089888/mayashavin/Maya_new.png)
Senior Software Engineer
Core maintainer of StorefrontUI
NuxtJS Ambassador
Everything about Frontend/Web
![](https://res.cloudinary.com/mayashavin/image/upload/v1567333685/StorefrontUI.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Google Developer Expert
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8851721/Microsoft_logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/8851722/Google__G__Logo.svg.png)
Vue.js Israel Organizer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/6124470/logo-vuejsil.png)
THANK YOU!
![](https://res.cloudinary.com/cloudinary-marketing/image/upload/v1595456749/creative_source/Logo/PNG/cloudinary_logo_white_0720_2x.png)
Plan. Model. Develop
XState for UI in Vue
By Maya Shavin
XState for UI in Vue
- 1,702