Designing State

State Designer is built to help you design and manage the state of a user interface. You might already be familiar with the idea of state management—but what does it mean to design a state?

In this article, you’ll learn about the ideas and philosophy behind State Designer and get a better idea of the problems that it tries to solve.

All user interfaces relate to some sort of information. We use the term state to refer to the information’s most current version. When an event occurs that changes the information, that change produces a new state and updates the user interface.

In its most simple terms, a user interface only needs to do two things:

1. Show the current state to the user
2. Respond to events by changing the state

Sounds easy enough—and, when it’s done right, a user interface can feel very natural. However, for several reasons, getting it right is often very hard to do.

In the past, the most difficult part of building a user interface was making sure that the user would always “see” the latest state.

Thankfully, recent tools and frameworks such as React and Vue have essentially solved this problem for us. Whatever our state is, we can be confident that our user interface will stay in sync as the state changes.

While this makes the job of building a user interface much easier, we’re still left with problem of actually designing how the user interface works. This involves answering several critical questions:

• What information matters to the user interface?
• What events can occur—and under what circumstances?
• How should these events change the state?

These are fundamentally design problems: creative decisions about how the user interface should function in order to fulfill its purpose. Like any design problem, finding a good answer involves experimentation, iteration, and plenty of dead ends.

However, on the other side of these design problems are equally tricky implementation problems, and there are dozens of state management libraries focused just on getting state to work in a project. In state management, the questions are different:

• How do I get the most recent version of the state?
• Where should I put the logic surrounding events?
• How do I actually make changes to the state?

And here’s the problem:

At present, both of these tasks—designing how the user interface should work, and then of implementation that solution—are almost always performed together in code. However, the code we use to manage state is often very poorly suited for designing state.

This under-tooling can lead to a painful design process, difficult bugs in a state’s logic, and a resulting state that can exist only in its implementation—impossible to chart, visualize, or represent abstractly.

Like other state management libraries, State Designer provides a reliable, flexible and effective way of implementing state in a JavaScript or TypeScript project. However, unlike most tools, it was built from the start to treat state as a design problem.

You’ll find its API and feature set tuned specifically to design concerns. If you’ve struggled with making decisions about state in the past, then you might like what you find.

If you’d like to learn more, you can start learning State Designer right away by reading the guide. Check out some examples to see what finished projects look like—or kick off a new project with a template.