A long time ago, when I was a student in an academic institution learning computer science, I found the automation systems class very exciting.
I love the approach of representing a solution to a problem in a visual way.
Create abstraction sketching a state chart of state and transition looks easy to understanding.
As a developer, I think building a frontend application is very complex.
it contains things that happened asynchronously over time (API call, animation, things that happen in parallel).
X-State gives you a good visualizer tool that you can design and code your machine.
You can add the inspect package or chrome extension for debugging or play with your state machine in your application.
you can use x-state in many UI languages (React, Vue, Svelte)
you can generate integration or e2e testing to make your test goes hand in hand with your code.
You can write the testing by jest and react testing library or by playwright/puppeteer/Cypress.
In the example that I wrote, I will show part of the power of X-State.
I build an air conditioner machine.
You have a remote that can control the power the mode and fun.
The machine has a default state.
If you turn it on and make some changes with mode I use the history functionality that remembers the changes that happened in the children's nested parallel states.
I think this example is showing the power and simplicity of using X-State.
Enjoy : )
Top comments (0)