BlogFebruary 2020

Integrating UI designs with state machines in React

author
By Todd Wilson

There are many design tools that help designers in the hand-off process that show developers how each concept should be executed. They do tend to leave a lot to interpretation and have a simple way of presenting their vision. You end up with a series of clickable mockups that demonstrate how the designs should be executed, in one scenario.

When you start to build out complex user interfaces that include many different steps and transitions, this can be a hard process to follow. It can be even more difficult to try and map out all of those conditions within a React application, which is more involved than say, a simple toggle.

Most applications will start out by having to account for a loading state until dynamic data is fetched and resolved in the browser. Then, as you begin to build out the various states of your application, more flags are added to handle each transition.

Of course, users have a way of finding how to break your application because we generally build and test within a common set of patterns. It’s often a challenge to ensure that your application isn’t in two states at the same time, or by avoiding other artifacts as you layer on additional features and complexity.

What if the user interface and design process started out by defining the application in a series of steps, given a wireframe or visual tool? How might this help change the development process?

I came across this visual tool called Sketch.systems while exploring the xstate library with react. This would allow for the finite states to be defined in the “Spec” with interface prototypes and each state can be defined in a way that can describe any actions or transitions that might also be needed.

What I also like about Sketch.systems is that it has an export feature so that you can get the xstate JSON you need, or you can use the visualizer tool. From there, you can begin looking at how this might work within react using the xstate-react package.

I found several inspiring examples of this and a way to get acquainted is by having a look at a toggle example or how this might look with various React hooks or Vuejs.

While learning how to use state machines with user interfaces, it’s helpful to outline what state charts are as well.

What is a statechart?

The primary feature of statecharts is that states can be organized in a hierarchy: A statechart is a state machine where each state in the state machine may define its own subordinate state machines, called substates. Those states can again define substates.

https://statecharts.github.io/what-is-a-statechart.html

Model based testing

David Khourshid wrote an article on css-tricks that describes how you can create a test model and the advantages of them. There is a bit of setup but the payoff seems evident, as it greatly simplifies the testing process.

Since manually writing full tests is eliminated from the test creation process, adding or removing new features no longer becomes a test maintenance burden. The abstract model only needs to be updated, without touching any other part of the testing code.

Here are some additional resources and links that I found helpful:

reactjs, state charts, state machines, xstate