Introduction To State Machines And XState With Kyle Shevlin

Check out Kyle's egghead.io course Introduction to State Machines Using XState to dive deeper with state machines!

Transcript

Taylor Bell: Hey Kyle, thanks for joining me today.

Kyle Shevlin: Hey Taylor. Thanks for having me on.

Taylor Bell: Yeah, so I wanted to talk to you about your new course, it's an introduction to state machines and ex state. And so what is a state machine?

Kyle Shevlin: A state machine is a data structure that essentially allows us to enumerate all the possible states of a system and all the transitions between those states. It's a declarative way of making your state a graph. And I know that's a big computer science term to some degree, but it's a really robust way to define how we move from state to state in a program.

Taylor Bell: Cool. And so how'd you get interested in state machines?

Kyle Shevlin: Yeah, I listened to David [inaudible 00:00:44], often more better known as David K Piano on Twitter. His, talk at React Rally in 2017 was my first introduction to it. And during that talk, I just remember some light bulbs going off on my head. You know, I've been given designs from designers for years and never put it together that each of these is in finite individual state.

Kyle Shevlin: And then just over the last few years I kind of tinkered with it and I really wanted to finally sit down and get to know it. And what better way to do that than to like choose it as a course material and bust your butt and learn it and share it.

Taylor Bell: Cool. And so when somebody takes the course, what's like the journey that you take them on? Like what happens in the course?

Kyle Shevlin: Yeah, so I start off with a function that just represents a simple light bulb. And the reason I do that is we quickly realize a light bulb isn't actually a boolean. It has more than two states. It's not just on or off. A light bulb can be broken. And as soon as we start trying to accommodate for the fact that a light bulb can be broken, we get into this place where we might have impossible states, we might have our function lead us to a place where the light bulb is both lit and broken. And we know that can't happen.

Kyle Shevlin: And this happens all the time in our code, we write these booleans to try and control state or we manage state in some way and we're doing all these conditional checks when really what we're doing is trying to avoid states that shouldn't even be possible in the first place. So doesn't it make sense to instead enumerate only the possible states? So the next lesson teaches how do you do that? How do you just enumerate states? And you know, I write a function with a switch case that moves us from a lit to unlit or lit to broken but never to an impossible state.

Kyle Shevlin: And you know, that could work in a lot of situations, but if you had something particularly complex that you were working on in a program or an app, it wouldn't scale super well. Like you'd have to rewrite this every time. You'd have to think about this every time state machines and the X state library itself comes in and gives us a structured and defined way to enumerate states and those transitions how to fire events to this machine. And you'll start to learn these patterns as you go through the course. That will show you how to do this over and over again and really kind of come up with a solid way to declaratively manage state throughout your programs. And I keep saying programs because I think in our world and JavaScript we so often think about state only as like maybe a couple of variables we're keeping in a function, you know, but it can really be as small as like a function that might have several states who are returning. Or it can be as big as a whole system in your application that you're controlling.

Kyle Shevlin: Part of the lessons eventually show a little bit of how to compose those things together. Not really an intro level thing. I plan to make more material and, and release it as like a playlist eventually to do some of that. But I think the intro is more than enough to give people the education they need to get started and probably frankly learn a lot of that stuff on their own. They'll be well prepared for that.

Taylor Bell: Cool. So do you have any specific next steps that somebody should take after your course?

Kyle Shevlin: Sure. When they finish the course, I would recommend, you know, it's probably a good idea to go check out the docs themselves. You know, I've read through them several times. There's several gotchas in there that I go over a few in the course but would be worthwhile to make sure yourself. Like one of the ones I cover for example is that there's this concept of context in X state.

Kyle Shevlin: It's how they deal with infinite states. And it might be confusing how you update that context the first time you do it. If you're trying to do it in some kind of sequence and you don't understand what's going on under the hood. I go over that in a lesson. But reading the docs would help. They also just released 4.7 which has a few new things that I wasn't able to cover in the course. Things like wildcard descriptors and better type systems for using it with TypeScript and that kind of stuff.

Kyle Shevlin: So yeah, I think it's definitely worth checking out. You know, and I think I put in the repo, like a link to a code sandbox that has like a little starter thing. You know, if you feel like doing it, start playing around with it and give it a try.

Taylor Bell: Cool. Well thanks so much for joining me today and looking forward to checking it out.

Kyle Shevlin: Thank you.