HN Explorer

Ask HN: Do you use State Machines for UI dev?

27 points by orixilus ↗ HN
I've been searching for new, "better" workflows for UI development for enterprise applications (web based, SaaS) and been stumbling upon state-machines more than once.

Smashing Magazine has a nice writeup [0] today and there are some interesting libs ([1], [2], [3], [4]) already in JS.

My question is, does it work for you? Is this a better solution?

[0] https://www.smashingmagazine.com/2018/01/rise-state-machines/ [1] https://github.com/krasimir/stent [2] https://github.com/intersel/iFSM [3] https://github.com/burrows/statechart.js [4] https://github.com/jakesgordon/javascript-state-machine/

10 comments

[ 3.3 ms ] story [ 37.5 ms ] thread
itamarst
Everyone building a UI uses state machines. It's just that some of them are implicit, badly structured, and have broken edge cases.
orixilus
yes, my point was explicit use like those described in the articles mentioned. I'm looking for more information and best practices.
tetheta
I would check out https://github.com/davidkpiano/xstate It's the one I've been most tempted to try. Ryan Florence has a good video of it somewhere.

I haven't used explicit state machines in the past but there are a few apps that would have greatly benefited. I ended up using Redux reducers as a sort of pseudo state machine.

ecesena
I know it's not precisely what you're asking, but in the python world there's this new and pretty interesting library, Automat [1].

I believe it's used in Twisted, or at least that use case strongly influenced the lib design.

I also found this talk about Automat [2] very interesting (though, to be honest, I don't fully like the example described.)

Anyway, this is not js nor ui, but if you decide to go for building your own js lib, I'd definitely look into porting automat.

[1] https://github.com/glyph/automat

[2] https://youtu.be/MtHscXjWbVs

bigmanwalter
I don't use a state machine library, but I do put all my state in a single object, and define my state transitions as functions which operate on the object. The state is rendered into html using mithril.

I'm not sure what another library would add to this.

indescions_2018
Borrowing the concept of scene graphs from gamedev is one technique I like to use.

https://webglfundamentals.org/webgl/lessons/webgl-scene-grap...

Another data driven architecture is to make extensive use of the Dataset property. Every element has a unique key associated with it. And all keys map to state objects in a data store. It then becomes easier to iterate and extract the relevant queries and stats.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Us...

There's no perfect one size fits all solution. But data oriented design is a great tool for starting to break down your app. Best of luck!

orixilus
thanks everyone for your input
ahartman00
Yes, I've used jakesgordon's. I really recommend it, both the use of state machines and the library.

Using a state machine really helped making it obvious what needed to be cleaned up. If you have something with many states, which may even transition back and forth, it really organizes everything, making bugs less likely. It also prevents you from going to invalid states from the current state.

merrinkurian
I have seen state machine explicitly coded for handling menu items. Based on the current state, there are a bunch of menu items that need to be enabled/disabled. Prior to using state machine they were hand coding all these enable/disable logic. Regression testing was a nightmare. Once they moved to the state machine adding new menu items and testing became super easy. That is menu changes became config changes and not code changes.