3 ms·

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 st

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

sph 6mo ago
> Statecharts seemed to be getting traction in the frontend/UI ecosystem Yes, I stumbled upon statecharts checking out this Godot plugin: https://github.com/derkork/godot-statecharts https://github.com/derkork/godot-statecharts
- brandensilva 6mo ago
  I've been wanting to code up an AI flavor wrapper around state machines that will be visible as an AI generated image in PRs. I often have my AI code output one just to make sure my logic feels more sound. Along with mermaid charts if I need to toy around or drop into stately for more power.
  - ZihangZ 6mo ago
    Small caution from using agents here: the useful chart is the one generated from code, tests, or traces, not the one the model draws from its own explanation. I've had models produce very reasonable Mermaid diagrams that matched the intended design but not the actual program. It felt helpful until I realized I was reviewing the plan twice and the implementation zero times. For PRs I'd rather render the diagram from the executable state machine itself — at least then drift in the chart means drift in behavior, and you can't review one without the other.
davidkpiano 6mo ago
Statecharts are still getting some traction! XState has over 4 million weekly npm downloads. Animation tools like Rive & LottieFiles heavily advertise state machine capabilities. AI tools like LangGraph are built on state machine foundations. It'll take some time for those apps/tools to realize the full potential of statecharts, but it's a good start.
- embedding-shape 6mo ago
  No doubt state machines are as popular as they've always been :) I was talking about statecharts specifically, not just state machines in general.
larodi 6mo ago
Not sure about the charts themselves, but it helps structure code and logic better if a clear description of possible states (of phenomena) is provided and reasoned about. Naturally, as the author notes, we are using states in our programs. Three kinds at least - current program state in the complex space-of-states the program can have - most properties (and vars) are expect to undergo several states, and enumerable denotes a state. - every program traversing a graph for something, essentially runs a state machine of some sort Indeed a user interface can benefit from having a FSM run it, given interfaces guide the end-user through predefined states from which he navigates into other states (which show/hide a set of widgets and wire them with data).

sph 6mo ago

> Statecharts seemed to be getting traction in the frontend/UI ecosystem Yes, I stumbled upon statecharts checking out this Godot plugin: https://github.com/derkork/godot-statecharts https://github.com/derkork/godot-statecharts

brandensilva 6mo ago
I've been wanting to code up an AI flavor wrapper around state machines that will be visible as an AI generated image in PRs. I often have my AI code output one just to make sure my logic feels more sound. Along with mermaid charts if I need to toy around or drop into stately for more power.
- ZihangZ 6mo ago
  Small caution from using agents here: the useful chart is the one generated from code, tests, or traces, not the one the model draws from its own explanation. I've had models produce very reasonable Mermaid diagrams that matched the intended design but not the actual program. It felt helpful until I realized I was reviewing the plan twice and the implementation zero times. For PRs I'd rather render the diagram from the executable state machine itself — at least then drift in the chart means drift in behavior, and you can't review one without the other.

davidkpiano 6mo ago

Statecharts are still getting some traction! XState has over 4 million weekly npm downloads. Animation tools like Rive & LottieFiles heavily advertise state machine capabilities. AI tools like LangGraph are built on state machine foundations. It'll take some time for those apps/tools to realize the full potential of statecharts, but it's a good start.

embedding-shape 6mo ago
No doubt state machines are as popular as they've always been :) I was talking about statecharts specifically, not just state machines in general.

larodi 6mo ago

Not sure about the charts themselves, but it helps structure code and logic better if a clear description of possible states (of phenomena) is provided and reasoned about. Naturally, as the author notes, we are using states in our programs. Three kinds at least - current program state in the complex space-of-states the program can have - most properties (and vars) are expect to undergo several states, and enumerable denotes a state. - every program traversing a graph for something, essentially runs a state machine of some sort Indeed a user interface can benefit from having a FSM run it, given interfaces guide the end-user through predefined states from which he navigates into other states (which show/hide a set of widgets and wire them with data).