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:
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 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
The model for the application is:
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:
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.
Interested readers may also checkout davidkpiano, lucaszmakuch, immerjs, and overmindjs. Readers interested in applying similar techniques for backend Java Spring Boot applications can checkout this DZone article.