Functional, stateless JavaScript finite state machines and statecharts | Hacker News Reader

Functional, stateless JavaScript finite state machines and statecharts

xstate.js.org

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

;-D

Thanks for building! Just got turned onto XState through a recent Chrome Dev summit talk where it's used to demo a simple stopwatch

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

I've also managed to avoid frameworks for some UIs and just use XState + RxJS. For example: https://codepen.io/davidkpiano/pen/zWrRye

I can't get any of the pen's interactive effects to work on my mobile device.

You can fork the pen and implement them. Have fun!

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

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

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

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?

I'm actually working on such a tool! I'll have a beta out in early 2019.

For now, you can use this visualizer: https://statecharts.github.io/xstate-viz

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)

Thanks and congrats for hitting the first page!

A typical GUI is a state machine (though not always a finite state machine).

Much of what a typical React + Redux app does is implementing a state machine.

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

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

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

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.

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 missing what value the word "stateless" adds to this description, and the article didn't help

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.

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!

Thanks!

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.

I would call it "external state". Instead of having the state tightly coupled to the state machine it can be persisted somewhere else.

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

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.

https://github.com/gregwebs/StateTree#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

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

Looks awesome, a really clean and clear approach.

Thank you, I appreciate it!

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

Both.

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

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

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

Reply on news.ycombinator.com