Xstate: State machines and statecharts for the modern web

by thunderbong • 3 years ago

178 77 3 years ago

swyx• 3 years ago

love how xstate makes implicit state machines explicit with a time tested (one might say Lindy) format. badly/ad hoc defined state machines are the source of so many bugs - David has been banging this particular drum the entire time i've known him (https://www.youtube.com/watch?v=HPoC-k7Rxwo&list=PLRvKvw42Rc...)

a4isms• 3 years ago

“Any sufficiently complicated model class contains an ad-hoc, informally-specified, bug-ridden, slow implementation of half of a state machine.”

–a former colleague

baq• 3 years ago

“I don’t need a state machine library” - everyone when starting a new project

vaughan• 3 years ago

I wonder if we could build better implicit state machines if we could more easily visualize our imperative code by annotating it with visualization hints and parsing the AST. Also easier to debug/step-through this way.

gherkinnn• 3 years ago

Then why not just make it explicit?

mattgreenrocks• 3 years ago

I need to write a post on this, but I've been using this pattern to great effect:

https://gist.github.com/andymatuschak/d5f0a8730ad601bcccae97...

It doesn't require a library, it binds states and effects together, it is completely pure, and it can be implemented in most any language, preferably one with sum types and exhaustiveness checking. It works equally well with both complex, time-dependent business logic as well as code that controls UI states.

I love state machines for help in writing robust code. The act of laying them out this way forces you to consider lots of intermediate states that are ignore or forget. Plus, the logic stays away from all the gunk of the platform, state machines are trivial to test, and, once you get used to them, are easy to read.

mhoad• 3 years ago

Seems you’re not alone. This was ripped out of Google’s Stadia platform I believe but might be wrong https://github.com/google/hierarchical-state-machine.dart

davnicwil10• 3 years ago

The readme gives the example of a traffic light to demo a state machine usecase.

Fair enough, but what's a rudimentary usecase for 'the modern web'?

What everyday UI thing is better done with this than other methods? Why is it better?

andy_ppp2• 3 years ago

Almost everything can be written as a state machine and arguably it’s very useful to do so, for example let’s take a note taking app, you can probably list a set of transitions that can happen to change the state of the app. Keeping the state changes separate from the UI is a good thing. In a way redux is a state machine too. Try it out on a project and see if it works for you!

davnicwil10• 3 years ago

Keeping the state changes separate from the UI is a good thing

Why? Can you give an example?

sonicrocketman5• 3 years ago

The real benefit for our project was being able to statically define, and therefore export the business process the app would follow. Once it's exportable, it's validatable and configurable.

IMO the JSON was hard to read, but we had a plan to build a GUI config builder that exported the state flows.

davnicwil10• 3 years ago

Ah yes, I can see this. I've also seen this kind of 'universally understandable spec of behaviour' attempted from the other direction with things like plain-language cucumber test definitions.

Emphasis on attempted, not sure I've ever seen it actually work as envisioned. Can see how bringing this directly into the code could remove some hurdles though.

Must say though I am a little skeptical on the readability / comprehensibility of the JSON format as you point out, but it's certainly a cool idea.

dakom2• 3 years ago

The ubiquitous waiting/loading/error(msg)/success(data)

Lots of frameworks and state management libraries already lean towards helpful design, in languages with async and ADTs as first-class citizens you've got a real leg up, but at the end of the day it comes down to preventing impossible states.

You can't have an error message when in the success state, you can't have success data while loading or waiting.

By preventing this at compiletime, it also means the UI can't ever show bogus data (i.e. it's impossible to have a success screen with the error message dangling at the bottom because somebody forgot to clear it)

davnicwil10• 3 years ago

I think a switch or an if/else expresses this really clearly though and also prevents impossible states.

joshribakoff3• 3 years ago

I think this is solved more generally with a discriminated union in typescript.

A state machine is the wrong solution unless you also need to restrict transitions themselves in my opinion

epolanski2• 3 years ago

The usual "the examples are so trivial to implement safely in other ways that I don't see the benefits".

simplotek• 3 years ago

What everyday UI thing is better done with this than other methods?

All of them.

Why is it better?

Because it specifies a workflow that actually matches what you want to do instead of employing a pile of ad-hoc rules that quickly become an unmaintainable mess.

If you have animations and async calls and multiple screens/pages, you have an application with application states which transition in response to inputs. That's what state machines are designed to handle.

