How to Handling UI State for Single Page App With Backbone

Question

Bear with me as I am coming from a traditional web development background, using ASP.Net, and even server side MVC. I am attempting to build a highly interactive single-page application using Backbone.js to help organize my javascript code and build the UI.

I am having trouble with some concepts, or approaches to building the components of my UI, and deciding how to handle certain aspects. I am going to use this oversimplified screen shot as a basis for my questions and discussion.

Let's use a "TO-DO" application as an example (of course.) The UI is pretty simple. I have the following "components"...

• A results list which shows the current set of to-dos that match the currently selected criteria
• A list of my to-do lists (Personal, Work, Blog Project)
• A list of due date filters (Today, Tomorrow, This Week, Next Week)
• A list of tags (Bug, Feature, Idea, Follow Up)
• A search box

Desired Functionality

• Update the results whenever any of the search criteria changes (choose a list, choose a due data, choose one or more tags, enter search text, etc.)
• The user can edit, add, and delete lists. (not really shown in this mock up)
• The user can edit, add, and delete tags. (not really shown in this mock up)
• The user can edit, add, and delete to-do items. (not really shown in this mock up)

Data Models

There are several models that I identified that are "data" related. These were easy to identify.

• ToDo (represents a single to-do item)
• ToDoCollection (represents a collection of to-do items)
• ToDoList (represents a single to-do list)
• ToDoListCollection (represents a collection of to-do lists)
• Tag (represents a single tag)
• TagCollection (represents a collection of tags)

How to Store UI State?

This is where I am having trouble. I want to show which items in my menus (on the left side) are currently selected. I can certainly listen for events and add a "selected" class to items as they are selected, but I also have rules, like "only one list can be selected at a time", but "any number of tags" can be selected at a time. Also, because the To-Do List menu and the tags menu are dynamic, they already are associated with a ToDoListCollection and TagCollection models already. They are rendered according to the state of these "data models".

So, how do I handle the management of this UI state for all these different views using Backbone? I appreciate any ideas or suggestions.

Thanks!

Answer 1

I had exactly the question you did, and I'll let you know the secret: cheat.

What you have here is two different application layers, and some confusion about them. The first layer is the relationship between to-do objects in your system. These, you store in a traditional object relational model, and you create/retrieve/update/delete them as you would any other RESTful application.

The second layer is the relationship between your display of these objects, and the objects themselves. There's some state there you want to preserve. Here's the important insight: as long as every object GET, PUT, or POSTED to the system has a unique ID, the second layer can be completely independent of the first.

The first layer is a RESTful API to "a to-do manager." The second is something unique to this presentation. It's relationship to data in the first is tenuous. So here's what I did: I encoded that presentation layer state into a JSON object and wrote it to an 8-bit clean text field in the user's profile. Every time the user changes state, I do that.

When the app loads, it loads the bulk of the data from the REST API and the presentation layer information, discards any in the presentation layer that doesn't make sense, and then starts Backbone.History and initializes the presentation. And the server doesn't need to know any details at all about how the client works. As long as the client speaks your RESTful lingo, it can save "miscellaneous things this particular client cares about" to that text field without affecting your objects or their relationship.