Construct Sturdy UIs with XState With Isaac Mann

Isaac Mann was excited about XState as soon as he heard about it from a video by David Khourshid. State machines are an old concept that have been rigorously tested, they also let you see things visually and be intentional about how your state changes.

You're probably already using state machines in your application code without even knowing it! After watching Isaac's course, Construct Sturdy UIs with XState, your homework is to find all those places in your code that are implicit state machines and make them explicit.

Be sure to check out Isaac's egghead.io course Construct Sturdy UIs with XState!

Transcript

"Construct Sturdy UIs with XState With Isaac Mann" Transcript

Transcript

Taylor Bell: Hey, Isaac. Thanks for joining me today.

Isaac Mann: Glad to be here.

Taylor Bell: Cool. So I wanted to ask you a couple of questions about your new course on building sturdy UIs with XState. What is XState?

Isaac Mann: Well, XState is a library that you can use to make state machines and use them inside of your applications. It can be used with React, or Angular or any modern framework or even just plain JavaScript.

Taylor Bell: Cool. And so what is a state machine?

Isaac Mann: Yeah, okay, so that's the longer question. So the state machines are ways of managing state that goes from one specific state to another. So you can think of the states of your application as these series of circles that represent the states that are in your application and then you draw arrows between them to describe the transitions, which are the ways you move from one state to another. And the state machine is all of those circles and arrows together that describe how your state changes over time inside your application.

Taylor Bell: Cool. So how did you first find out about state machines?

Isaac Mann: Well, I watched a video by David Khourshid and he was just showing how to use XState in your applications and it seemed really exciting. I actually first heard about the idea of state machines in university and it was a very academic concept and I never used it in real code until I heard about XState that David wrote. And it was just really exciting to me to see that, oh, this academic concept that has some rigorous logic behind it is actually applicable and can be really useful. So that was what got me first excited about it.

Taylor Bell: Cool. And so how are they useful? So what will somebody take away from your course?

Isaac Mann: So the most useful thing about state machines is that ... Well there are three things that I really like about states machines. It's an old concept so it's been tested and it's rigorous. It helps you to see things visually and so you can have a visualization of how your state changes over time and it's a well structured so that you can be intentional about how your state changes. So if you set up your states in your visual diagram and you explicitly create the transitions between them, if you don't draw transition there, it's not possible for it to happen. So you can't accidentally have a transition because events get fired out of sync or you didn't plan for something. It just won't let it happen.

Taylor Bell: What's the material in your course? What is the trajectory that your course will take the learner on?

Isaac Mann: Right. So in the Constructing Sturdy UIs With XState course, we start building an application that builds out over the course of the whole series. You make an application that is a quiz application where you kind of match a Star Wars character with their home world, and we start by making several different state machines that help you manage the UI of that application in a way that's well structured and not prone to errors. So we start with a network state machine and then we do a selection machine where it controls whether you've selected an item or not. We do a matching machine that controls whether you've actually matched a person and their home world. And, yeah, so it's just all about how those state machines can be used with actual components and actually interacting with each other in a real application.

Taylor Bell: Cool. And so after somebody works through your course, what should their next steps be? How can they apply this to their real life?

Isaac Mann: Right. So you probably are already using state machines in your application code, you probably just don't know that they're there. You maybe have an enum that is simulating states and you're not defining the transitions between them rigorously. And so the best application step after watching this course is to find those places in your code that really are actually state machines already, but not very well defined and making them into explicit state machines that don't have accidental transitions between your states.

Taylor Bell: Cool. So thanks so much for meeting with me today to tell me a little bit more about your new course and I'm excited to check it out.

Isaac Mann: Great. Yeah, it was good talking with you.

Taylor Bell: All right, thanks.