Last Updated Feb 07, 2013 — Enterprise Agile Planning expert
How To Build a Backbone/Fortified User Story Editor for the VersionOne REST Data API
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.
- There's even Knockback.js
Learn you a JS library for great goodDon'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 SkeletonGet 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:
CSS code[gist id=4685389 file=gistfile6.css] You're done! You can run it or try the live JSFiddle if you'd like.
Code summaryWe'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