State machines are a very powerful tool but are often underused in web development. The design process forces you to think hard about how you want to model your data, about the different objects lifecycles, about the way you want to expose your data and communicate with your whole team, and about the upcoming evolutions. Going through this process takes a lot of efforts but is worthwile, it brings a lot of structure to your code and your team. Also, the actual implementation of a state machine is usually very simple.
If you're comfortable with the basics of JavaScript, HTML & CSS, but you've never built an interactive web app before, this guide is for you. If you are a seasoned JavaScript developer with experience in other frameworks, and are looking to try choo for the first time, this guide is also for you.
Today we will attempt to describe the different mental models for CSS and JavaScript. Everybody agrees there is a difference, but nobody’s able to define exactly what that difference is. So let’s try.
This exists as a living document to define some guidelines regarding state machines and their usage. These guidelines are by no means exhaustive, but hopefully set you on the right path. It is highly recommended that you read the XState docs for more information.
Designing state machines | Drivy Engineering
choo handbook - your first choo app
The CSS mental model - QuirksBlog
GitHub - rintoj/statex: StateX is a state management library for modern web applications with unidirectional data flow and immutable uni-state (just like redux)
Stop using isLoading booleans
Guidelines for State Machines and XState | Kyle Shevlin
Stimulus Handbook: Managing State