The TodoMVC UI ( 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:

I have identified four application states: readyForAddreadyForAddSelect, readyForAddUnselectDelete, and readyForAddSelectUnselectDelete. The state readyForAdd, for instance, implies only add events can be emitted from this state, while the readyForAddSelect state can only emit add and select events.

You may also like:
Model-View-Controller (MVC) Deep Dive.

Events and State Configuration

The next step is to configure the events and states captured in the above table as JavaScript objects. The events are captured like:

The application states are captured like:

View — HTML Template

The HTML template that I consider for this demo is:

I am using some custom utility tags, like InputCompCheckboxGroupComp, and ButtonComp. The JavaScript code loads content into these elements.


The model for the application is:

The controller, stateTransitionsManager(), receives all the application emitted events and dispatches them to a processor, along with a callback function (handlePostEvent()). When the processor completes its task (possibly long-running), it invokes the callback function by passing it a new custom event as an argument.

The complete source for the demo is on GitHub.

An online demo for this implementation is available at the Todo App.

The demo page also echoes the state transition for each state as info text. The user should be able to walk through the various transitions listed in the table above. Here are the screen captures from the above demo, corresponding to the four states identified in the table:

ready for add event readyForAddSelect 

ready for add select event readyForAddUnselectDelete 

Ready for add unselect delete event


Ready for add select unselect delete


The proposed state machine based UI development pattern is shown to provide a clean and simple framework for the development of robust UI applications. Once the states and events are identified, development is fairly straight-forward. 

Related Works

Interested readers may also checkout davidkpiano, lucaszmakuchimmerjs, and overmindjs. Readers interested in applying similar techniques for backend Java Spring Boot applications can checkout this DZone article.

Source link

Write A Comment