React Hooks
vs
Reactive State Machines
Farzad Yousef Zadeh
@farzad_yz
✈️
💻
🇫🇮
@farzad_yz
🔭
HSL Zone
@farzad_yz
Detect zone based on Geolocation
Watch for Geolocation changes
Send local notification on zone change
Spec
Manually re-detect zone
Geolocation Support
Manual refresh should turn off watching
Errors
Hidden Evils
Notification Support
Only when watching location is on and there is a change in zone
( Zone detection, Geolocation watch, Notification)
Zone detection
Initialize with Notifocation permissions
Derived State
Attempt 1
Irrelevant grouping
Explicitness
View-State Mapping
View
Side Effects
Interpreter Logic
Ingredients
State
...rest
HOOKS
Side effects
(Event, Action)
Guard in Execution
Change Detection
I'm sorry that I long ago coined the term "objects" for this topic because it gets many people to focus on the lesser idea.
The big idea is "messaging"
Reactive Statecharts
Finite amount of states
Only reacts to events defined on the state
Explicit definition at CONSTRUCTION
FSM
Start from initialState
Transitions on events
Statechart extends FSM
Conditional transitions
Explicit definition at CONSTRUCTION
Statechart
Structure
Extended state
Side Effect Execution
Internal Actions
External Actions
Activities
Stream callbacks
Invoked Services
State + Event => Action
Change Detection
vs
State mapping
You say what state you need, everything else follows as defined
Things happen when they are supposed to happen
Invalid things become impossible
Feel safer in adding new features
Lessons Learned
Web is broken compared to mobile
Safari is a PITA
Mobile Safari is even more PITA
Statecharts kept the logic the same
Let's see it in action!
Thank You!
Farzad Yousef Zadeh
@farzad_yz
React Hooks
vs
Reactive State Machines
Farzad Yousef Zadeh
@farzad_yz