HN

Comments (61)

• Menu

  davidkpiano
  Glad to see statecharts still getting attention!I created XState, a JS/TS library for authoring, executing, and visualizing state machines/statecharts: https://github.com/statelyai/xstateI've been working on it for 10+ years. The main thing I've learned is that statecharts are most valuable when they're treated as executable behavior, not just documentation.That doesn't mean you need to use them everywhere or model everything with them. They're most useful when you have behavior where the answer to "what happens next?" depends on both the current state & the event. A statechart can act as an oracle for questions like: "Given I'm in this state, when this event happens, what is the next state, and what effects should run?"I'm close to releasing an alpha of the next major version of XState, focused on better ergonomics, type safety, and composability, as well as a new visualizer/editor.There's also an open-source basic statechart visualizer here: https://sketch.stately.aiFor the formal/spec side, SCXML is worth reading: https://www.w3.org/TR/scxmlAlso worth reading the original paper by David Harel: https://www.weizmann.ac.il/math/harel/sites/math.harel/files...
• fluorinerocket
  Statecharts are one of the those concepts that are extremely useful for machine control that it seems crazy to me that they are so little adopted from what I have seen. At most people might know about a flat mealy state machine.What's better than graphically designing your HSM, simulating it vs all kinds of scenarios to verify it, and auto generating the code?
• ronin_niron
  One thing usually skipped in primers: history pseudo-states (H, H) make a statechart formally non-deterministic from outside. The pitch is "current state is a pure function of inputs" — history breaks that. Entering a parent via `H` puts you in whichever child was active last, so the same event from the same outer state can land you in two different inner states. That latent "last-active child" IS state, just state nobody draws on the diagram. Harel's original paper acknowledges it; SCXML and XState both implement it; nobody really talks about it. So if you're using deep history (H) to preserve subtree state across re-entry, you've moved the bookkeeping into the chart engine — fine, but the picture alone no longer tells the full story, and history transitions need their own tests like any other piece of state.
• Menu

  embedding-shape
  2 hours and not a single comment yet?! At one point, Statecharts seemed to be getting traction in the frontend/UI ecosystem, albeit tiny traction. Leveraging state machines (and particular Statecharts, which is basically compositions of state machines) for UI interactions makes complex flows so much easier to reason about! However, seems the traction eventually disappeared for unknown reasons, sadly.If this is the first time you're hearing about Statecharts, I highly recommend the book "Constructing the user interface with statecharts" by Ian Horrucks (https://archive.org/details/isbn_9780201342789/mode/2up) which yes, is from 1999, but probably the best introduction for how to actually apply and use Statecharts.
• Menu

  hasyimibhar
  I wonder if it's possible to combine statecharts with durable execution engines like Temporal, DBOS, Restate, etc. At work we use Cloudflare Workflows for managing onboarding and payment workflows. It generates flowchart diagram that is useful for quickly reasoning about what the workflow does, which I guess is what statecharts is trying to achieve.
• Menu

  ciarcode
  Well, this is used in the automotive domain for long time now. Look at matlab/simulink: you can draw your algorithm as a state machine and generate the code out of it. Recently I implemented a state machine to manage a quite complex react component, who moves from one visual state to another through some css transitions. It’s not a difficult state machine, but I think people are not so well versed in it.
• neilv
  A long time ago, I wrote a compiler from a curly-brace encoding of Statecharts, to Java.More recently, I avoided some early SwiftUI bugs by modeling some of the iOS app interaction using Statecharts, in an ASCII art comment in the code, and implementing that.
• Menu

  MeteorMarc
  The title contains hierarchical, which does not come back in the post. You probably need hierarchy, otherwise state charts become unweildingly large.
• sghiassy
  One of my favorite data structuresCreated StateKit for ObjC/Swift some time ago, it’s been production tested in some very large apps: https://github.com/sghiassy/StateKitSuch a cool data structure
• Menu

  dflock
  I've tried to use state charts for frontend development a couple of times, but bounced off. IIRC, I was using xstate with vue, and I found that they were hard to retrofit to existing systems, and where I tried, I found that the boundary between the part of the system controlled by xstate and the rest of the system problematic. It felt like it would work better with everything "inside" the statechart, but that's a big lift for an existing codebase.
• nop_slide
  Anyone remember Sproutcore JS? They used state charts.https://guides.sproutcore.com/getting_started_2.html
• skybrian
  Since the state chart itself doesn’t contain any data, I’m wondering where the data lives and how you handle data that’s only valid in certain states? It seems like having the states separated would be rather awkward versus, say, a TypeScript union type that keeps them together?
• Menu

  brandensilva
  I've always been a fan of state machines and have hoped for their adoption to grow.Having visual understanding of state is becoming increasingly important for AI generated code you don't nearly understand as well as the human variety.It seems many still favor store based reactivity state in frontend frameworks.I contribute to it being the default so why change and because libraries like xstate are far more difficult to learn the syntax and are more verbose. But with AI that's hardly an issue, so I wonder if there is more to it I don't see and we just haven't seen the state chart reach it's peak yet.
