YAKINDU Statechart Tools is releasing its new code generator for XState and this should interest web-developers.

For most people coming from a web-development background, this headline might sound strange. But the truth is that state machines and statecharts are a well-suited tool for developing all kinds of applications. From big systems with sophisticated software like plane-controllers to embedded Internet-of-Things(IoT) devices, statecharts have proven themselves to be an effective way of modeling small and large software projects.

What can web developers gain by using statecharts?

There is a growing popularity of libraries like XState for NodeJS and this has a good reason: Prototyping can be done very quickly with statecharts and code generators.

Imagine just drawing out a diagram, generating some code and then writing under 100 lines of simple code to have a running version of your project. Previously you had to write out every little detail in those statecharts since they were part of the web app, but since code generators are a thing, you can just draw it out and let the translating be done by a program. This not only saves time but also ensures good code quality, since the translation is done with strict rules, to ensure the exact behavior specified in the drawn model.

How come I never heard of statecharts?

This probably has to do with the fact, that although statecharts (or to be more precise state machines) are known to people in IT, most of them don't bother to use them in actual work. It is just used as an academic tool to teach students some abstract concepts and then swept under the rug.

This is changing, although slowly. If you look at the GitHub repository of XState for example, you can see, that there is a rise in popularity and tools like YAKINDU Statechart Tools and Mathworks Stateflow try to facilitate the usage of Statecharts and bring them to more users. But this is hard. If you ask a normal developer to suddenly start drawing diagrams instead of writing in a normal programming language you are bound to raise some eyebrows.
But even if you aren't going to use these in your next projects or think they are useless: It is always better to have one more tool in your repertoire, might the time come where you need it.

The XState generator shown by example

The XState generator is a work in progress attempt to integrate XState into YAKINDU Statechart Tools and is therefore not yet ready to tackle every problem a statechart can solve. It does however already support all the functionality a normal state machine has and already allows for the use of events, operations, nested states, and some other stuff.

It also comes with an example called "Simple Survey", which is just that. It features some of the functionality of the XState generator and is about a survey with some dummy questions, to show a simplified use case for a statechart. The simple survey was an attempt to recreate some parts of this project with a code generator. Since asynchronous statecharts are not yet supported the mechanism of the validation in the example was simplified. Now, to get to the meat of it, we first have to generate XState code from the above statechart, which looks like this:

Now we just add some glue code to put the previous project and our statechart together, like adding functionality to each function:

The finished product can be seen below. It works similiar to the original and is a lot less work, since we never wrote a single line for the statechart itself.

How to get started?

Before you get this wrong: You don't have to pay anything!
XState is a great place to start with. You can download it for free and start using it now. If you want some professional tools for modeling and don't want to pay anything, don't worry. YAKINDU Statechart Tools offer a free non-commercial license and a 30-Day Trial Version for free. Or you could check out the GitHub Student Developer Pack. It allows students from all over the world to get access to many professional developer tools for free.

After installing YAKINDU Statechart Tools, do not forget to import the Yakindu labs project or you won't have the generators for languages like XState, etc.
If you need further help or examples, you can just check out their documentation and specifically this part on installing other code generators or check out their examples under the menu entry; they are easy to comprehend and get you started up fast.

[Feature X] doesn't work?!
The Yakindu labs projects are all work-in-progress, meaning that new ideas get tested out regularly and don't work 100%. The XState generator was just released some days ago and is by no means done. Instead, this is a pilot project to see if there is a real demand in the web dev scene. If you want to contribute, you are always welcome to give feedback, test everything and comment on bugs using the "Send Feedback" button.

Links and other stuff:

IMPORTANT: This new XState generator is part of the new beta release of Yakindu Statechart Tools, which you can only get here:
https://info.itemis.com/de/yakindu/state-machine/download-4.0.0/

Idea and Code Example taken from:
https://codesandbox.io/s/xstate-react-form-example-crckp

Generated Example:
https://codesandbox.io/s/xstate-react-form-example-generated-85he2

YAKINDU Statechart Tools:
YAKINDU Statechart Tools - state machines made easy
II➤ Use state machines to create complex systems in a visual way. Generate high-quality source code for C, C++, Java…www.itemis.com
https://www.itemis.com/en/yakindu/state-machine/

XState:
davidkpiano/xstate
JavaScript state machines and statecharts JavaScript and TypeScript finite state machines and statecharts for the…github.com
https://github.com/davidkpiano/xstate

Mathworks Stateflow:
Stateflow
Stateflow ® provides a graphical language that includes state transition diagrams, flow charts, state transition…mathworks.com
https://github.com/davidkpiano/xstate

YAKINDU Statecharts documentation & Installing Code Generators:
YAKINDU Statechart Tools - Documentation
YAKINDU Statechart Tools Documentation.www.itemis.com
https://www.itemis.com/en/yakindu/state-machine/documentation/user-guide