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 Editorwe 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.

Let’s revamp the last sample so that all it takes to add a new field is a simple configuration change at the top of a small script. In the process, we’ll incorporate some great and popular JavaScript libraries to reduce the amount of boilerplate code we need to write and maintain!

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

So, how can you learn to build similar apps of your own? Well, these days, you haven’t really lived the JavaScript life unless you are using some (or all?) of the hot and popular JavaScript libraries. If you’re reading this, then maybe you know the list even better than I do. Here are a bunch of popular ones I know of:

JavaScript libraries: an embarrassment of riches

The list goes on, and on, and on! These libraries serve a multitude of purposes, but many attempt to provide an “MV*” approach to cliet-side JavaScript development, with many of them providing strong support for consuming and updating HTTP and REST-based server side APIs.

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:

  • TodoMVC – Ambitious comparison matrix using the obligatory Todos app implemented in hundreds of different JavaScript MV* libraries. I believe if you create a JavaScript library and fail to create a Todos app, you get branded with a scarlet T on your head.
  • 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
  • Client UI Smackdown – Craig Walls reviews several JavaScript client-side UI frameworks: Backbone.js, Spine.js, Knockout.js, Knockback.js, Sammy.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/
  • Click Fork at 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]

Add some vertebrae to the JavaScript with Backbone.js and friends

The refactored JavaScript code is so small, 75 lines, that you can just type or paste it in all at once.  I encourage you to type, not paste the code, however, for better understanding.

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]

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 summary

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:

  1. Fork the JSFiddle, and
  2. Modify the program so that the RequestedBy field is on the top, and
  3. The Name field is below Description
  4. Remove the Estimate field
  5. 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

Next up

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.

Join the Discussion

    There are currently no comments.

    3 + 7 =