The jQuery concept of Deferred objects feels a bit more complicated than what I used to do with MochiKit‘s Async library. It could simply be the naming conventions that jQuery has chosen.

Deferred asynchronous calls can be used for more than AJAX!

Most of the jQuery examples is that the authors choose AJAX-based calls for examples on how the Deferred objects work. Rather than doing a series of setInterval and setTimeout things to check for animations to be completed or animations to finish I can use Deferred calls to reliably tell me that the variables that I want are ready to rock and roll.

Best tutorials so far

• http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

Deferred is kind of hard to explain but this is the simplest way I can try:

• You instantiate a Deferred object in a function that you want to be asynchronous. (AJAX calls are Deferred but not all Deferred are AJAX)
• a [promise()] allows other variables & functions subscribe to notifications that Deferred is done or failed
• Deferred.resolve() tells all subscribers of the Deferred that the Deferred is done executing
• Functions passed into Deferred.done() will be executed if

In various parts of your code you can allow other variables to wait for an outcome Deferred

doSomethingWhenDeferredIsDoneDoingWhatItNeedsToDo = d.promise()

I really enjoy using Backbone.Marionette.

I was recently tasked with a pretty exciting opportunity at work: build a cross platform mobile web app. This project has been (still is) incredibly challenging for me because I’ve never built anything like this before. It’s probably the most complex JavaScript I’ve ever written and I was able to build a reasonably decent app from the ground up thanks to a few technologies and frameworks that made my life infinitely easier:

• Backbone.js framework
• Backbone.Marionette framework
• Jade javascript templates
• (Iced) CoffeeScript
• Stylus CSS
• jQuery Mobile
• jQuery + underscore (prereqs anyway)
• Mobile Boiler Plate
• Modernizr
• cdnjs (This has almost all of the above libraries on a CDN! Free! Magnificent.)
• a handful of utilities (makefiles, etc.) that our build engineer created in-house to package things up real nicely.

Figuring out how to use Backbone and Marionette took a long time for me to grasp but now that I’m comfortable using them I feel like I have the tools and skills necessary to build some cool stuff in the future. Maybe not GMail in complexity nor 8-bit Nintendo Emulator coolness but give me an API and some time, I’ll be able to whip up something that could be pretty neat.

Important Resources that helped me understand Marionette

These tutorials and code samples helped me the most when trying to pick up a new framework. I don’t watch a lot of screencasts because they tend to be really slow and I can’t copy-paste the code samples.

Tutorial: a full Backbone.Marionette application – is the first tutorial that I found that actually helped me wrap my head around Marionette. The code is easy to read and well explained. Downside — the structure and style are slightly different from the patterns that Derrick Bailey, creator of Marionette,  uses in his examples. The tutorial is slightly old and does not take advantage of newer features that have been added to Marionette (for instance, AMD-style loading). Nevertheless, this tutorial is what got me used to the basic elements of Marionette. Mr. Bailey’s blogs regarding Marionette are well written but they only started to make sense after 1-2 days of staring at this tutorial first.

Addy Osmani’s TodoMVC implemented in Marionette – A useful example of how to use Marionette but I find the JavaScript AMD code extremely hard to follow because all the code is spread around in different files. The order in which the various modules get included on the page matter.

Stack Overflow questions answered by Derrick Bailey – Back to Mr. Bailey… he is active/proactive in Stack Overflow and he often provides insightful answers and comments to many of the questions about backbone.marionette. It will benefit you to look beyond the big green check “Accepted Answer” blocks to seek out Mr. Bailey’s comments in any S.O. thread.

Backbone Marionette Docs in Github – the documentation is extensive and well written. The problem is that there are so many modules available to use it’s hard to know where to get started. In my first non-trivial Marionette app I only used half of the modules in my code (some of the modules are base classes but I didn’t specifically call them). The Marionette components that I used:

• Marionette.ItemView
• Marionette.CompositeView
• Marionette.Layout
• Marionette.Region
• Marionette.AppRouter
• Marionette.Application.Module
• Marionette.Application — just 1 instance but it provides the foundation for everything else.
• Backbone.View — I was easily able to adapt a View I had written before to work fine with Marionette. It would be possible to break my View into ItemView + CompositeView but not worth the time.
• Backbone.Model — a building block
• Backbone.Collection — a building block

I chose the jQuery Mobile (jQM) framework to help me organize my HTML and take advantage of its transitions and animation libraries. With a little bit of planning jQuery Mobile has turned out to compliment Marionette, I did however have to throw out a lot of jQM’s default JavaScript behavior.

My app architecture in a nutshell:

• Marionette.Application is the starting point, basically a singleton to get things started.
• My Marionette.Application provides a single point of contact for application-level event handling and tying together all of the component pieces of my various Backbone/Marionette Views and Controllers.

In the jQM paradigm Pages are a fundamental component. Each Page is demarcated by a <div data-role="page">. I have 3 basic jQM Pages. Each layout had a unique layout and imagine the wireframe looks something like below:

• a start page (id=start)
• a search page (id=search)
• and a google map page (id=gmap)

Rough layout

Since I had these 3 pages, it made sense to define each as a Region in Marionette. Although a Region has all kinds of bells and whistles I can get a way with using these top-level Page Regions to only hide/show an individual page.

• Each jQuery Mobile HTML block corresponds to its own Application.Module to maintain separation for the logic of my various views.
• jQuery Mobile Page. Each Layout has multiple Region areas within. Notice how I have nested Regions by having Region > Layout > Region(s)
• I get whatever content I need (in this case AJAX data from an API) whereby Backbone.Collection (i.e. a SQL table) contains many Backbone.Models (i.e. individual table rows)
• ItemView is a View for individual Backbone.Model objects
• In this case I use a CompositeView for my Backbone.Collection.
• As a Collection contains multiple Models, so too does a CompositeView contain multiple ItemViews
• A “show” call to Application.Region.Layout.SubRegion.show(CollectionCompositeView) will automatically cause the entire collection to render whereby the CompositeView wraps all of the individually rendered ItemView HTML. (think UL>LI*5, or TABLE>TR*5). The rendered aggregate HTML block will then be rendered into the region, replacing anything that was there before (may be override available)

https://github.com/cubiq/2-way-iScroll

The maker of the excellent SwipeView and iScroll 4 library for touch-enabled browsers has a somewhat unpublicized standalone library that has two-axis scrolling. It snaps if you swipe/scroll horizontally across columns (pages) and scrolls smoothly with momentum when you scroll vertically within a column.

Without modification I am able to use the library to create a reasonable snap-to-scroll on both X and Y axes.

The best thing about the library is that it will lock into a single scroll axis as you are scrolling. Beautiful!