Top-down Backbone Routers and application state

I’ve seen a lot of Backbone Routers over the years working with Backbone. Here’s what I’ve found is the best way to use them effectively.

Note: This is code is just an example. To see a working example you can run yourself head over to the github repo or check out the live demo.

var Router = Backbone.Router.extend({
    routes: {
        'foo': 'foo',
        'bar': 'bar'
    },

    navigateToAndTrigger: function(url) {
        this.navigate(url, {
            trigger: true
        });
    }
});

var AppModel = Backbone.Model.extend({
    onStateSelected: function(state, args) {
        this.set('state', state);
    }
});

var AppView = Backbone.View.extend({
    events: {
        'click a': '_navigateTo'
    },

    initialize: function(state, args) {
        this.listenTo(this.model, "change:state", this.onStateChange);
    },

    onStateChange: function(state) {
        this.$el.removeClass(this.model.previous('state'));
        this.$el.addClass(this.model.get('state'));
    },

    _navigateTo: function(e) {
        this.trigger('navigate', $(e.target).attr('href'));
        e.preventDefault();
    }
});

var router = new Router();
var appModel = new AppModel();
var appView = new AppView({
    model: appModel,
    el: '#app'
});

// Wire up the model to listen to the router for every route.
router.on('route', appModel.onStateSelected, appModel);
appView.on('navigate', router.navigateToAndTrigger, router);

Converting a Wordpress blog to Jekyll and Twitter Bootstrap

This is how I converted my long neglected blog from a Wordpress using some random theme to one powered by Jeykll using Twitter Bootstrap.

Tools you’ll need (and I assume you have installed)

• node.js
• Ruby
• Xcode (if on mac os x - Not just the Xcode Command line tools)

Twitterpillar - An example app using shared templates

I made the Twitterpillar app as a part of my recent SydJS presentation on sharing templates between the server and the browser.

The app will allow you to enter a twitter screen name and see what that user’s followers have tweeted recently. It’s made using the method of sharing templates between the server and browser which I described in the presentation.

In short, the templates are compiled on the server and used there to entirely render all pages requested. Also, the compiled templates are sent in the form of Javascript functions to the browser so it can update itself when the user performs an action rather than re-requesting the entire HTML page. Sent along with the HTML is the details of the user’s followers in json format. This data is requested by the app to produce the left-nav and follower details panel. It may as well be re-used by the browser so it is sent along at the bottom of the HTML. In this version, that data is not updated unless you refresh the entire page.

Introducing the Node.js Hogan Template Compiler module

In my previous post I described why you should pre-compile your templates on the server.

I’ve just created the Hogan Template Compiler module which makes it easier to implement the entire process. It’s a simple framework-agnostic npm module which:

• Pre-Compiles mustache templates and partials on the server.
• Stringifies partials for use in the browser.

Sharing pre-compiled templates between server and client with Hogan.js

At work we use Closure Templates to render HTML on the client. Closure Templates boast the lovely feature of being able to compile templates down to simple javascript functions on the server for use on the client. This is good because:

• it relieves the browser of having to compile your templates
• you don’t have to clutter your markup with template source and
• you can render on the client and server with exactly the same template without sending HTML down the wire.

Layers - Layered Architecture for node.js made easy

EDIT - This guide is kinda out of date and probably not that applicable anymore. Try using a supported library like Flatiron or just plain old Express but by no means let me stop you if you want to take Layers and run with it.

In my previous post A Layered Node.js Architecture using Express I wrote on the benefits of using a layered architecture and how to implement one in a node.js web app. This post goes one step further by introducing Layers, a module which will help automatically load and neatly setup the layers (and routes) of your web app.

Layers currently only supports Express, but adding support for other frameworks is simple. Feel free to submit a pull request!

The following is a description of how Layers works. For the impatient or code-hungry there is the working Layered Express example from which the following snippets are taken.

A Layered Node.js Architecture using Express

Using layers in your app is a good way to ensure separation of concerns. This post is not an in-depth description to this architecture pattern but more a quick description of each layer’s purpose and how I’ve implemented them in node using express. For the impatient, you can peruse the code of the working example here.

New Macbook Pro SSD before and after benchmarks

To Android Hell and back

I rooted my HTC Desire over three months ago using the great guide on android.modaco.com. Happily rooted for a month or so, I then took advantage of Paul’s r5 release of a Froyo Rom (now archived) which I installed with ROM Manager. It worked perfectly well and I was blown away by the massive performance boost Froyo delivers.

5 hints on holding an old school LAN

Old school LANs are a great way to keep in touch with friends, as like - in the same room - not on Facebook, whilst reliving some of the greatest games ever made such as Red Alert 2, Duke Nukem 3D and Carmageddon.

Here’s 5 hints to help you get your LAN up and running and making the most of it.