Storyboards are state machines. Navigation components are state machines. UI binding layers like redux are state machines.

davnicwil10• 3 years ago

I hope you take this in good faith, but one often encounters claims in programming that a particular solution approach is universally better than alternatives for all usecases, often without accompanying concrete usecase examples, and the latter is exactly what I'm trying to dig out.

I am not saying you're wrong, but if you're right this would be the first case I've seen of it in my career so far :-)

joemckenney• 3 years ago

User onboarding, setup wizards, feature announcements, or, more generally, the modeling (and maybe implementation) of incremental, progressive user flows. The only caveat is that they tend to require the machine's state to be persisted so that the user doesn’t experience the same state(s) again.

Truthfully, using state machines at runtime for the use cases above is sometimes too heavy. That distinction is actually a big input to what I’ve been building at Dopt.

Our platform lets you build state machines that are initialized per user in your application via our SDKs—you design the machines in the platform, and we provide APIs to let you transition them based on user interaction/input. We’ve taken a bunch of inspiration from Xstate and statecharts. I actually wrote up a blog about how we took inspiration from the latter https://blog.dopt.com/state-machines-and-their-influence-on-...

mananaysiempre• 3 years ago

This is only incidental to your actual question (unless you’re into making widget toolkits), but have you seen the state diagram for a button widget[1]?

[1] https://web.stanford.edu/class/archive/cs/cs103/cs103.1142/b... (requires pointer and not touch input)

illiarian• 3 years ago

Ultimately every UI is a collection of various (often contradictory) states.

Example: Even typing into a text box on Hacker News is a new UI state: you have a different set of shortcuts, the keyboard works slightly differently, the browser has to keep track of the input if you suddenly press back and then forward again (some browsers maintain input in these cases), undo has to work within the scope of the textbox etc.

The more complex your UI becomes, the more contradictory states become, and need to be tracked. We're posting something over XHR/WebSockets? X amount of elements on the page have to be disabled, some state has to updated with save progress etc. We are logged in/logged out? We need to show a different state. There's an error in some part of the app? We need to block user from doing something and show errors etc.

If you can split those into actual states and allow interface and actions based on the current state, it becomes easier to reason about what is going on ini your app

strangeattractr• 3 years ago

I use it for in component logic in vue. Used to have a collection of boolean or enum variables that represent the state of the component and change according to actions e.g. const isLoadingUser = ref(true). This works but often leads to unforeseen states being possible and just isn't very clear. In contrast, with xstate you define all states and legal transitions and wire everything up to send events, you can write guards that prevent transitions. I transitioned all my complicated multi stage forms to xstate and since doing so they've become substantially more robust. I highly recommend trying to out.

dabernathy892• 3 years ago

I'm using it to control which fields in a form are visible based on values of other fields.

sonicrocketman5• 3 years ago

I was one half of a team that heavily leveraged XState in 2020. We used it to build a general-purpose kiosk app (in Electron) that could be updated remotely using an Xstate configuration served by a graphene-django app. One of the most technically impressive pieces of software I've ever had the pleasure to work on. (I mostly did server/backend stuff).

The entire kiosk device could be repurposed on the fly and Xstate + JSON schema form allowed for completely customizable & swappable UI.

Shame the project died.

jrvarela56• 3 years ago

Sounds awesome, given it died could you publish the source? Would be great to see how something like this is structured.

sonicrocketman5• 3 years ago

Unfortunately no. It was proprietary.

(we pushed to open source the guts, but to no avail)

Both of us reminisce about it though. We literally retooled the fleet of devices in a weekend to adapt to COVID and it worked. We interfaced with tons of hardware and even ran a customized debian image, all powered by RPis. Truly a nerd's dream project.

yagodragon• 3 years ago

I'm also exploring xstate for a similar use case and would love to know more about your experience with it. I'm particularly interested in understanding the level of customizability you allowed in your implementation.

My use case involves implementing various user flows in my app and I'm currently weighing the benefits of using xstate versus react-router.

Also, I'm curious about how you integrated graphql into this project. Could you share some details on that?

Lastly, I wanted to ask if you stored all the different configurations on a database or on git? If you used a database, how did you manage different schema versions?

sonicrocketman5• 3 years ago

Direct from the mouth of the other half of the team:

We used Xstate over react-router by using a parallel machine:

