1991-2016—25 years of Art & Logic

Representing Marionette.js Views with State

You want to create a simple login page for your new website, all written to be dynamic using Backbone.js and Marionette.js. To accomplish this, you listen for the login button to be pressed and then use jQuery to disable the form controls and display a loading message. An invalid login message comes back, so you reenable the form, highlight the incorrect fields, display a message, etc. The user presses login again… uh oh, you forgot to add code that removes the highlighted fields and hides the error message div.

Login dialog with username and password inputted. An error message is displayed informing the user that the username and/or password are incorrect. The password field has been focused and highlighted for the user.

Your view logic is starting to become tedious and you never know if you’ve covered all the possible paths through your user interface. However, there may be a solution to make your view more organized and predictable: states.

The State Machine

The first step to implementing this is coming up with the states that you’re going to need. After starting with some obvious state and thinking about each situation, I came up with the following state machine.

Initial state is Not Authenticated. When form is submitted, we enter the Pending Authentication state. If the server responds with HTTP 200, enter Authentication Success state. If the server responds with HTTP 404, enter the Authentication Failure state. If the server responds with any other HTTP status code, enter the Authentication Unknown state. The Authentication Success state is the final state. The Authentication Failure and Unknown states both lead to the Pending Authentication state when the form is submitted again.

This assumes that you have a backend API for authenticating users that returns HTTP 200 when the username and password are found to lead to a valid user, and HTTP 404 when the combination of username and password are not found in the users database.

Marionette.js Frontend Code

Overview

To implement this, you will need to create a module that acts as the controller, a model for the form data and state information, a Marionette.js ItemView that renders that model, and an Underscore.js template that is populated by the ItemView. I coded up an example implementation below with some extra narration in the form of code comments. I prefer to write Backbone.js code in CoffeeScript, but it will work just as well in JavaScript of course.

Module (Controller)

Model

View

Underscore.js Template

Isn’t That Better?

Instead of having to code up a bunch of messy if/else if statements to transition your UI between the states and handle reverting elements back to their defaults when needed, you just have a single switch statement that takes your default UI and modifies it appropriately for the state that your model is in. This will make your UI logic much more readable, predictable, and extensible.

Matt Bajoras

Matt Bajoras

Matt Bajoras

Latest posts by Matt Bajoras (see all)

Tags:

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

1 Comment

  1. bashilbers

    seems like solid code to me!

Contact Us