Farzad Yousefzadeh
Lead developer @epicgames. Core @statelyai. Coach @mentorcruise. ❤️ Statecharts, Finite State Machines, and XState.
The Actor Model:
a new mental model
for React
Farzad Yousefzadeh
Farzad Yousefzadeh
Senior Frontend Engineer @epicgames
Into State machines and Statecharts
What is Actor Model?
interface Actor {
state: State;
send(event): void;
receive(event): void;
}What is Actor Model?
Integrations are key
- Bugs in units are easy
- Bugs in integrations are hard
Actor Model vs Redux
Identifying Actors in the system
- Retrieve source with id
- Prefill the editor with the retrieved source
- Update the source when save is pressed
- Parse the source
- Preview the parsed source
- Sign in
- Sign out
- Toast for errors
Source actor
Editor actor
Preview actor
Auth actor
Notification actor
Retriece source with ID
Update the source when save button is pressed
Prefill the editor with the retrieved source
Parse the markdown source
Preview the parsed markdown
Sign in
Sign out
Toast fancy messages
- Retrieve source with id
- Prefill the editor with the retrieved source
- Update the source when save is pressed
- Parse the source
- Preview the parsed source
- Sign in
- Sign out
- Toast for errors
Auth actor
Source actor
Editor actor
Preview actor
Notification actor
Sequence Diagrams and Scenarios
Reading ID and Source
Saving source
Edit markdown
Check user session and user info
Compiling and previewing
Actor Model and Feature growth
Only spawn needed actors
Complexity comparison and dynamically spawning actors
Anything can be an actor
if it can send an event, receive an event, have a private state, then it's a duck Actor
Advantages of Actor Model
- Simple
- Observability
- No race condition
- Scalable solution
- Works well with web APIs
- Actors are composable
- Easier to diagnose
- Isolated logic outside of React tree
Additonal Resources
Thank you.
Actor Model
By Farzad Yousefzadeh
Actor Model
A new mental model for modeling React applications at scale @React Finland 2021
