Check out a free preview of the full State Machines in JavaScript with XState course:
The "The Case for Statecharts" Lesson is part of the full, State Machines in JavaScript with XState course featured in this preview video. Here's what you'd learn in this lesson:

David explains that the solutions to problems introduced by writing bottom-up code are the use of state machines and statecharts because they allow the developer to follow the application's logic, and visualize the states and the various transitions between the states.

Get Unlimited Access Now

Transcript from the "The Case for Statecharts" Lesson

[00:00:00]
>> So this is why we use state machines and state charts. Now, first of all, state machines are definitely not a new concept. They've been around since, well, honestly since almost a century ago. In fact, these computers that we work on in all of our electronics and pretty much everything, all of our software, would not work without state machines.

[00:00:24] You could consider programming languages state machines, you could consider the embedded electronics within your computer, the circuitry, those are state machines as well. And so state machines are such an important model in computer science. However, they're not a very easy model to grok. And that's because it's sort of a mathematical model.

[00:00:43] And if you go to Wikipedia and you search finite state machine, you're going to find a lot of really confusing math terms. But I promise you, it's worth the learning curve. So why would we want to use state machines and state charts? One of my favorite examples is the Curiosity Rover by NASA was actually programmed using a lot of state charts.

[00:01:05] And they found a lot of benefits to this, such as visualized modeling, which we're going to see a demonstration of in a little bit, where the state machines and state charts you make can be visualized. In that way, even if you give it to someone who doesn't quite understand code or might not be too technical, they'll be able to sort of understand the general flow of the logic and be able to spot errors easily.

[00:01:28] Such as saying, this date is wrong, this transition is wrong, we need to change this without knowing code. And so these precise diagrams are two ways. The diagrams describe the state machine in completeness. So they describe every single state and every single transition that could happen between the states, and the logic that's represented in the diagram is exactly the logic that the code will enable.

[00:01:56] NASA also used automatic code generation, in which they were able to programmatically draw these state charts and state machines and also have that generate C++ code. We're not gonna do that in this course, don't worry. There's also comprehensive test coverage. So when you know all of the states and all the transitions between the states, you're able to map out every single possible way that you can interact with the system.

[00:02:21] And so for coding something that's billions of dollars, such as the Curiosity Rover and having a seal deployment where if anything goes wrong, you just wasted a billion dollars, that's a very, very important thing. Because you wanna be able to predict everything that can happen, especially in an unfamiliar territory such as Mars.

[00:02:41] And also, the accommodation of late breaking requirements and changes. That's very important points, too, because we don't typically know all of the features and all of the use cases our app is going to have at the very beginning. If you do, you're very lucky. But if you don't, we need some way of introducing those changes and being able to see how those changes affects everything else that we've already represented in the state machines and state charts.

[00:03:09] And so this becomes a lot easier when you have a visual model and you have a very precise diagram showing you what can affect what. Instead of having code where the logic is spread everywhere and you have millions of possibilities.