VueConf US - 2018 New Orleans
VueConf US - 2018 New Orleans – Lightning Talks
Enhancing
f o r
Complex
Application State
PATRICK SEDA - @pxtrick
VUE
VUE AND
VUEX
VUEX
Slide 2
Slide 2 text
WHO?
@pxtrick
PATRICK SEDA
MOBILE & WEB ARCHITECT
Slide 3
Slide 3 text
APPLICATION ARCHITECTURE
Slide 4
Slide 4 text
@pxtrick
Actions
Mutations
Getters
Component
Component
Component
APP ARCHITECTURE
UI
State
VUEX
Backend API
SERVICES
Slide 5
Slide 5 text
@pxtrick
Actions
Mutations
Getters
Component
Component
APP ARCHITECTURE
UI
State
VUEX
Component
Component
SERVICES
Backend API
Slide 6
Slide 6 text
@pxtrick
Actions
Mutations
Getters
Component
Component
Component
APP ARCHITECTURE
UI
State
VUEX SERVICES
Backend API
Slide 7
Slide 7 text
@pxtrick
Actions
Mutations
Getters
Component
APP ARCHITECTURE
UI
State
VUEX
Component
Component
Component
Component
SERVICES
Backend API
Slide 8
Slide 8 text
FINITE STATE MACHINE
Slide 9
Slide 9 text
@pxtrick
FINITE STATE MACHINE
WHAT DOES
This Little Thingy
DO?
Slide 10
Slide 10 text
@pxtrick
FINITE STATE MACHINE
OFF
FAST
MEDIUM
SLOW
Slide 11
Slide 11 text
@pxtrick
FINITE STATE MACHINE
OFF
FAST
MEDIUM
SLOW
Pull
Chain
Pull
Chain
Pull
Chain
Pull
Chain
Slide 12
Slide 12 text
@pxtrick
FINITE STATE MACHINE
FSM
- States
- Events / Transitions
- Start State
APP
1. APP EVENT ‘X’ HAPPENS
2. HEY FSM, GIVE ME THE STATE
TO WHICH ‘X’ TRANSITIONS!
3. APPLY THE NEW STATE
Static View:
Dynamic View:
Slide 13
Slide 13 text
@pxtrick
Actions
Mutations
Getters / Triggers
Component
Component
Component
UI
states
Event Router
FSM
FINITE STATE MACHINE
VUEX
Store
FSM
Slide 14
Slide 14 text
@pxtrick
PATRICK SEDA
Cheers!
speakerdeck.com/pxtrick