The TodoMVC Revisited

The TodoMVC UI (todomvc.com) application is widely considered to be the "Hello World" for UI development. The site has several demos using various frontend technologies. In this article, I explore the use of a state machine for the development of the TodoMVC UI application. I'll use the vanilla JavaScript to illustrate these concepts, and I'll use the state machine framework that I presented in a previous article.

State Transitions

The first step in using the state machine is to write the state transitions for the UI of our application. I'll assume the following state transitions for the TodoMVC app (screen capture is at the bottom of the page) that I am considering here:

A Non-Blocking State Machine

Learn more about non-blocking state machines in this quick post!

In a previous article, I presented a simple state machine for Spring Boot projects. I mentioned that the framework is easy to customize for new requirements. In this article, I illustrate the customization of the framework for a situation where one or more processors need to be non-blocking.

A Simple State Machine for Spring Boot Projects

There are many articles and open-source projects on state machines (Ref#1) that can be searched on Google or GitHub. The Spring team itself provides a state machine framework (Ref#2). However, I found these frameworks not easy to customize. Furthermore, it was not easy to add logs and throw custom exceptions where I needed. So I created a simple implementation of the state machine that can be easily integrated into Spring Boot applications. 

The idea of a state machine is to define a set of state transitions where each transition is affected by an event. For instance, Wikipedia has an example for a turnstile that has the Locked and Unlocked states, which are affected by the events "coin" and "push". The turnstile's state transitions from Locked to Unlocked when the "coin" event happens. It transitions from Unlocked to Locked when a "push" event happens. The state machine enforces that when the turnstile is in the Locked state the "push" event has no effect. Similarly, when the turnstile is in the Unlocked state the "coin" event has no effect.