Nice work! Anything that helps visualise state I'm happy to see.
Reading the linked article I'm unclear: does Stately generate output that we run with XState? Or is it a SaaS where we design and run the state machine (a bit like Camunda provides for running BPMN diagrams)?
1. Which parts are open source? Will it require a commercial license?
2. I once worked on an already-existing credit card chargebacks system that was horrifically complex, with all kinds of variations and rules and states that play out over weeks or even months. The logic was scattered all around a Rails app, sometimes in clear chunks of business logic, but sometimes something like an `expired?` accessor on a chargeback variant would know the expiry period for that type of chargeback, etc.
I toyed with the idea of trying to pull all the logic out into some kind of non-code representation. Possibly a state machine diagram, possibly a giant spreadsheet (because with real-world payment processing, you can get just about any response when you're in any state, whether it seems valid or not, and you have to choose to do _something_!). Possibly a state machine diagram for the normal path but with a spreadsheet representation for the full cross-product of weird state transitions. Alas (or thankfully), I moved to a different project before I could undertake anything ambitious.
Would Stately let me do that? Move the knowledge of a hideously complex real-world, extended process that had been painstakingly gathered for years and encoded in logic scattered around an application, and let non-programmer, business-level people use that representation to understand and even tweak parameters of the process?
2. Really good example – yes, the Stately editor is intended to be the tool for that! Whether it's just diagramming, in the same way you would use any other diagramming tool, to going even further and simulating those diagrams or even using them directly in your code, the editor is meant to be a tool for making executable diagrams where you can also document and share complex logic.
It's the first public beta release, after a huge amount of open source work. Hopefully they'll support Safari soon.
If you're a VS Code user, it's also available as a VS Code plugin, which seems more advanced and useful than the browser app is currently anyway. It has bi-directional editing, which looks very useful.
State factories are the generators for state pattern.
State machines are constraint systems which govern which states are allowed to transition to one another.
The use case for a visual editor is that as state machines get over a certain complexity (for me, usually around 15 states,) they start getting hard to reason about. Being able to see them helps.
Consider the case of a state machine representing some object's flow through a manufacturing process. There are three lines: one for main process, one for defect repair, and one for pull testing.
Each line has a set of steps going in both directions: one for progress and the other for Toyota Method style step-audits, going in reverse.
It turns out you forgot one of the steps in the defect repair process, near the middle.
If you're looking at this in code, it's down to reading all the text, looking for exceptions, differences, really working it over
If you're looking at this on a diagram, it's two stripes where it should be three, and there's these two half-stripes that shouldn't be there
> It turns out you forgot one of the steps in the defect repair process, near the middle.
This is one of the reasons I like programming my state machines in Rust using enums to represent states. If I forget to deal with that state in my match statement, the compiler yells at me.
Right, but there are two paths, so it will actually be in your match in one direction.
Anyway, it's not that hard to come up with similar examples where a missing link in the mesh is easier to see than it is to read, and that's my core point.
Consider the case of writing out a small connectivity diagram for a near-grid of things. Now everybody but the edge has 4-5 links. One missing in that is brutally hard to find, if it's irregular, but probably still pretty easy to see.
> Our mission is to make app logic accessible to the entire team, including developers, designers, and stakeholders. Using state machines and statecharts as a common visual language, the software development cycle becomes more collaborative, eliminating handoff and tightening the feedback loop.
For me the more interesting benefit is how it might help an individual developer with designing/coding complex machines in the first place. Many devs value instant visual confirmation after each tiny code change, in a tight feedback loop that leads to a smooth, creative flow state. The GUI side of front-end dev is usually done this way in frameworks like Next.js. Using this new Stately editor via its VS Code plugin might create similar conditions when working on core application logic.
Excited (also anxious) to see this on Hacker News. Please keep in mind that it is a public beta: we have many features and improvements planned.
If you have any suggestions, comments, or bug reports, please post them here: https://github.com/statelyai/editor-feedback/issues
EDIT: Also, we host office hours every Friday, where we answer community questions https://www.youtube.com/statelyai
Thanks, and happy diagramming!