- One for application state - One for view state

We had to hack the innards of the events a bit to get the two machines to communicate. This allowed the view to re-render the jsonschema form at the exact right time, and not flicker on multiple state transitions.

In hindsight, graphql wasn’t as necessary as we initially thought. The important part was storing the mutation as a string as an xstate transition parameter. We used federation, so it did help us deal with multiple backends.

All database. Versions were handled by having a core machine that pulled the kiosk’s workflow from the server and ran it as a submachine. So the code on the device (core machine) could switch sub machine workflows on the fly between runs.

davidkpiano3• 3 years ago

Hey, creator of XState here!

Just want to mention that we're very close to releasing XState v5 beta, which brings even more features to the state machines & statecharts you can create, and greatly improves the developer experience, but also makes it more usable as a general-purpose state management library (or orchestration "framework" if you want to consider it that), whether on the frontend or backend.

fallingmeat• 3 years ago

do you foresee sysml like diagrams in your roadmap? if you could do activity diagrams with swimlanes…dude. that'd be huge.

davidkpiano3• 3 years ago

Yes! Visualizing how different actors communicate with each other in general is a big goal for us this year. We're going to start with sequence diagrams.

nickpeterson• 3 years ago

I know this probably isn’t on the radar, but process trees or pétri nets with token visualization feels doable, any interest in supporting those kinds of tools?

tobr• 3 years ago

Hello! I’ve looked at XState a bunch of times but always felt it seemed very involved for what it does. A simple “vanilla” state machine isn’t particularly complicated.

Are you sure you need to bring “even more features”, or rather, what are your thoughts on how feature-rich a state machine library needs to be?

julenx• 3 years ago

For vanilla state machines there's also @xstate/fsm. In their docs[1] you have a feature comparison.

[1] https://xstate.js.org/docs/packages/xstate-fsm/

ar-nelson• 3 years ago

