The Visual Future of State Management

Rate this content
Bookmark

Learn about state modeling with state machines and statecharts can improve the way you develop application logic, and get a sneak peek of never-before-seen upcoming visual tools that will take state management to the next level.

David Khourshid
David Khourshid
32 min
09 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This talk discusses the visual future of state management and the use of state machines and state charts. XState is introduced as a state machine and state chart library for JavaScript, providing a clean and visualizable way to represent state machines. The talk highlights the features of XState, such as its state-first approach and utilities for interpreting the machine as a service. It also mentions the future goals of XState, including visualization, testing, analytics, and the development of a visual software modeling suite called Stately.

Available in Español

1. Introduction to Visual Future of State Management

Short description:

Hello, my name is David Korshid. I want to talk to you today about the visual future of state management. Visuals serve as an exact specification of something that would be hard to describe with just text. The way we typically code application logic doesn't lend itself well to a visual formalism. Enter the reducer, which provides a way to contain all of this logic in a centralized convenient location. Dispatching events is a really good thing.

Hello, my name is David Korshid. I'm David K. Piano, pretty much everywhere online. And I want to talk to you today about the visual future of state management.

Now, what do we mean by visual? So you probably know what a Venn diagram is. It's a visual in an exact way of representing commonalities between two or more different things. And you might have also heard about a sequence diagram. And so this describes how different parts of a system communicate with each other. Now, diagrams like these are very useful for conveying relationships in a visually unambiguous way, each with their own special notations that mean specific things. And state machines and state charts, which I talk about a lot, those fall under the same visually exact diagram category in that they describe the logic and the behavior of some special entity using some special notation like arrows and boxes and regions.

Now, David Harold, the inventor of state charts, calls this a visual formalism. He describes that visual formalisms are diagrammatic and intuitive, yet mathematically rigorous and precise languages. So thus, despite their clear visual appearance, they come complete with a syntax that allows you to determine what's allowed and what's not allowed. And it also comes with semantics that determine what the allowed things actually mean. So these kinds of visuals serve a higher purpose than to just make your boring documentation look a little bit nicer. They serve as an exact specification of something that would be hard to describe with just text.

So the way that we typically code application logic doesn't really lend itself well to a visual formalism or to anything really. We tend to co-locate data and logic close to the source where it's used, such as directly in event handlers or in promises or in callbacks or things like that. Now while this may be convenience to code, the problem is that this logic is hard to understand, especially as it changes over time due to events or anything else that can happen. And you can't really discern what can happen exactly or how an application can respond to an event at any point in time. That connection logic, it resides mostly in the head of the developer who coded that logic, which isn't really useful. And worse with ad hoc logic, that tends to get repeated throughout the code base. So even if you attempt to drive this up, you have that same ad hoc logic living somewhere else instead of a centralized place where all of your logic lives.

So enter the reducer. Of course the reducer was popularized very early on by blocks and state management libraries like Redux. And reducers are what were used to provide a way to contain all of this logic in a centralized convenient location. So one important and hugely beneficial constraints of reducer is that it enforces you to interact with the logic via sending events or actions as they call it in React and Redux land. By the way, the naming of actions, I don't particularly like, I think it was a mistake. We're gonna be using the term events in place of actions throughout this presentation. But here's why dispatching events is a really good thing.

2. Introduction to State Machines and State Charts

Short description:

It forces you to reify what can happen in your app at any point in time. Reducers typically contain switch statements or if statements to discern what should happen when an event is received. State machines cleanly separate behaviors into finite states, preventing impossible states and transitions. State charts take the visual formalism of state machines further by introducing hierarchy and allowing for a clearer representation of complex logic. XState was created to provide a mathematically rigorous visual formalism for state charts.

It forces you to reify what can happen in your app at any point in time. So the user may click a button, a fetch may resolve or reject, a timer might go off. All of those are events. And thinking about your app in terms of events really simplifies the mental model. However, this isn't easily visualized either. Reducers typically contain switch statements or if statements to discern what should happen when an event is received. So that's distinguishing how the behavior of your app can change becomes a lot more difficult. It's mixed into those switch statements and you have to piece together all of that logic and navigate through a bunch of defensive statements like ternaries and if statements just to make sense of the logic.

So it's as if your reducer is a single statement in a state machine with the single state in a bunch of conditional and sometimes unnecessary transitions. It might work and it might do the job that it's supposed to do, but it's difficult to understand and it's still prone to impossible states and transitions. So state machines, by the way, they're like reducers and I talk about this pretty much everywhere online and state machines can also be written as reducers, but instead of mixing all the logic together, it cleanly separates behaviors into what are known as finite states. A finite state represents a behavior. What is the current states of an actor and how it could respond to events. So it might respond to an events by doing an action or by changing its behavior, which is represented by the transition arrows that you see here going from states to states. Or in events might not be handled. In which case the default behavior is to ignore the events. In reducers, this often requires a lot of defensive code like if statements. In state machines, it's built right into the mathematical model. And more practically, this kind of mechanism prevents impossible states, which guarantees that two behaviors can't occur at the same time. And it also prevents impossible transitions since all transitions between finite states must be explicitly written. And like you could tell over here, it lends itself well to visualization. We can understand how some actor can change its behavior by playing the events on the diagram, following the arrows and seeing what the next finite states should be.

Now, state charts take this same idea of a visual formalism introduced by state machines and it takes it one step further. It introduces hierarchy among many other things. So although state machines provide a way to cleanly organize logic, they suffer from combinatorial explosion of states and transitions, especially when different finite states are actually related. By extending the notion of state machines to be a hierarchical graph or a high graph as David Harrell calls it, we can group states together to represent common transitions cleanly. We can also isolate logic so that we see the bigger picture instead of having to understand all the little implementation details at once in a big flat structure. Like state machines, state charts are also mathematically rigorous visual formalisms. They can express a much higher degree of complexity than state machines and they can represent it in a clear and visual way. So that's why I created XState a few years ago.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? 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. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
State Management in React with Context and Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
Roy Derks
Roy Derks
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.