What the Fork is xState?

Evergreen

🌳

Last tended Jan 22, 2020

Illustrated Notes

Web Development

JavaScript

is a snazzy way to manage JavaScript application state using visual state charts. It's a pretty wonderful tool for making sure you think through every possible edge case of an application.

There's also a handy

visualiser tool

that synchronizes your code and visuals. If you edit one, the other changes to match. ✨

It's perfect for visual thinkers. If someone could just build one of these for the entire of JavaScript I'll be all set.

Here's a little more illustrated detail on how this works:

Xstate is a tool that helps you plan out all the possible states in a JavaScript app

There's a handy interactive visualizer tool at xstate.js.org/viz

A sequence of light bulbs swapping states between unlit, lit, dim, and broken.

We can add extra options onto our states such as actions, services, guards, and activities

If you're keen to learn more xState there's two courses up on egghead that cover all the basics:

Want more illustrated notes on web development?

Take a look at

Building VR Apps with React360

A Journey into Vue-Router

, or

Immutable Data with Immer and Personal Assistant Bots

Linked References

What the Fork is React Suspense?

Suspense is an upcoming React feature that's part of the new "concurrent mode." Since everyone is getting all hyped up about it, I wanted to figure out what the excitement was and drew some quick…

A Journey into Vue-Router

I haven't explored the Vue framework much but it's got a thriving community, and I wanted to see how it compared to React, Svelte, and the 20 other font-end framework options. I got to see inside…

Want to share?

Tell Twitter About It