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.
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.
Readit News
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!
;-D
Deleted Comment
https://www.youtube.com/watch?v=Vg60lf92EkM
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've also managed to avoid frameworks for some UIs and just use XState + RxJS. For example: https://codepen.io/davidkpiano/pen/zWrRye
Deleted Comment
Reminds me of a post describing implementation of a React login page FSM using some simple ClojureScript to describe and run the state transitions:
https://github.com/jebberjeb/reframe-fsm/blob/master/doc/HOW...
I found it unusually clear, useful, and easy to follow.
For anyone going down the ClojureScript path that wants more sophisticated FSMs, there a few nice libraries dedicated to that:
https://github.com/ztellman/automat , https://github.com/cdorrat/reduce-fsm , https://github.com/jedahu/spaghetti
Does anyone have suggestions for these things?
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.
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.
For now, you can use this visualizer: https://statecharts.github.io/xstate-viz
I have not really grasped why state machines are a big deal. (If it is)
Thanks and congrats for hitting the first page!
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).
If so, how would the implementation differ from store and reducers?
Much of what a typical React + Redux app does is implementing a state machine.
Also, your work has been a huge influence on XState, and I can't thank you enough for SCION!
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.
Dead Comment