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