33 posts tagged with "xstate"

We’re excited to announce the v5 beta release of XState and related packages after many years of development.

Tomorrow is part four in our popular Stately Stream series, where we are modeling a semi-complex client-side app using XState, Stately Studio, React and TypeScript. You can catch up on the previous videos in the series below or watch all our past videos in our Stately Streams YouTube playlist.

Two weeks ago, we had what some have called our “best office hours yet.” We introduced a whole bunch of new features and improvements to Stately Studio, including state.new with our new starter machine, annotations, embed mode, and version history. We also gave the first peek at our most significant editor update to date; we call it “codename: blocks,” check out the video to find out why!

It’s been more than six months since the release of Stately Studio 1.0, and we’ve been busy working on Stately Studio and XState. Here are some of the highlights:

Are you looking to take your team collaboration to the next level? Do you want to explore the features of Stately and XState to their fullest potential? Then book a live demo with the Stately team!

The time has finally come; our new docs are ready to share with you all. If you’ve been following our office hours, you know I’ve been talking about these docs for a long time. Thanks to Anders, who used Docusaurus to build us a rock solid easily-maintainable platform with search that actually works, and the whole team, who have contributed reviews, explainers, and examples to get these docs started.

One of our most-requested features has just landed in the Stately Studio; you can now import your machines from code!

Watch import from code in action in our latest video.

Importing from code is handy if you’ve already built machines while working with XState, or have created a machine using our older Stately Viz and haven’t yet tried the Stately visual editor.

The Stately team has got some huge features to share with you soon. We’ve been working hard through the summer, which is why we’re already halfway into September by the time I’ve gotten around to this update post.

Farzad and David add more features to their resizable panel using XState and React. Watch Part 1.

Check out the accompanying code on Code Sandbox.

Farzad and David use XState to build the logic for a resizable panel with React in an impromptu live stream.

Check out the accompanying code on CodeSandbox.

Watch part 2.

From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much.

Thankfully, there is a science (well, math) to side effects, formalized in state machines and statecharts, that can help us visually model and understand how to declaratively orchestrate effects, no matter how complex they get. In this talk, David ditches the useEffect hook and discovers how these computer science principles can be used to simplify effects in our React apps.

Using the XState extension for VS Code, you can create a state machine in seconds and edit the machine using our visual editor. Use the xsm snippet to quickly generate the code required for your state machine, then drag and drop inside our visual editor to rapidly model your machine.

Updates to our VS Code extension​

Our XState VS Code extension has now been installed 10k times! Install the extension yourself from inside VS Code or find the XState extension on the Open VSX Registry to enjoy the following new features.

Are you a React developer using XState to model your application logic? Perhaps you’ve heard of XState but have been looking for an easy way to try it out in one of your projects. If so, then I’d like to share with you a pattern I was introduced to when first diving into codebase at Stately, that of using custom machine hooks. This lightweight, reusable way to integrate XState into React components is a delight to work with and I think you might like it as much as I do!

On top of our usual minor improvements and bug fixes, we’ve got great new features to share with you in July!

XState can be used wherever JavaScript runs, whether on the backend or frontend. Because the code it creates can be visualized, it’s great at handling complex use cases - being able to see what a complex piece of code does can be extremely useful.

Let’s look at each use case one-by-one.

Our latest update to the XState VS Code extension has made it easy to enable file nesting for typegen files. But what is file nesting?

We’ve had a busy month and have plenty to share with you this June!

What’s new to XState and Stately for May 2022?

A few weeks ago we uploaded a new video to the Stately YouTube channel showing how you can build basic video player functionality using XState and Stately tools. You can watch the video below or use the chapter links to jump to the chapter you want to watch.

If you use VSCodium, Coder, Gitpod or another editor with VSCode-compatible extensions, you can now install the XState VSCode extension from the Open VSX Registry.

Around a month ago, we released TypeScript Typegen - an enormous upgrade to the TypeScript experience for XState.

We’ve had a great response to it so far, but it’s only been available for VSCode users.

Until now. With our new XState CLI, you can get Typegen from the command line.

Modelling using statecharts changed my career as a dev. Of all the state management solutions I’ve tried, it feels the most complete, logical and robust. Even if you don’t use them in your app’s code, statecharts let you break down complex features into states, events, services, actions and guards.

XState and TypeScript are a match made in heaven. TypeScript gives you type safety, and XState gives you logical safety. Together, they give you confidence that your code will do what you expect.

However, we’ve been hearing from the community for some time that the experience of using TypeScript with XState needed improving.

Today's your lucky day. XState’s TypeScript experience just got an enormous upgrade.

Managing state at different levels of complexity is hard. Different tools make different trade-offs between readability, complexity and speed of development. The worst part is that as apps get more complex, it’s easy to regret choices that were made early on.

This series of articles should help you make the right choice off the bat. The plan is to cover a bunch of state use cases, starting with the simple and graduating to more complexity as we go. We’ll see how easy they are to write, and also how they survive changing requirements.

Today, we’re starting with modals.

Many React applications follow the Flux architecture popularised by Redux. This setup can be characterised by a few key ideas:

1. It uses a single object at the top of your app which stores all application state, often called the store.
2. It provides a single dispatch function which can be used to send messages up to the store. Redux calls these actions, but I'll be calling them events - as they're known in XState.
3. How the store responds to these messages from the app are expressed in pure functions - most often in reducers.

This article won't go into depth on whether the Flux architecture is a good idea. David Khourshid's article Redux is half a pattern goes into great detail here. For the purposes of this article, we're going to assume that you like having a global store, and you want to replicate it in XState.

XState offers several primitives for representing long-running application processes. These are usually expressed as services. I’ve written a bit about services here - but today I wanted to talk about my favourite way of expressing services: the Invoked Callback.

XState offers several ways of orchestrating side effects. Since it’s a statechart tool, with significantly more power than a reducer, side effects are treated as a first-class concept.

State machines offer several API’s for expressing state. Like other tools, you can keep arbitrary values in a store (usually expressed as an object) called context.

The finite state machine is one of the oldest models of computation in computer science. It’s older than the web, older than any programming language you can think of, and probably older than you. Just ask Mealy (1955) or Moore (1956). Finite state machines (FSMs) can be implemented in any modern language using control-flow statements, yet there’s most likely a state machine library (if not many) in all of those languages.

XState can feel overwhelming. Once you’ve gone through Kyle or David’s courses and read through the docs, you’ll get a thorough understanding of the API. You’ll see that XState is the most powerful tool available for managing complex state.

The challenge comes when integrating XState with React. Where should state machines live in my React tree? How should I manage parent and child machines?

My code contains Horcruxes. I’m not proud to admit it, since to make a Horcrux you need to commit a murder. The murders seemed intuitive at the time, and were usually for expedience. But nonetheless, I am a murderer.

Let’s talk about how I got here.

XState version 4.7 has just been released. This is a minor version bump, but a major reworking of the internal algorithms, a lot of new capabilities, bug fixes, and a better TypeScript experience. It also paves the road for even more utilities, like @xstate/test and @xstate/react, as well as compatibility with other 3rd-party tools across the ecosystem, and even across languages.