Would you consider supporting Deno? (The npm module can probably be imported as-is in newer Deno versions, but a dedicated module is always nice and likely wouldn't be much work)

capableweb4• 3 years ago

If it (probably) already works as-is, why not just use it? Why is it nicer with a "dedicated module" if using it from npm is the same? More work is more work, reducing maintainer work is something we should strive towards, rather than adding "just a little bit of work".

satvikpendem• 3 years ago

I've seen XState more and more, recently, what are the pros and cons versus other state management solutions? Anything that XState fails at particularly that potential users should be aware of?

epolanski2• 3 years ago

Verbosity, complexity. It's probably overkill for 99.9% of the things you imagine.

Learning curve is more similar to rx-js or fp-ts than a state manager.

phpnode2• 3 years ago

when you do get over the learning curve it's really excellent though.

brigadier132• 3 years ago

The story for composition and reusability of multiple state machines is not good and it's not compatible with existing solutions for certain things (react query for example.) Supposedly this will all be fixed to some extent in v5 but that hasn't launched yet.

kidfiji• 3 years ago

Had the pleasure of working with XState at my last role. Where I found it greatly shined was being able to jump into a UI/machine I have never worked on before and contribute almost immediately after digesting the machine's definition

a-dub• 3 years ago

any thoughts on a custom DSL for defining and verifying abstract state machines and then machinery for generators for different languages/libraries/environments/visualizations?

lerchmo• 3 years ago

I have been using this XState alternative https://github.com/StoneCypher/jssm

I find the DSL much easier to wrap my head around than the json format of Xstate.

joshribakoff3• 3 years ago

I used it in the past and really disliked how it encouraged things like defining which functions to call by specifying a string with the function name. I would have much rather had it be more opinionated and require passing a reference to the function so it forces you to write code that benefits from typescript

phpnode2• 3 years ago

There's many benefits in having a state machine configuration that can be serialized, especially if you can store that config in a database and load it at runtime. And actually xstate does allow you to pass the functions directly if you want to

joshribakoff3• 3 years ago

Yes it allows strings or references to the function. My issue is that since the former is allowed, either people start using that method, or you have to start a “debate” within your team about patterns to avoid.

The serializability of your state itself has nothing to do with how events are bound to callback functions. If you serialize a string name of a function and not the source code of that function this buys you nothing. The source code itself is all text, so its serializable no matter whether the code is suitable for being statically analyzed

Rapzid• 3 years ago

I'm a simple man. I just want to embed a state machine in my objects. I want to let it know when an event occurs. I want it to let me know when an event occurs. Sigh..

Found xstates desire too control everything made a simple embedding use case really awkward. The hoops to jump through for good typescript support while breaking the config down into reusable components...

Really wanted to like xstates but it felt like it was trying to own the entire app and was sacrificing usability for some version of academic purity. Also, feels like a huge marketing effort is under way to over fit it as a solution to any problem containing the word "state"; ie as a React state management solution..

davidkpiano3• 3 years ago

Would love to know more about an example "simple embedding use-case" that you may have in mind.

We're not trying to force state machines as the solution for any state-related problem; they're not a panacea, but instead a useful tool for the appropriate use-cases.

And we're definitely making a huge effort to improve the types.

sanitycheck• 3 years ago

I had a similar reaction after trying it a couple of years ago. I only needed a fairly straightforward FSM for a video player UI, and I like to properly understand any libraries I use. Xstate seemed to have waay too much going on.

I ended up writing my own in about 80 lines of typescript in less time than it would have taken to finish going through the Xstate docs. Doubtless Xstate is exactly what's needed for some projects, but I suspect it's unnecessarily adding to the complexity of many more.

dabernathy892• 3 years ago

Ran into the same trouble re: TypeScript. Wanted to break up my definition into smaller chunks but it really did not like that.

gooseus• 3 years ago

I've gotten good results from asking ChatGPT to give me Xstate representations of machines that I describe, very cool to copy-paste* into the visualizer as a starting point.

* Only issue is that with so much active development since the training cut-off it usually outputs deprecated structure / patterns.

lenkite• 3 years ago

I always found it strange how state machines work so nicely in the small but tend to be difficult to scale up to large-scale, distributed systems.

Orchestrators like Kubernetes discourage designing state machines and transitions inside resource controllers. Instead a list of conditions associated with the object's status define a "phase" (state in k8s term). But there are no formal event-based transitions between states. Depending on the conditions and their tri-boolean values: True/False/Unknown, the object is effectively in a different phase.

Effectively, kubernetes recommends treating Resources like a game ECS - the controller is the system, the resource is the entity and the conditions are the state components.

instagary• 3 years ago

I tried XState for a mobile app.

Pros:

- The concept of states, events, and actions are an intuitive way to model state and the learning curve for me wasn't too bad.

- I enjoyed using the visual editor inside VSCode and after setting up TS, the codegen was pretty cool.

- The library supports parallel states.

Cons:

- The codegen was sometimes pretty bad for TS. There was some jank between the editor and the codegen, leading to frustrating DX.

paultarvydas• 3 years ago

There is a HUGE difference between StateCharts and State Machines, yet, the difference is subtle.

StateCharts are the "Strucured Programming" version of State Machines.

StateCharts use parental authority instead of inheritance (my words).

A child state machine cannot override the operation of a parent. A parent can yank children out of their current states back to some known state.

OOP and FP don't encourage this kind of thinking.

The Big Deal concerning state machines is the "state explosion problem". Harel's StateChart notation conquers this problem.

My reading of the original paper is here: https://guitarvydas.github.io/2020/12/09/StateCharts.html

troyharvey• 3 years ago

Had an absolute blast building an audio player web component with xstate! We deleted so much code by switching to a state machine design.

Emanation• 3 years ago

Add a description please. I get it's a state machine. I get states have state-tags, transitions can be ran via these transition-tags. What is your philosophy behind this library. Why should I give a fuck that states and transitions are strings rather than enums?

All I see here is a switch statement, the input is an enum, and the action that's taken is also determined by an enum.

Tade0• 3 years ago

We're using Xstate for state management instead of Redux and the like and it fits well for this purpose - chiefly I have an idiomatic way of defining which inputs are appropriate in different contexts.

The visualizer is a major selling point - especially if I need to explain something to non-dev people or someone new to the concept.

The one downside is that building state machines is an art in and of itself and I had to throw away my first implementation in favour of something simpler once I got the hang of it.

b0afc375b5• 3 years ago

I wanted to learn about state machines so I searched for reading material here in hackernews. Found out about statecharts and used it immediately to rewrite a frontend app. What a fantastic development experience. It feels like I finally graduated from spaghetti coding to disciplined programming.

Xstate: State machines and statecharts for the modern web

Related Stories