After spending a few weeks during code freeze at work and trying out all these libraries we began development for a mobile application. In an effort to rapidly prototype the web application I began to build with jQuery Mobile. This gave our team common components that work across a wide range of devices without overloading us with testing. Also the theme roller for jQuery Mobile is a handy tool for the building a base skin for the mobile site. With only a few sketches and by generating a mobile theme that looked very blueprint-ish we began authoring a site prototype to work out the features and components that should be included in the mobile site application. Since the site framework is built with Backbone we will not use the jQuery Mobile routing features; however for the prototype this mobile framework was very handy right out of the box. Recently there have been many talks and articles on the concept of “mobile first”, basically the small screen helps to define what really matters and helps to put usability as a high priority. This ends up striking a nice balance between identifying requirements for design, usability and the application’s functionality. Using the logic-less template library, Mustache to render JSON from the web service layer is much funner than all kinds of crazy DOM fragment manipulation to render data. I found a great tutorial post on using HTML Templates with Mustache.js.
I am developing the framework based on Backbone.js which has the dependency of the Underscore.js library – a very robust set of tools that complement Backbone, especially with filtering collections. Also, Backbone needs either jQuery or Zepto, I am content with jQuery. The Deferred and Callbacks objects in the current version of jQuery also help to manage asynchronous behaviors of the components within the framework. For example, I can add a Deferred object to a collection and within a view object only render after the resolution of the deferred property of the required collection object. The Callbacks object comes in handy using a view object that programmatically renders partial templates based on various child views, I can iterate over options passed to a view and define child views based on the options, then add to the (parent) view object’s render method callbacks to render the child views. Though Backbone does not provide (out of the box) a collection view; there are good solutions posted online. So, when I need to program some behavior that is not included in Backbone, I often discover good solutions online that I can borrow from. For me, the bottom line is that Backbone gives common patterns for developing a data-driven application backed by a RESTful API and is very extendable. Backbone does not box me in, yet is fairly straight forward for me to build on top of, also giving solid structure to the components I need in developing a modular application.
Node.js came in very handy in authoring a shell script to prep and build using the r.js optimizer. I needed to have a site that can be hosted in a cloud environment with out any server-side script execution. So adding to the RequireJS optimizer script I added a release script to modify my build.js and index.html files to utilize a specified build directory. And, node is just cool, right?