Why State Machines Make Your Life Easier (with Video)

Learn how state machines can make development a little easier, including tips for better UI development.

UI development is more complex than it appears. In fact, behind all of your favorite UI elements and actions lie secret machines: state machines. Once you understand how to manage state and state machines, it'll make your life easier.

For example, state might be either

var IsLoggedIn = false

Or

var IsLoggedIn = true

But there's still more complexity there: is that login in progress? Is that login successful?

That's the challenge UI engineers and developers face; in fact, UI expert Krasimir Tsonev suggests managing state is what those UI developers spend most of their time doing. If it were easy, it wouldn't take that much time.

(Of course, nothing is as easy as it seems, but managing state doesn't even *seem* easy.)

Tsonev, in his presentation from DevReach (see the full video below), dives right into the thorniest issues of managing state, and teaches you how understanding and state machines can make your life easier.

All of those state variables in the example with which Tsonev starts are the "elephant in the room." State is a variable that changes over time: his explanation is very clear (watch it!), contrasting state management and data management.

Every app, he explains, has unique state management, making frameworks hard to apply.

Given the scope of the problem, he then explains how we got here over time, starting in 2006. In an epiphany recently, he explains that perhaps there's no state management, but, instead, data and flow management.

We are writing and implementing state machines every day: they store your states; accepting input to change the state. He explains a real-world example of a turnstile with either a locked or unlocked state, and which inputs result in which state.

You can visualize each state in a table form:

State > input > transition to what state

You can envision each state, each input, and what the resulting transition state is. He walks through a detailed example to make sure you're ready to try it in your own apps, understanding how the state machine operates.

Working through the state table helps you engineer your state machines so that they respond appropriately to each input — and respond only to the correct inputs you've designed. It helps you, similarly, to handle errors elegantly as well.

Once the general concepts are understood and the state planning is done, Tsonev gives clear and specific examples in code to help you best understand how to get started.

Give Tsonev's presentation a look and make your UI state management easier. Watch the whole presentation from DevReach:

About the Presenter

Thanks to Krasimir Tsonev for demystifying State Machines. He's an experienced developer and the author of Node.js Blueprints and Node.js by Example. Find him at: @KrasimirTsonev, krasimir (GitHub), and antidote.me.