
Functional, stateless JavaScript finite state machines and statecharts - michaelsbradley
https://xstate.js.org/docs/
======
davidkpiano
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!

~~~
seanmcdirmid
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 :)

~~~
carapace
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?"

;-D

------
markc
Nice.

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...](https://github.com/jebberjeb/reframe-
fsm/blob/master/doc/HOWTO-blog.md)

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/ztellman/automat) ,
[https://github.com/cdorrat/reduce-fsm](https://github.com/cdorrat/reduce-fsm)
, [https://github.com/jedahu/spaghetti](https://github.com/jedahu/spaghetti)

------
brianzelip
Here’s a recent Shop Talk Show podcast with XState author that explores how
state machines relate to user interfaces,
[https://shoptalkshow.com/episodes/327-working-state-
machines...](https://shoptalkshow.com/episodes/327-working-state-machines/).

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

Does anyone have suggestions for these things?

~~~
serindu
Depending on what you're trying to accomplish, you can use Graphviz
([http://www.graphviz.org/](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/](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.

~~~
allenu
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/](https://mindnode.com/) is for mind
maps/outlines. If I had more time, it's something I would like to build.

------
antonkm
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)

Thanks and congrats for hitting the first page!

~~~
davidkpiano
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).

~~~
Kagerjay
Would xstate potentially eliminate the need for redux for state management in
react?

If so, how would the implementation differ from store and reducers?

~~~
acemarke
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 :)

------
bandrami
I'm missing what value the word "stateless" adds to this description, and the
article didn't help

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

~~~
davidkpiano
Thank you - this is correct (the interpreter is impure). It also makes it
possible to create your own custom interpreters.

Also, your work has been a huge influence on XState, and I can't thank you
enough for SCION!

~~~
jbeard4
Thanks!

------
bradwoods
Hey pplz. For those asking about pairing Xstate with React, I made a library
using renderProps approach. [https://github.com/bradwoods/react-xstate-
js](https://github.com/bradwoods/react-xstate-js)

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

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

[https://github.com/gregwebs/StateTree#safety](https://github.com/gregwebs/StateTree#safety)

------
haskman
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](https://github.com/ajnsit/concur-js)

------
HocusLocus
What a dysfunctional '\--position: relative' no-scroll bar content wrong place
cut off anyway horror of a page, in FireFox.

------
chrisweekly
Looks awesome, a really clean and clear approach.

~~~
davidkpiano
Thank you, I appreciate it!

------
anentropic
I'm unclear - is it intended primarily as a modelling tool, or as a library
for implementing state-machine in JS app, or both?

~~~
davidkpiano
Both.

------
renownedmedia
This site destroys keyboard navigation. Space, arrow keys, page up/down all do
nothing.

~~~
davidkpiano
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:
..."

~~~
albedoa
He is not suggesting features, he is reporting an issue. It would be great if
this site did not break keyboard navigation :)

