6 ms·

The World of Statecharts

142 points by capableweb 7y ago

capableweb 7y ago
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
aphextron 7y ago
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.
- davidkpiano 7y ago
  That's awesome to hear! (Author of XState here) For those curious: XState is a JavaScript state machine/statechart library that doesn't invent any new concepts and instead adheres strictly to statechart principles and the SCXML spec.
- spiffytech 7y ago
  How have you managed keeping your machine's state and context consistent? Although I can control transitions easily, I've found it's easy to miss updating parts of my machine's internal context when wiring up transitions. I wind up with my component thinking it's in a particular State, with a context that doesn't match up.
  - jlu 7y ago
    Isn’t that the job of actions after an transition happened? (modifying the internal context according to the event).
    - spiffytech 7y ago
      It is indeed. However, I've found the problem of writing assignment actions correctly is very similar to the problem of managing ordinary variables without xstate. I'm wondering if I'm doing this right, since I thought xstate was supposed to make that kind of bug much rarer.
- candeira 7y ago
  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 7y ago
    This sounds very interesting! Do you have a link to a repo or tutorial / good reference example?
    - HerrBertling 7y ago
      Oh, that would be awesome! I’m very interested as well :)
    - candeira 7y ago
      No, sorry. This was contract work, and is closed source.
      - james_s_tayler 7y ago
        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 7y ago
        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.
- beardedman 7y ago
  Would love a real world example of this. Building a smaller application is fine - but what does XState look like in an enterprise level context?
lonelappde 7y ago
This subpage is a better intro https://statecharts.github.io/what-is-a-statechart.html https://statecharts.github.io/what-is-a-statechart.html
nileshtrivedi 7y ago
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-cases-by-multiplying-state-machines-c1bedbf0e8e6 https://medium.com/cleartax-engineering/enumerating-test-cas...
- deleted 7y ago
  [deleted]
jlu 7y ago
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 7y ago
  Your footer links don't work, btw.
airbreather 7y ago
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 7y ago
  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.
foota 7y ago
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.
MattRix 7y ago
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 7y ago
  Game AI and scripting is very into state machines in general.
_aleph2c_ 7y ago
Python statecharts: https://aleph2c.github.io/miros/index.html https://aleph2c.github.io/miros/index.html
golergka 7y ago
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 7y ago
  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/resources/statecharts.pdf http://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/reso...
zarkov99 7y ago
Is there a rendering tool for statecharts, something like plantuml?
- frumiousirc 7y ago
  Plantuml? https://plantuml.com/state-diagram https://plantuml.com/state-diagram
  - capableweb 7y ago
    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
- fold_left 7y ago
  The XState Library has this visualiser https://xstate.js.org/viz/ https://xstate.js.org/viz/

142 points by capableweb 7y ago

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

aphextron 7y ago

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.

davidkpiano 7y ago
That's awesome to hear! (Author of XState here) For those curious: XState is a JavaScript state machine/statechart library that doesn't invent any new concepts and instead adheres strictly to statechart principles and the SCXML spec.
spiffytech 7y ago
How have you managed keeping your machine's state and context consistent? Although I can control transitions easily, I've found it's easy to miss updating parts of my machine's internal context when wiring up transitions. I wind up with my component thinking it's in a particular State, with a context that doesn't match up.
- jlu 7y ago
  Isn’t that the job of actions after an transition happened? (modifying the internal context according to the event).
  - spiffytech 7y ago
    It is indeed. However, I've found the problem of writing assignment actions correctly is very similar to the problem of managing ordinary variables without xstate. I'm wondering if I'm doing this right, since I thought xstate was supposed to make that kind of bug much rarer.
candeira 7y ago
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 7y ago
  This sounds very interesting! Do you have a link to a repo or tutorial / good reference example?
  - HerrBertling 7y ago
    Oh, that would be awesome! I’m very interested as well :)
  - candeira 7y ago
    No, sorry. This was contract work, and is closed source.
    - james_s_tayler 7y ago
      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 7y ago
        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.
beardedman 7y ago
Would love a real world example of this. Building a smaller application is fine - but what does XState look like in an enterprise level context?

lonelappde 7y ago

This subpage is a better intro https://statecharts.github.io/what-is-a-statechart.html https://statecharts.github.io/what-is-a-statechart.html

nileshtrivedi 7y ago

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-cases-by-multiplying-state-machines-c1bedbf0e8e6 https://medium.com/cleartax-engineering/enumerating-test-cas...

deleted 7y ago
[deleted]

jlu 7y ago

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 7y ago
Your footer links don't work, btw.

airbreather 7y ago

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 7y ago
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.

foota 7y ago

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.

MattRix 7y ago

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 7y ago
Game AI and scripting is very into state machines in general.

_aleph2c_ 7y ago

Python statecharts: https://aleph2c.github.io/miros/index.html https://aleph2c.github.io/miros/index.html

golergka 7y ago

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 7y ago
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/resources/statecharts.pdf http://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/reso...

zarkov99 7y ago

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

frumiousirc 7y ago
Plantuml? https://plantuml.com/state-diagram https://plantuml.com/state-diagram
- capableweb 7y ago
  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
fold_left 7y ago
The XState Library has this visualiser https://xstate.js.org/viz/ https://xstate.js.org/viz/