
Ask HN: Do you use State Machines for UI dev? - orixilus
I&#x27;ve been searching for new, &quot;better&quot; workflows for UI development for enterprise applications (web based, SaaS) and been stumbling upon state-machines more than once.<p>Smashing Magazine has a nice writeup [0] today and there are some interesting libs ([1], [2], [3], [4]) already in JS.<p>My question is, does it work for you? Is this a better solution?<p>[0] https:&#x2F;&#x2F;www.smashingmagazine.com&#x2F;2018&#x2F;01&#x2F;rise-state-machines&#x2F;
[1] https:&#x2F;&#x2F;github.com&#x2F;krasimir&#x2F;stent
[2] https:&#x2F;&#x2F;github.com&#x2F;intersel&#x2F;iFSM
[3] https:&#x2F;&#x2F;github.com&#x2F;burrows&#x2F;statechart.js
[4] https:&#x2F;&#x2F;github.com&#x2F;jakesgordon&#x2F;javascript-state-machine&#x2F;
======
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...](https://webglfundamentals.org/webgl/lessons/webgl-scene-graph.html)

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...](https://developer.mozilla.org/en-
US/docs/Learn/HTML/Howto/Use_data_attributes)

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!

------
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](https://github.com/glyph/automat)

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

------
tetheta
I would check out
[https://github.com/davidkpiano/xstate](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.

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

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

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

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

------
fvargas
This video on the use of Finite State Machines in the context of React/JS may
be of interest:

[https://www.youtube.com/watch?v=VU1NKX6Qkxc](https://www.youtube.com/watch?v=VU1NKX6Qkxc)

------
orixilus
thanks everyone for your input

