Hey! I made XState and just discovered it hit Hacker News (...great)
To clarify, the new tag-line is "State machines and statecharts for the modern web." Some of you are nitpicking the word "stateless" which describes the actual machine `.transition()` implementation (not the interpreter implementation), which returns the next state (+ actions, etc.) given the current state and event, but does not mutate or remember any state (hence, stateless).
Please don't focus on the word "stateless." I'd appreciate any other valuable feedback, though!
Rather than say stateless, you can say no hidden imperative state or something a bit more accurate. It immediately popped out at me when I read the title just now, it’s like talking about dry water :)
I remember the first time I encountered "Fat-free Half-and-half" in the grocery store. I must have stood there for a full minute, resisting the urge to stop passers-by and ask them, "But isn't that just milk?"
Curious what web frontend frameworks you are currently into. Or if you plan to use XState as the basis for something new. Looking at Gatsby, Apollo and other GraphQL based libraries. Appears to be a trend toward human-readable or even visual programming environments. XState could certainly be a powerful statechart management engine for this ;)
I appreciate the thanks :) I'm currently into React, but in a very light way -- I'm going to continue experimenting with how statecharts can (semi-)universally define the behavior of complex components in a way that can be integrated into any framework, or no framework at all.
This is really cool and just up my alley since I'm always drawing state machines. However, I'd love to find a tool for drawing these state machine diagrams either with a UI or just a yaml file that's processed with a command-line tool.
If you're just looking for a tool that you can use to define (and play with) a state machine, take a look at https://sketch.systems - it's not a 'drawing' tool but you could export an XState object and put that in another tool
Depending on what you're trying to accomplish, you can use Graphviz (http://www.graphviz.org/) which accepts DOT input to produce graphs.
You may also be interested in a GUI-based DFA/NFA/PDA simulator I built, available here: http://automatonsimulator.com/. The target audience is CS students and was built based on notation found in Michael Sipser's "Introduction to the Theory of Computation." It allows you to: graphically define state machines, test against input strings, step-by-step debug, and export/import using a text format.
Thanks for the suggestions. I've used Graphviz before and found it super useful for automated graph generation for sure.
The tool you built also looks like it's close to what I'm looking for. I guess what I'm really looking for is a super slick and simple graph generator app, sort of like what https://mindnode.com/ is for mind maps/outlines. If I had more time, it's something I would like to build.
Hi, it looks sweet and easy to read, but what are actual use cases? For example, how would this pair with a React app? Is this supposed to be used as a a stand alone lib?
I have not really grasped why state machines are a big deal. (If it is)
IMO, state machines are becoming a "big deal" because front-end developers are finally realizing that there is a name (and strict formalism) for the patterns that they've been using to manage complex UI behavior. Not only is this standardized (SCXML), it's been heavily researched for the last 30+ years and has numerous applications in many different areas of tech.
I'm working on articles for using XState in various frameworks, such as React, Vue, Angular, etc. It's already being used in production in places like vaultproject.io, tipe.io, serviceworkies.com, and more.
You can use the interpreter or create your own. An XState machine instance has a pure .transition() method that takes the current state and event, and returns the next state (+ actions, etc.). This can be used anywhere you would determine the next state of your application (or any of your app's constituent parts).
Meh. I’m mostly a frontender today. I learned about state machines in uny 20 years ago. I wrote a sophisticated state machine in C# 15 years ago (a back end) that drove all logic for everything happening from highway to the stacks at a major shipping terminal. Assuming that frontenders are only “just discovering” anything is quite an assumption, and comes off as ignorant and condescending.
Sorry for coming off as ignorant/condescending, it was definitely not my intention.
But to be fair, I asked this question a year ago and the majority of front-end developers were unfamiliar with state machines: https://twitter.com/DavidKPiano/status/880878305502785539 I'm glad you're not, but that's not representative of the community.
I'm a Redux maintainer. You could probably use xstate instead of Redux in some cases. You could also probably use xstate as the actual implementation of your Redux reducers, too :)
I could see them being used together with something like https://github.com/Monadical-SAS/redux-time to manage animated transitions of game states or data visualizations from one step to the next.
It means state is passed in as a parameter to the state machine interpreter - as opposed to being contained in the interpreter object. This is helpful when building pure functional systems, where state is passed in from some external data store, like in Redux reducers.
This took me a while to figure out, but it’s incredibly powerful once you get it. As others have suggested, I was working on a Redux-based interpreter.
Parts look interesting, but hard to take it seriously/invest the time investigating further when the slug says "stateless ... state machines".
Or at least might want to include an explanation somewhere prominent that explains how you define these terms in order for this not to be nonsense (and yes, I did search the rest of the pages).
There is a comment in the GitHub Readme, but that's not really illuminating.
Great to see more statecharts in JS!
State machines add a lot more safety if the usage of them is safe! I wrote a similar library that tries to leverage TypeScript for type-safety.
Interesting! As another point in the design space - I wrote a JS UI library (based on React) that uses async generators for state transitions. https://github.com/ajnsit/concur-js
Make a PR ;-) I have limited time to work on the docs but will be working to improve accessibility this week.
Also, how's this for a nicer tone?
"It would be great if this site supported better keyboard navigation, like using the space bars, arrow keys, page up/down, etc. Here are my suggestions: ..."
To clarify, the new tag-line is "State machines and statecharts for the modern web." Some of you are nitpicking the word "stateless" which describes the actual machine `.transition()` implementation (not the interpreter implementation), which returns the next state (+ actions, etc.) given the current state and event, but does not mutate or remember any state (hence, stateless).
Please don't focus on the word "stateless." I'd appreciate any other valuable feedback, though!