• artemonster
  Is there any research in composing state machines?
• rleigh
  Let me just throw in:ETL State Chart and Hierarchial FSM https://www.etlcpp.com/state_chart.html and https://www.etlcpp.com/hfsm.htmlQuantum Leaps https://www.state-machine.comI've used them primarily in safety-critical systems where complexity, timing and the ability to effectively verify behaviour is obviously important. Being able to separate the decision-making from the actions is a great aid. Having to strip back the decision making to "what do I do next" when I'm in this state and this event occurs is a bit different to how most programs are structured, but really does aid separation and makes it easy to reason about behaviour under different conditions.
• fl4regun
  My work in PCIe IP has regularly had me involved with reading state machine (or state chart) diagrams, the PCIE link training FSM itself have multiple sub state machines e.g. for recovery, or configuration, or power savings and it was not unusual to find a physical printed copy of this diagram in the lab to help aid in debugging.
• rekrsiv
  Oh right, I keep forgetting about those useful-but-historically-mentally-draining-to-update sources of truth. This might be extremely useful when paired with an agent.
• imrozim
  I had a state machine bug in my backend I built a where order states were defined differently in migration vs api routes. Wish I knew about this earlier.
• pbw
  I’m going to give this URL to Claude, ask it to propose uses of state charts in my codebase. Yes, it already has this in its training data, but I find giving it a URL brings it to top of mind.
• Menu

  cubefox
  Hierarchical state charts have been formalized as a type of UML diagram. Details:https://en.wikipedia.org/wiki/UML_state_machine
• gedge
  I love statecharts, but I wanted to challenge some of the "why"s in this post.> It’s easier to understand a statechart than many other forms of code.There's a lot of arguable quantifiers here, but when I was started at https://gadget.dev (no longer working there), we started with hierarchical statecharts as a way for users to specify their behaviour (with the ability to customize transitions with code snippets). No matter what we did, users just found it incredibly confusing. This was with a customer based that had decent spread across the "how technical are you" spectrum.Did we do a poor job of introducing it to the user? Maybe. We were forced to switch everything over to flat code though.> As complexity grows, statecharts scale well.I think there's a big asterisk on this one, likely. I had to undo a lot of unfortunate statechart code that was introduced for some of the backend of gadget, and I consider myself a pretty good programmer. Perhaps it's just the difference in paradigm, or the accidental complexity of how we worked with xstate, but I reduced 1000+ lines of very hard to read and extend statechart code to a few hundred lines of imperative code, with some hardcoded states. It was actually easier and faster for me to do this than fix bugs that existed somewhere in there (I tried, and failed).Every engineer at the company (it's a small company :P) agreed that it was substantially easier to read and understand.I think this perhaps echoes things said elsewhere here, like dflock's comment on the boundary between "xstate" and "not xstate".All that being said, I'll restate: I love the idea of statecharts, I just have scars from dealing with them. I think they were perhaps applied in situations where the benefit was low, and the overhead of understanding the bits and bobs of xstate was too high of a cost for any perceivable benefit it may have offered.> It’s worth noting that you’re already coding state machines, except that they’re hidden in the code.I will say that this is a great point that may often be overlooked.When I interview candidates, one problem I enjoy doing (and they do too!) is "let's try building vim" problem. We build out a few basic commands — move left, move right, replace character under cursor — to edit a string of text. The candidates that do the best often see how parsing can be encoded in a state machine and plan with that in mind. They perhaps still just encode it as if/else statements with a state variable, but that still gives the better outcome. Something like this: 0-9 --------- | | | v hj |-- (number N) -----> move N spaces | | r ------> (read char c) ---> replace N characters with c [EDIT] And I should say, I _am_ repeating some of what's stated in the linked site (under "Why should you not use statecharts?")
• Menu

  scotty79
  I'd like to see a computer language where statecharts are primary control flow construct and ECS are primary data structure.
• locknitpicker
  While we are discussing state charts and source code generators, Qt deserves a honorable mention with it's Qt State Machine frameworkhttps://doc.qt.io/qt-6/qtstatemachine-overview.htmlQt also supports W3's State Chart XML (SCXML)https://doc.qt.io/qt-6/qtscxml-overview.htmlhttps://www.w3.org/TR/scxml/
• pyrolistical
  Protip. Claude can generate state machine diagrams via mermaidjs blocks in markdown.These render in GitHub flavoured markdown
• atoav
  I have used nested state machines for a while now and they are really good if you have realtime needs, e.g. controlling motors, animations, audio/video playbsck and so on.The statemachine itself also forces you to think about which transitions between which states are possible and whst you may need to consider when such a state change happens.
• Menu

  empiricus
  "No statechart will survive contact with real world applications". I mean, when you have external dependencies, multilayer protocols, multithreading, perf requirements, the state will becomes an ugly mess. One can only dream of a clean statechart.
• uptodatenews
  [dead]