Finite State Machine for Server Driven UI

1. Finite State Machines
React Day Bangalore
Machina and its use case with Server Driven UI
Dipti Roy
@diptiroy23
@ PayPal

2. What are
finite state
machines?

3. PITCH
DECK
V
1.0
Server Driver UI
Independent Business Logics
Reusable React Components
(not increasing bundle size)
Highly Configurable
What we will
achieve with it ?

4. Machina.js is a JavaScript framework
for highly customizable finite state
machines (FSMs).
Machina

5. Step 2
FDD
Step 1
FSM
Basics
(Finite State Machine)
Building the transitions
(Flow Decision Descriptor)
unique identifier for the flow

6. FDD
Flow
Decision
Descriptor

7. FSM

8. Define the initialState
Define child states
So how does
the one state
machine will
work ?

9. The flow
Handlers
Executors
nextState
Key identifier for the flow
Parent and child FSM
initialState and transition
states

10. Advantage
The React components can be
moved around in the UI depending
on the requirements.

11. Thank You