Sweet Berry Wine!

I don’t know if it’s art, but I know what I hate. And I don’t hate this.


In the words of Dr. Steve Brule, “Wine was invented by the Romans, for orgies. But orgies aren’t too much fun when no one wants to do it with you.”

Some of the most powerful men in Silicon Valley are regulars at exclusive, drug-fueled, sex-laced parties—gatherings they describe not as scandalous, or even secret, but as a bold, unconventional lifestyle choice.

“Incidentally, thank you for not making fun of my genitalia.”

via “Oh My God, This Is So F—ed Up”: Inside Silicon Valley’s Secretive, Orgiastic Dark Side | Vanity Fair

Asynchronous Backbone Routing


So, the Backbone scene isn’t what it used to be. But, I recently implemented a Backbone solution with RequireJS. I really like having the ability to “lazy load” resources on demand.

Anyone who has worked with Backbone’s router knows that your code can get quite lengthy when the number of routes starts to grow. The example below shows a simple router with three routes. But what if you have ten? What then?

// Backbone's sample router
var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7

  help: function() {

  search: function(query, page) {


I started out by placing the actual routes in a separate file that I could read in to my router.js file. I created a new file for the routes and moved them in there. I added the JSON and Text plugins for RequireJS so I could load the data from the routes.json file.

I used the routes to create a new instance of a Backbone Router.

var AppRouter = Backbone.Router.extend({ routes: routes });

Since I already had the routes as a JavaScript object, I used them to create a single-dimension array.

var appRouter = new AppRouter();
var views = Object.keys(appRouter.routes).map(function (c) {
 return c;

I also made sure that each route had the same name as its respective view-controller. So, the route to help should load a file named help.js.

Then, I simply needed to iterate over the array of routes, defining routing event handlers for each one. I embed a require function call that loads the respective view-controller, passing it in to the callback function.

Once inside the function, I instantiate the Backbone View class and call its render function.

views.forEach(function(view) {
    appRouter.on('route:' + view, function() {
        require(['views/' + view], function (ViewClass) {
            var viewInstance = new ViewClass();

Et voila!

One caveat: loading Backbone views asynchronously can cause events to re-bind when the view is loaded again. This can lead to weird UI side-effects, like “ghost” or “zombie view” problems. Derick Bailey discusses how to resolve such issue in his Los Techies article.