A couple of the JavaScript MVC frameworks I’ve been playing with lately are Spine.js and Backbone.js. While they share many similarities, one area they differ in is the number of tutorials. Backbone has many working native JavaScript tutorials. Spine’s are largely written in Coffeescript. While I appreciate Coffeescript, I wanted to write a simple native JavaScript Spine app to give the framework a spin. None of the working examples I were found were written in JavaScript, so I thought “Hey! Good opportunity to write a simple Spine tutorial!”.

The tutorial assumes you’ve already read at least some of Spine’s documentation. My goal is not to repeat the existing documentation, only to provide a simple tutorial that works, so I’ll keep this post short and the code comments thorough.

The sample data is similar to what you might find in a Google Adwords interface. Campaigns have ad groups, and ad groups have keywords. Campaigns, Ad Groups, and Keywords all have their own models. Each cell in the grid, and the grid itself, get Controllers. The click events on the cells are handled by the jQuery fisheyeGrid plugin, so they’re absent from the controllers. In the keyword cells are a link you can click to change its color. That color state is stored in localstorage in the examples below where it’s enabled. The views are created by Handlebars.js, and rendered to the page in the controllers.

Technologies used in this tutorial:

• jQuery fisheyeGrid plugin for styling, animation, and cell click events
• Spine.js, a client-side JavaScript MVC framework, for models, controllers, and view rendering
• Handlebars.js Templates for view creation/compilation
• HTML5 local storage (via spine.local, spine’s localstorage plugin. It’s disabled on this page and working in the example.)
• HTML5 boilerplate for the basic HTML and CSS
• JSON (for sample data)
• CSS for styling

Ways to access the code:

• View the project on GitHub
• Download the zipped tutorial and files
• Play with a working example on jsFiddle (minus localstorage)

A post discussing the visual/interaction design is coming next. Feel free to post questions/comments here or on GitHub.

Finally, here’s what you should see when running the example:

Staging environments can be expensive in time and materials.  Turns out there's a way to bypass all of that for testing JavaScript.  It's also easy to learn, quick to implement, works across platforms and browsers, and best of all, free.

Test Your Code On Your Live Site!

No kidding. Using a file loader like Require.js, you can get a JavaScript staging environment running in less time than it takes to decide on a physical server. Here's how:

//if you don't already have a namespace, create one to keep things tidy.
var foo={};

// List the live files you would normally load.
foo.loadFilesStr="file1.js,file2.js,file3.js";

// Get your favorite cookie reading function.  Here's one I use.
foo.strToObj=function(str,keySplit,pairSplit){var y={},k=keySplit||'&',fn=k.substr?'split':'match',a=str[fn](k),i=0,p,L=a.length;for(;L>i;i++){p=a[i][fn](pairSplit||'=');y[p[0]]=p[1]||''}return y};

// Pick a cookie name.  "devEnv" works.
foo.devCookieName= 'devEnv';

// Read the cookies
foo.cookie = foo.strToObj( document.cookie, '; ', '=');

// get the dev cookie's value.
foo.devCookieVal=foo.cookie[foo.devCookieName];

// if a value exists, replace your normal files with a string of files from the cookie
if( foo.devCookieVal ){ foo.loadFilesStr = foo.devCookieVal.split(',') }

// make them an array to prep them for your favorite script loader.
foo.loadFilesArray=foo.loadFilesStr.split(',');

// and load the scripts.
require(foo.loadFilesStr, function(){
    $(document).ready(function(){ do stuff here })
});

Finally, change the files you want to load with a bookmarklet that displays and sets the cookie values, like this one.

javascript:(function(foo,cookieName){
  var cookieVal=foo.cookie[cookieName]||'',
  filesArray = cookieVal.split(','), // get the cookie value
  i=0, // set an iterator
  L=filesArray.length, // and a length for the files array
  tempStr='', // and a temporary string to append file names to for display
  userEnteredStr = (function () {
    for (;L>i;i++) { // loop over file names
      (tempStr += ('\n\n' + filesArray[i])); // append them for display
    }
    var reply = prompt ( // prompt for any changes
      cookieName + ' will be set to the following paths:' + tempStr +
      '\n\nChange the cookie value below to alter them. '+
      'Leave blank or cancel to remove the cookie',
      cookieVal // display the val if one exists
    );
    return reply;
  })(),
  expir = (userEnteredStr ? (new Date((new Date).getTime() + 1e11).toGMTString()) : '-1'), // set the expiration
  newCookieVal = (cookieName + '=' + (userEnteredStr||'') + '; expires=' + expir + '; path=/'); // set the new value
  document.cookie = newCookieVal; // write the cookie
  alert (userEnteredStr ? ('setting\n' + newCookieVal) : cookieName+' removed'); // notify the action taken
})(foo,foo.devCookieName);

Finally, for developer usability I set a notification to indicate what files are loading.

$('body').prepend(
   '<div id="devCookieVals" style="position:fixed;left:0;top:0;z-index:1000;">'+
   '<span style="background-color:#777;color:#DDD">Dev Files Loaded:</span> '+
   foo.cookie[foo.cookieName]+'</div>');

That's it.  Visitors will continue receiving the live files. You can load any set of files you'd like by clicking your bookmarklet and refreshing, including new jQuery versions, unit tests, and more. Enjoy!