How To Build a Backbone-Fortified User Story Editor for the VersionOne REST Data API
Developing Custom VersionOne Apps 101 Series Guide
In our last couple of posts, How To Build a Barebones User Story Editor in JSFiddle with jQuery, JSON, and the VersionOne REST Data API and Understand jQuery’s Magic in the Barebones User Story Editor, we created and examined the code for a “Barebones Story Editor”, all by hand, using HTML form elements and some help from jQuery.
But, wouldn’t it be nice if we could make it easier to use, maintain, and customize?
After all, who wants to have to go in to a block of HTML and add a bunch of markup just because you need another field from your domain to show up? Not you? Not me, either.
In this article, you will
- Refactor the Barebones Story Editor to become fortified with the popular Backbone.js open source library
- Learn how to extend Backbone.Model and override its functions to work with existing HTTP APIs — such as VersionOne’s, naturallly
- Learn the Backbone Forms library for creating HTML forms automagically from simple JS-based schemas
- Use some handy features of Underscore.js, Backbone’s counterpart library for functional utilities
What you’ll need
- Like before, I’ve tested these in Google Chrome, but not other browsers yet. Please let me know if you find issues in other browsers.
Introduction and live JSFiddle finished product
Want to skip my speel and go straight to the live demo? Be my guest: Backbone-Fortified VersionOne User Story Editor for the VersionOne REST Data API
- There’s even Knockback.js
I don’t have experience with all of these, but the VersionOne Development Team has been using several of these, notably Backbone.js. So, in this article, we’re going to leverage Backbone.js, its sidekick Underscore.js, and a library named Backbone Forms that extends Backbone with form-creation and validation magical powers.
Learn you a JS library for great good
Don’t do this now, unless you like juggling a thousand tabs in your browser, but if you are new to these libraries and want to go further in depth, I encourage you to check out these links:
- Throne of JS conference videos and interviews – Friendlyish competition between 7 frameworks: Backbone.js, Ember.js, Meteor.js, AngularJS, Spine.js, CanJS, and Knockout.js
Back on task, agile soldier!
I already gave you the demo, but don’t be a cheater. Keep going and build it step-by-step now:
Create an HTML Skeleton
Get started by doing this:
- Using Google Chrome, browse to our fiddle template at http://jsfiddle.net/JoshGough/tU2Ww/
Forkat the top, which will create a new copy for you to use
- Type or paste the following HTML into the HTML panel of the fiddle:
[gist id=4685389 file=gistfile1.html]
Notice that instead of specifying all our form elements manually, we simply have a placeholder:
[gist id=4685389 file=gistfile2.html]
This replaces the much more verbose HTML from before:
[gist id=4685389 file=gistfile3.html]
I have refrained from adding comments to the code for ease of reading, but you can visit the Gist, or the live JSFiddle to see an exhaustively commented version. Hey, even type the comments in yourself if you learn better that way. Knock yourself out! In the next article, we’ll study more about Backbone Forms and Backbone.Model to understand them better.
[gist id=4685389 file=gistfile4.js]
[gist id=4685389 file=gistfile6.css]
You’re done! You can run it or try the live JSFiddle if you’d like.
We’ll dig deeper into the technical explanation of Backbone Forms and Backbone.Model in the next article, but from a high level, here’s what we’re starting to accomplish with our code:
- Full embrace of REST’s generic interface — via Backbone.Model and Backbone.ync, with its clear mapping to the GET, PUT, POST, DELETE, and PATCH standard HTTP methods. With the exception of the small amount of overridden code we added to our derivation of Backbone.Model, we have effectively eliminated the need for a “custom data access component” to communicate with the VersionOne REST Data API, or indeed any REST API.
- Reduced amount of tedious HTML form markup through the use of Backbone Forms, moving us toward a more declarative style of programming than an imperative style.
One last task: change the code!
Given that we just saw how easy it is to declare what form fields, and thus what attributes we want from VersionOne’s REST API, I believe’ll be able to do this pretty easily with no help:
- Fork the JSFiddle, and
- Modify the program so that the RequestedBy field is on the top, and
- The Name field is below Description
- Remove the Estimate field
- Add a field called ToDo (hint, it’s of type Number, and yes it is case-sensitive) — I’m serious, this is a real VersionOne attribute for a User Story, so try it
Go learn more in our next article: Understand Backbone Forms and Backbone.Model’s Two-Way Data Binding by Playing Around in the Chrome Developer Console.
Until next time, stay agile, not fragile.