
The World of Statecharts - capableweb
https://statecharts.github.io/
======
aphextron
I can't overstate what a gamechanger state based development using XState +
React with hooks has been for me versus a standard Redux/Flow architecture
with class based components. It allows you to extract business logic from your
components to the point that React becomes nothing more than a view rendering
layer. This makes it way easier to understand the flow of your application and
simply read through the statechart and look at the corresponding components
for each state. No more parsing through giant component class files, dealing
with lifecycles, or mixing logic with presentation. It allows you to build a
fully deterministic UI where bugs become almost impossible to happen.

~~~
candeira
Yes!

Extremely same, but with Vue instead of React. In the last project I worked
on, XState was a late addition, so it didn't control the whole application,
but the part I wrote in it was bug free from the start.

My plan for any future JS/frontend project is to design the whole
application's business logic around XState, and use Vue/React/Svelte/Whatever
just for the rendering part.

~~~
james_s_tayler
This sounds very interesting! Do you have a link to a repo or tutorial / good
reference example?

~~~
candeira
No, sorry. This was contract work, and is closed source.

~~~
james_s_tayler
That's ok. Anything publicly available you used as reference materials? I had
a read through that site, but id love to see what's considered a good example
in code.

~~~
candeira
From memory, one of the things we did was set up an event bus to communicate
between xstate and Vuex. We only used the xstate.org.js and vuejs.org
documentation, which are both very good.

Sorry I can't help further.

------
capableweb
Similar submissions:

\-
[https://news.ycombinator.com/item?id=8766319](https://news.ycombinator.com/item?id=8766319)
\- Statecharts: A Visual Formalism For Complex Systems (1987) [pdf]

\-
[https://news.ycombinator.com/item?id=18483704](https://news.ycombinator.com/item?id=18483704)
\- Functional, stateless JavaScript finite state machines and statecharts
(XState)

\-
[https://news.ycombinator.com/item?id=15835005](https://news.ycombinator.com/item?id=15835005)
\- Are statecharts the next big UI paradigm?

\-
[https://news.ycombinator.com/item?id=16606379](https://news.ycombinator.com/item?id=16606379)
\- More State Machine Love: From Reflection to Statecharts

\-
[https://news.ycombinator.com/item?id=21860700](https://news.ycombinator.com/item?id=21860700)
\- Simpler UI Logic With Finite State Machines

------
MattRix
Not quite the same thing, but the Blizzard game Overwatch is scripted in a
state-machine based visual language called "Statescript" that has some
similarities to this.

~~~
monocasa
Game AI and scripting is very into state machines in general.

------
jlu
I built a visual statechart editor a while ago, feel free to give it a try,
happy to answer any related questions too.

[https://www.stateskit.com/](https://www.stateskit.com/)

~~~
dflock
Your footer links don't work, btw.

------
golergka
I thought that hierarchical state machine is a pretty standard programming
pattern, but I've never seen the name "statechart" before. Is it the same
thing, or are there any differences that I didn't notice?

~~~
davidkpiano
It's not exactly the same. Statecharts have more "features" than just
hierarchical states:

\- Parallel (orthogonal) states \- History (shallow, deep) states \- Entry,
exit, transition actions \- Delays \- "Throughout" actions (activities) \-
Etc.

Check out the original paper:
[http://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/reso...](http://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/resources/statecharts.pdf)

------
_aleph2c_
Python statecharts:
[https://aleph2c.github.io/miros/index.html](https://aleph2c.github.io/miros/index.html)

------
nileshtrivedi
I once used the Cartesian product of state machines to enumerate test-cases.
Statecharts helped reduce the visual complexity. Wrote an article about it:

[https://medium.com/cleartax-engineering/enumerating-test-
cas...](https://medium.com/cleartax-engineering/enumerating-test-cases-by-
multiplying-state-machines-c1bedbf0e8e6)

------
lonelappde
This subpage is a better intro

[https://statecharts.github.io/what-is-a-
statechart.html](https://statecharts.github.io/what-is-a-statechart.html)

------
foota
I was a web developer in college for an on campus organization that handled
the web app for students applying for and selecting a roommate. After learning
about state machines in one of my courses I decided to take the process and
model it as a state machine, which made deciding what text to display and what
options could be taken much easier than it had been before, with ad-hoc if
statements about the various state involved.

------
zarkov99
Is there a rendering tool for statecharts, something like plantuml?

~~~
frumiousirc
Plantuml? [https://plantuml.com/state-diagram](https://plantuml.com/state-
diagram)

~~~
capableweb
Seems to only do regular State diagrams. Statecharts is something different,
Wikipedia has more details:
[https://en.wikipedia.org/wiki/State_diagram#Harel_statechart](https://en.wikipedia.org/wiki/State_diagram#Harel_statechart)

------
airbreather
I use them in design of safety critical code in industry.

Surprisingly, they only recently start gaining more popularity in this field,
that I see.

~~~
mogsie
That's cool. Could you elaborate? I'm the author of statecharts.github.io, and
while I know state machines are widely used in embedded systems, I don't know
much about how statecharts are (starting) to be used. I think it's a great
fit.

