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!
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
Reminds me of a post describing implementation of a React login page FSM using some simple ClojureScript to describe and run the state transitions:
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:
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).
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.
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.
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: ..."