Javascript Enhancement on Simply Agile
By Andrew Bruce on Friday 12th June 10:20 PM
John and I had a rather heated debate about the initial functionality that should ship with Simply Agile on its first release. John's concept of dragging stories around a virtual whiteboard seemed a bit too web 2.0 for my liking, as I tend to favour producing sites that work without JavaScript before implementing anything fancy.
We argued for a bit over a bad Italian meal before coming to the realisation that a perfect compromise could be reached. Instead of producing a pure JavaScript interface in parallel with, or instead of a straightforward HTML representation, we could use the progressive enhancement approach, in a rather extreme form, to produce both.
We wanted Simply Agile's active iteration view to be analogous to a board with story cards in columns according to their status. This is now a fairly common interface for project management tools. The conclusion of our discussion was that this interface is essentially a bunch of forms representing stories, each with radio buttons representing statuses. So, in Simply Agile, we present this HTML form-based structure to the user and use JQuery to transform the HTML into a drag-and-drop interface.
With this model, each radio button becomes a 'droppable' and its group's currently selected value becomes the 'draggable'. When a draggable is dropped onto a droppable, the underlying form is updated and submitted using AJAX, in order to save the state of the story.
In addition to this status-changing interface, the Rails backend exposes a JSON representation of the statuses of all the iteration's stories. This is queried periodically to update other user's status changes on your own screen.
Planning
A similar approach is used on the iteration planning screen, where we wanted stories to be moved into the iteration once they had been estimated. Instead of radio buttons, the logical HTML representation was a series of checkboxes that dictate whether to include or exclude a particular story from an iteration. Unlike the active iteration view, we didn't want the changes to be made immediately.
So for this model, the DOM is manipulated when each story is moved into the iteration and the (hidden) checkbox is checked when a story is moved across. That way, when the form is finally submitted i.e. the user decides that the iteration plan is ready, the submission is straightforward with no extra JavaScript required.
The result
The upshot of these enhanced-form interfaces is that one can operate Simply Agile from links, or from an iPhone (since we disable JavaScript for iPhones) with a less elegant yet fully functional interface. What's more, we got that functionality without writing much extra code.