6 ms·

Functional, stateless JavaScript finite state machines and statecharts

mpweiher 8y ago
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.
- stevew20 8y ago
  Where's the downvote button?
bandrami 8y ago
I'm missing what value the word "stateless" adds to this description, and the article didn't help
- jbeard4 8y ago
  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 8y ago
    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 8y ago
      Thanks!
  - jmakeig 8y ago
    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.
- maxxxxx 8y ago
  I would call it "external state". Instead of having the state tightly coupled to the state machine it can be persisted somewhere else.
davidkpiano 8y ago
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 8y ago
  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 8y ago
    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
    - deleted 8y ago
      [deleted]
  - deleted 8y ago
    [deleted]
- ArtWomb 8y ago
  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 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 ;)
allenu 8y ago
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?
- davidkpiano 8y ago
  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 https://statecharts.github.io/xstate-viz
- good-idea 8y ago
  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 https://sketch.systems - it's not a 'drawing' tool but you could export an XState object and put that in another tool
- serindu 8y ago
  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 8y ago
    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 8y ago
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!
- nine_k 8y ago
  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.
- davidkpiano 8y ago
  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 8y ago
    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 8y ago
      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 :)
brianzelip 8y ago
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....
renownedmedia 8y ago
This site destroys keyboard navigation. Space, arrow keys, page up/down all do nothing.
- davidkpiano 8y ago
  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 8y ago
    He is not suggesting features, he is reporting an issue. It would be great if this site did not break keyboard navigation :)
bradwoods 8y ago
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
chrisweekly 8y ago
Looks awesome, a really clean and clear approach.
- davidkpiano 8y ago
  Thank you, I appreciate it!
markc 8y ago
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/HOWTO-blog.md 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/ztellman/automat , https://github.com/cdorrat/reduce-fsm https://github.com/cdorrat/reduce-fsm , https://github.com/jedahu/spaghetti https://github.com/jedahu/spaghetti
gregwebs 8y ago
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 8y ago
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
anentropic 8y ago
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 8y ago
  Both.
HocusLocus 8y ago
What a dysfunctional '--position: relative' no-scroll bar content wrong place cut off anyway horror of a page, in FireFox.

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.

stevew20 8y ago
Where's the downvote button?

bandrami 8y ago

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

jbeard4 8y ago
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 8y ago
  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 8y ago
    Thanks!
- jmakeig 8y ago
  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.
maxxxxx 8y ago
I would call it "external state". Instead of having the state tightly coupled to the state machine it can be persisted somewhere else.

davidkpiano 8y ago

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 8y ago
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 8y ago
  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
  - deleted 8y ago
    [deleted]
- deleted 8y ago
  [deleted]
ArtWomb 8y ago
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 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 ;)

allenu 8y ago

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?

davidkpiano 8y ago
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 https://statecharts.github.io/xstate-viz
good-idea 8y ago
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 https://sketch.systems - it's not a 'drawing' tool but you could export an XState object and put that in another tool
serindu 8y ago
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 8y ago
  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 8y ago

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!

nine_k 8y ago
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.
davidkpiano 8y ago
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 8y ago
  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 8y ago
    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 :)

brianzelip 8y ago

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

renownedmedia 8y ago

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

davidkpiano 8y ago
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 8y ago
  He is not suggesting features, he is reporting an issue. It would be great if this site did not break keyboard navigation :)

bradwoods 8y ago

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

chrisweekly 8y ago

Looks awesome, a really clean and clear approach.

davidkpiano 8y ago
Thank you, I appreciate it!

markc 8y ago

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/HOWTO-blog.md 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/ztellman/automat , https://github.com/cdorrat/reduce-fsm https://github.com/cdorrat/reduce-fsm , https://github.com/jedahu/spaghetti https://github.com/jedahu/spaghetti

gregwebs 8y ago

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 8y ago

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

anentropic 8y ago

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 8y ago
Both.

HocusLocus 8y ago

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