3. Building a white noise machine with state machines
Laura Kalbag
@
LauraKalbag
Collaborative
software with
state machines
(HELLO)
4. Separation
Laura Kalbag
@
LauraKalbag
- working in tech for 15 years with a variety of teams
- worked in design, development, both managing projects and working for managers
- one of my biggest pet peeves is the separation created between our areas of expertise
- when there’s realistically so much overlap and so often we are doing bits of each others’ work
- a designer makes decisions that impact engineering
- engineers frequently make design decisions to
fi
ll in missing details
- project managers do the same
- and we’re all constantly passing documents around with feedback and requirements
5. Laura Kalbag
@
LauraKalbag
- And sure there’s better ways to communicate, processes we can employ, egos we can set aside
- But sometimes we just need tools to help us get there faster
- And because this is an engineering event I’m going to come at this from an engineering perspective
- And we’re going to talk about managing your application logic
6. Laura Kalbag
@
LauraKalbag
- Let’s start o
ff
with some issues we
fi
nd around state management
- [cl] complexity - the bigger the app, the harder it is to manage state. Even the smallest feature can introduce a lot of complexity
- [cl] data
fl
ow - passing state between components can get complicated and hard to follow
- [cl] concurrency - when di
ff
erent components are interacting with the same state simultaneously, you get into tricky situations
- [cl] testing and [cl] debugging - the more states you have, the harder it is to isolate and reproduce state-speci
fi
c issues. If you’ve used a lot of booleans for your state,
you know what I mean.
7. Laura Kalbag
@
LauraKalbag
- Let’s be honest, a lot of the time
- the sum of your app logic is essentially stored in the engineer’s head
(and it really isn’t easy to communicate the stu
ff
that’s stored in your head)
(especially if you’re out of o
ffi
ce or get another job)
8. Laura Kalbag
@
LauraKalbag
My white noise machine app
- I got one to help soothe my dog’s anxiety during
fi
reworks and thunderstorms
And think about what my state situation might look like
[cl - read states]
This is already getting pretty complicated,
so what tools am I going to recommend? (The clue is in the title of my talk)
9. Finite state machine
Laura Kalbag
@
LauraKalbag
Play
Pause
Paused Playing
Enter
fi
nite state machines.
- Raise hands (and keep your hand up) if you’re familiar with state machines?
- Put your hand down if you learned about state machines studying computer science
10. Finite state machine
Laura Kalbag
@
LauraKalbag
Play
Pause
Paused Playing
- a
fi
nite state machine model that can only be in one state at a time (paused or playing)
- can change from one state to another in response to an input (play and pause)
- states and transitions (and events)
12. Finite state machine
Laura Kalbag
@
LauraKalbag
Play
Pause
Paused Playing
- State machines are also an excellent visual representation
- of what your code should be doing
- So I’m going to create a state machine for my white noise app
13. State machines can be used
anywhere in your stack.
Laura Kalbag
@
LauraKalbag
- [Pause] Now despite the frontend-yness of my example, state machines can be used anywhere in your stack
- (I went to art school, I didn’t study computer science, I like making pretty interactive things!)
- (I’ll show you some more examples later)
15. Laura Kalbag
@
LauraKalbag
🔗 https://sky.stately.ai/laura
- actions -
fi
re-and-forget side e
ff
ects
- we’ll add the triggers for our machine here, and we can implement the functionality later
- [cl]
- show buttons
- hide buttons
- so far, very
fi
nite state machine
- [explain URL]
16. Laura Kalbag
@
LauraKalbag
🔗 https://sky.stately.ai/laura
- adding statecharts features
- so now I want to introduce you to statecharts, which is a visual extension to state machines that help us model more complex logic
- [cl]
-
fi
rst up: parent and child states - hierarchy!
- inside our power on state, we want our di
ff
erent sound options
- and each child state needs an initial state
17. Laura Kalbag
@
LauraKalbag
🔗 https://sky.stately.ai/laura
- [parallel states]
- another useful feature of statecharts is the ability to have concurrency
- in the form of parallel states
- [cl]
- so I’ll make my sounds children of a parent sound state
- and I’ll add a light state and a volume state as parallel states
18. Laura Kalbag
@
LauraKalbag
🔗 https://sky.stately.ai/laura
Now I’m just going to quickly jump to a version I made earlier so you don’t have to watch me add more child states and entry actions
[explain this machine]
[explain the di
ff
erence between state machines and statecharts and why I use them interchangeably]
19. Laura Kalbag
@
LauraKalbag
🔗 https://sky.stately.ai/laura
Now I want to show you self-transitions
These are transitions that can
fi
re o
ff
actions but return to the same state
This is particularly useful for updating our context
[cl]
We’ll do this for volume up and volume down on our volume state
And add actions
21. Laura Kalbag
@
LauraKalbag
the actor model
Another concept that works really well with statecharts is the actor model where everything in the system is an actor
- an actor can send and receive events
- and change its behaviour based on those events
- So we can make our logic more modular and maintainable
- by breaking it into actors that communicate with each other
Basically when each statechart is running, it is an actor
22. Laura Kalbag
@
LauraKalbag
🔗 https://sky.stately.ai/laura
So I’m going to make the audioplayer for the white noise machine its own actor
- that means we can maintain it separately
- that’ll make it much easier to test
- and also if we want to add its own features, like bluetooth speaker compatibility
- [cl]
- I’m going to invoke that actor when we power on
- and I’ll add an entry action to send play to the audio player
- and an exit action to send pause when we exit power on
23. Laura Kalbag
@
LauraKalbag
🔗 https://sky.stately.ai/laura
- Having a statechart that is also executable code means you can do cool things like simulating your machine
- [cl]
- I can walk through the machine as it will work live
- The blue events are the events available to take when in the current state
- And how we can easily spot any issues (no toggle back to power o
ff
)
25. Statecharts can be used
anywhere in your stack!
Laura Kalbag
@
LauraKalbag
- I said earlier that statecharts can be used anywhere in your stack
- And now hopefully you can see the potential for state machines for your UI
- And here’s some backend work
fl
ow statecharts
26. Event-based actor
Laura Kalbag
@
LauraKalbag
- Here’s an event-based actor
- It’s a common example of container environments where some of your services (aka actors) may not be exposed via a resource URI,
- and are accessible by submitting an event to the underlying container events manager.
28. Laura Kalbag
@
LauraKalbag
Credit check
- And here is a serverless work
fl
ow
- where you need to integrate with an external microservice to perform a credit check
- (Don’t blame me!)
[ end of section ]
29. Diagrams
are great!
Laura Kalbag
@
LauraKalbag
- Through this demo you might start thinking
- “wow, this is easy to understand”,
- “Laura doesn’t even have to explain much”,
- “even Jim would understand this…”
- [cl] It’s because diagrams are great!
36. The benefits
of statecharts
Laura Kalbag
@
LauraKalbag
- Statecharts provide all the bene
fi
ts of diagrams but as executable code
- Having your application logic be
- both visual and executable
- makes for living documentation
- and a logical source of truth
- everybody understands it, and it can be kept up to date
37. The benefits
of statecharts
Laura Kalbag
@
LauraKalbag
- Going back to the problems we have in software and development:
- The modular and hierarchical structures in statecharts h
- andle complexity better
- The explictness and clarity
- make complexity easier to understand
- The visual representation is great for internal documentation
- And we have a clear structure for testing and debugging
38. Laura Kalbag
@
LauraKalbag
🔗 https://sky.stately.ai/laura
Just added a description and colours to make my machine more useful when I share it with my team
[cl] And if I go to export this as code, you’ll see I can use TypeScript or JavaScript or JSON
I’m going to show you using the XState version 5 beta
And this whole machine is a JavaScript object
And at the end you can see where we can add implementation details for our actions, actors, and guards
39. Laura Kalbag
@
LauraKalbag
🔗 stackblitz.com/edit/nnbfjk
[cl] Now I’m going to export that code to StackBlitz
where it’ll set me up with a little demo app to walk through my machine states
by pressing event buttons (a lot like simulation mode)
40. Laura Kalbag
@
LauraKalbag
🔗 stackblitz.com/edit/nnbfjk
Now if I jump to a version I made earlier [cl]
I’ve got my machine here, exactly the same
Here you can see I use the machine.provide method to provide implementations for the actions I’ve created in my machine
And I can do the same for my actors
And my guards
And if I play my machine…
concurrency works etc
Oops, I’ve still got the light colour enabled when I power o
f
41. Laura Kalbag
@
LauraKalbag
🔗 stackblitz.com/edit/nnbfjk
- Because I’ve got my logic separate from my implementations, I can return to my state machine [cl]
- Add another instance of the removeColour action as an exit action on the light state
- I’m also going to move setVolume to powerOn
- Copy my machine back to the machine.js
fi
le
- And tada the light now turns o
ff
when I power o
f
42. Laura Kalbag
@
LauraKalbag
- Do you always need a state machine?
- No, especially if you have
- Simple and linear logic OR
- Small and isolated components
43. Laura Kalbag
@
LauraKalbag
- When do you need a state machine or statechart?
- The rest of the time… 😁
- Complex systems
- When you want make it easier to document, debug, and test
- When you need to be able to communicate your app logic and share one source of truth with your team
44. Everyone gets a better night’s
sleep with state machines.
Laura Kalbag
@
LauraKalbag
- [cl] Everyone gets a better night’s sleep with state machines.
![Building a white noise machine with state machines
Laura Kalbag
@
LauraKalbag
Collaborative
software with
state machines
[title slide]](https://image.slidesharecdn.com/weyweyweb2023laurakalbagcollaborativesoftwarewithstatemachines-withnotes-231213173423-af2676fb/85/Collaborative-software-with-State-Machines-Laura-Kalbag-1-320.jpg)
![Collaborative
software with
state machines
Building a white noise machine with state machines
Laura Kalbag
@
LauraKalbag
[cl to test audio]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)