XState by Example: June 2024 Update

Hey there!

I hope you are doing well! This is a quick recap of my changes to XState by Example in the last weeks.

The Video Player Example

I released the most complex example on XState by Example: a video player.

The implementation was quite challenging. Platforms don’t behave the same, and a video stream is unstable by definition. Making the video player go fullscreen doesn’t work on iOS as it works everywhere else; you must use the proprietary function webkitSetPresentationMode.

The video can also be controlled from outside the web page itself. Users can use their device’s controls to play and pause the video and seek at any time.

For the state machine to stay in sync with the video element, I had to take a defensive approach by always listening to potential changes emitted by the browser, like when the video element starts playing:

<video
  onPlay={() => {
    send({ type: "play" })
  }}
/>

Then, the state machine must go to the Playing state to stay in sync:

on: {
  play: {
    target: "Playing",
  },
}

I released a video on YouTube in which I review my implementation and give you practical advice, notably about parallel states and delayed transitions:

XState at Expo

I've searched what open-source projects use XState on GitHub and found that Expo uses it in the Expo Updates package.

I contacted the developer who introduced XState in the Expo Updates package, Doug Lowder, who agreed to discuss their implementation with me!

I released a review of their state machine implementation with parts of the discussion with Doug:

I also released the full interview. We had a delightful discussion about state machines, native development, and React Server Components—which will change how we make React Native applications.

XState in the Wild

I want to do more interviews with people working with XState. These interviews will be released on my new podcast, XState in the Wild.

XState in the Wild is available in all podcasting applications. Stay tuned for more interviews!

Aaron Francis published his recent interviews with SQLite experts on YouTube and cross-posted them on a podcast, Database School. That made me want to cross-post to a podcast, too. That's how XState in the Wild was born!

Do you use XState and want to discuss it, or do you know someone who would? Please get in touch!

XState in the Wild

XState in the Wild is a podcast hosted by Baptiste Devessier about how XState is used across the tech industry to solve complex problems elegantly.

Thanks for reading! Feel free to reply to this email if you have questions or suggestions. Feedback helps me do better!

Best,
Baptiste