State machines with xState
@AxelMSadat95
@AxelMSadat95
@AxelMSadat95
Problems with this approach
Features are difficult to implement
Time will add bugs to the project
Understandability problems
@AxelMSadat95
So, how can we improve it ?
@AxelMSadat95
State machines and statecharts
@AxelMSadat95
State machines and statecharts
A tool for modeling visualization
Simplify some complex logics and helps to understand complex systems
Give more insurance in adding new features and changes to a system
@AxelMSadat95
State machines and statecharts
Directed Graphs
stateA
stateB
stateC
stateD
@AxelMSadat95
State machines and statecharts
Finite state machine
Idle
pending
resolved
rejected
fetch
resolve
reject
@AxelMSadat95
State machines and statecharts
Finite states
Idle
pending
resolved
rejected
fetch
resolve
reject
@AxelMSadat95
State machines and statecharts
Transitions
Idle
pending
resolved
rejected
fetch
resolve
reject
@AxelMSadat95
State machines and statecharts
Events
Idle
pending
resolved
rejected
fetch
resolve
reject
@AxelMSadat95
State machines and statecharts
Initial state
Idle
pending
resolved
rejected
fetch
resolve
reject
@AxelMSadat95
State machines and statecharts
Final states
Idle
pending
resolved
rejected
fetch
resolve
reject
@AxelMSadat95
Idle
dragging
@AxelMSadat95
Idle
dragging
mousedown
@AxelMSadat95
Idle
dragging
mousedown
mousemove
@AxelMSadat95
Idle
dragging
mousedown
mousemove
mouseup
@AxelMSadat95
@AxelMSadat95
JavaScript and TypeScript finite state machines and statecharts for the modern web.
XState
@AxelMSadat95
@AxelMSadat95
Advantages
XState
Easy to understand and to implement single source of truth
Avoid side effects by making them declarative and explicit, promote purity and scalability
Visualizable because of his declarative nature
Portable and framework's agnostic due to his JSON serialization
Actor-model like approach to make many instances that communicates between them
@AxelMSadat95
Let's take another example using a Frichti component...
xState in real life
@AxelMSadat95
xState in real life
@AxelMSadat95
xState in real life
But... things aren't that simple
@AxelMSadat95
xState in real life
@AxelMSadat95
Let's see the translation to code...
@AxelMSadat95
What are problems here ?
Features are difficult to implement
Time will add bugs to the project
Understandability problems
@AxelMSadat95
So, how did we improved it ?
@AxelMSadat95
Let's check the result !
@AxelMSadat95
Ressources
Thank you !
Any question ?
twitter: @AxelMSadat95
github: @moh12594
linkedin: Axel Mohamed Sadat
xstate - ParisJS
By Axel Sadat