Introduction

[00:00:00]
>> My name is David Khourshid, and I'm really excited to be giving this workshop state modelling with XState in React, basically using XState in real-world applications. This is the second XState course. I highly recommend you watch the first one as well, but we're gonna be covering some stuff from the first one in the second one.

[00:00:21]
The main purpose of this workshop is we're going to be investigating how we could use XState and just generally the idea of software modeling with state machines and state charts in real-world apps. And we're gonna be doing that by working on a real-world app, which should be available at this GitHub repo.

[00:00:42]
It's at github.com/davidkpiano/frontend masters react workshop, well, frontend-masters-react-workshop. This is essentially a Create React App app. It's using the newest version of Create Ract App, so you don't have to worry about that. And the installation process should be the exact same as Create React App itself. You would run either npm install or yarn install if you're using Yarn, and then you run yarn start to actually start the app.

[00:01:15]
At any time, if you have questions, feel free to chime in in the chat. This workshop is for you and it's about you. So I want to help you out with any of your real-world React or whatever else you're using with XState. Or even if you're not using XState yet and you want to just see the advantages of using state machines and state charts.

[00:01:40]
And it's just this strict declarative modeling in your frontend apps, please feel free to ask any questions and I'll be more than happy to answer them. So also a note, this is using the latest version of XState, which is XState 4.14, I believe. In fact, I just released a minor version yesterday, but don't worry, everything is basically the same.

[00:02:08]
And speaking of the same, by the end of the year, this year being 2020, the fifth version of XState will hopefully be at least in beta or release candidate. I want to let you know that everything you learn in this course will be applicable to XState version 5.

[00:02:26]
The main API is not changing, at least not much. Version 4 code will largely be compatible with version 5. The biggest changes are going to be just around, well, actually, they're not really big changes. It's just more about simplification of the API and also how things work to make XState more SCXML-compatible.

[00:02:50]
If you're not familiar with what SCXML is, you go to w3.org/, well, actually let me just search it cuz I don't have the exact URL memorized, but w3.org/TR/scxml. And it stands for state chart XML. And this is basically the giant spec that XState follows. This is a specification which is a W3C recommendation.

[00:03:19]
So it's pretty much as official as it gets. And it's just this way of defining state machines and state charts in XML. Obviously, XState doesn't use XML, but it follows this spec pretty closely. SCXML is, of course, based on state charts by David Harrel, which was created in 1989.

[00:03:42]
So all of these ideas are basically more than 30 years old. So if you want to dive deep into how XState works, I do recommend reading the spec. It is a very long spec. But basically, if you have the free time, you're going to notice a lot of similarities between what the spec says and the API of XState, and that's because XState does follow the spec.

[00:04:09]
In other words, XState tries to stick to old and established ideas such as state machine, state charts, and this SCXML spec. And it doesn't try to invent anything new. And you're gonna see that as a pretty prominent theme throughout today. Nothing we're doing is new at all. And that's one of the beauties about using state machines and state charts for software modeling.

[00:04:37]
Okay, so let's dive right into the code base. Hopefully, you clones the repository, which you could do so here in GitHub. You click Code, clone this gitclone.url and save it to your local system. And so let's take a look at the code. The way that this is broken up is once you run yarn install and yarn start or npm install and npm start, just gonna do yarn start over here to show you.

[00:05:09]
This is going to run a local server that hosts this app on localhost 3000. And so this is what you should see when the app loads. You're gonna see Frontend Masters React and XState Workshop, as well as a bunch of exercises over here. Now, this main screen is also one that you could use as a scratchpad.

[00:05:32]
And you'll notice that we have some code over here that we're going to be playing around with during each of the lessons just to demonstrate each of the concepts here. Nothing works here yet, but we'll change that as we go through each of the lessons. To do an exercise, you just click on the exercise link and you'll see it changes the link up here in the URL too.

[00:05:55]
So this is Exercise 00-Creating a state machine. And so the goals in the exercise are going to be outlined on the left-hand side. Now if you want to see the final version or basically the answer sheet for each of the exercises, those are located in the files that have .final.js.

[00:06:16]
So in this case, for exercise 00, you'll see Timer.final.js and timerMachine.final.js. Since this is a learning experience, I don't really expect you to struggle too hard with the exercises. If you get stuck, please take a look at the .final.js files and see if your way of thinking was correct or maybe you had to change a couple of things.

[00:06:44]
In order to see this final machine, what you could do is in the workshop file, change the imported timer from /Timer to /Timer.final. And what you'll see is, for example, exercise 00 solution. And you'll see how things are basically supposed to look when you're done with the exercise.

[00:07:13]
So that's how the exercises are going to work. Throughout this course of the workshop, we're basically working our way towards building a complete timer app. And so you could see that when you go to /complete, this is what we're ultimately building. It's a timer app, which if you have an Android device, this is going to be pretty, pretty similar to the timer app in the Android device.

[00:07:40]
You could enter a time here, press Enter. This is a timer that you could pause and play and add a minute to. And you're also going to be able to add multiple timers as well and see all of them running at the same time. So that's the goal of the workshop.

[00:07:59]
And yeah, we're gonna be talking about basically how to use XState and React and state machines and state charts to build this app and learn how to use state machines in the real world.