Introduction

[00:00:00]
>> Hello, everyone, my name is David Khourshid, and I'm really excited to be doing another workshop on state machines with XState in JavaScript. And we're gonna be discussing a lot more than version one of the workshop. So if you've taken version one, and you've taken the React's versions of the workshop, then we're going to be building on top of that.

[00:00:22]
Still working in vanilla JavaScript, but we're going to be going over a lot of things today. We're gonna be going over software modeling, when to use state machines and when to use state charts, all the fundamental parts of state machines and state charts. They're going to be useful in your everyday applications.

[00:00:40]
And we're also gonna be talking a lot about the actor model and how you could use actors to represent the different parts of your application that are communicating with each other. So like I said, my name is David Khourshid, I work at Stately, which is a company that I founded.

[00:00:56]
And we're creating a lot of tools for visualizing application logic, whether it's with state machines, or state charts, or other types of diagrams. So a lot of what we do today is actually going to be represented in the tools that we're building at Stately. I'm also on Twitter @DavidKPiano, so please feel free to follow me, reach out to me, DM me, whatever you want.

[00:01:26]
So before we get started, I wanna talk about how this workshop is going to be structured. So you should have received the link to the GitHub repo, it's at https://github.com/davidkpiano/frontend-masters-xstate-v2. The previous workshop is Frontend Masters XState Workshop. So if you do wanna go back and review that, then a lot of the material will be similar, but there's also a lot of new things in this workshop.

[00:01:55]
Now, this assumes that you have Node installed because this is a JavaScript application. And we're going to be using Vite, it's a newer tool just for bundling applications and making them run, and I found that very useful. This application is a vanilla JavaScript app, we're not using any frameworks.

[00:02:18]
And this is important because we want to keep things simple. And also we want you to learn skills that you could apply to any framework that you're using with XState, whether it's React, Vue, Svelte, Angular, any of those frameworks, or even no framework at all, if you're applying XState in different contexts.

[00:02:39]
So of course, make sure that you have Node installed and NPM installed as well. To get started, you are going to run npm install, or if you're using Yarn, you could run yarn install as well, or just yarn. And then you're going to run npm run dev. This is going to start the web server at localhost port 3000.

[00:03:00]
And so when you do that, and I'll do that real quick right now. So you just go to, all right, we're in there, so you're going to run yarn or npm install. I've already done that, so I'm just gonna run yarn dev. And so this is going to run the site at localhost 3000.

[00:03:21]
So if we go to localhost 3000, You're going to see the main page here. Now, let me show you in the repo where this lives. If you git clone the repo and bring it down to your local system, you're going to see in VS Code, you're gonna see a whole bunch of folders.

[00:03:41]
Each of these folders contains files for the exercises that we're going to be doing, but the main file that you see over here lives right here in the main repo. So this is the index.html page, and you can use this as a scratch pad. And so I really encourage you to do so.

[00:04:02]
We're going to be using this a lot for just going over the various concepts in XState and also playing around with some code before we jump into the exercises. So just to test that everything's working, if you console.log a nice Hello world!, then you should be able to see it right in the console over there.

[00:04:22]
And that's how you know that things are working. Vite is also really good at doing fast refresh, so keep that in mind. When you make changes to the files, you don't have to manually reload, you could just see it live in the actual window. Now, what we're actually building today is a real world app.

[00:04:44]
We're building a media player. And so if you go to the last exercise, which is 10 Testing, you're going to see this media player in action. Now, this is just one of your typical media players. It doesn't actually connect to media because we're not trying to play audio over here.

[00:05:02]
But it's a good starting point for if you do want to create a media player that does play media, either through the audio, the Web Audio API, or some other mechanism, then you could use this exact same app logic that we create in XState to do so. This app has a number of different functions.

[00:05:22]
You could like or unlike a song, dislike it, you could play or pause, of course, you could skip forward, and you can mute and unmute the microphone. This is also an app that's meant to be incomplete, which means it is really what you make of it. Because while we do have certain functionality that we're going to be building here, the functionality that you decide to add is something that can be added on after the fact.

[00:05:51]
So if you wanted to add advanced audio controls like changing the microphone volume, or if you want to do things like go back and go forward, or maybe display a playlist. This app is meant for you to really experiment and see all the different things that you could add, and also realize how easy it is to add once you have the app logic modelled as a state machine.

[00:06:17]
So really, this is something that is for you to play around with and is not meant to be 100% complete. Rather, each of the exercises are meant to teach different parts of XState, and state machines, and state charts, and parts of the actor model. And like I said, it's up to you to build on top of those things.