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);

Read More ⇒

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.

Read More ⇒

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.

Read More ⇒

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.

Read More ⇒

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.

Read More ⇒

Two months with Swype

I'm writing this review on my Android powered HTC Desire using a new, custom keyboard called Swype.

Swype allows you to type whilst barely lifting your finger from the screen. As the name suggests, you swype your finger from letter to letter instead of tapping. This constructs a sort of letter trail which, once you lift your finger is inspected and the top ranking word from the letters you swyped is inserted. If there is more than one match, it will offer up a list of suggested words.

Read More ⇒

Mac Mini Server NAS

I've been pretty unimpressed with Apple's recent hardware upgrades. I've not found myself the slightest bit excited by anything since the iPhone (which I still can't justify).

Until now.

The new Mac Mini Server is totally sweet.

Read More ⇒

Maximizing Javascript Minimization and Readability

By using a combination of the YUI Compressor and the Revealing Module Pattern you can maximise the effect of minimisation and, as a bonus, improve code readability.

The YUI Compressor renames local variable names and references to a single character. It can do this as it knows these variables cannot be accessed outside their function. On the other hand, it does not rename window level variables or any variable or function reference using dot notation.

Read More ⇒

Recipe: Tortillas

A simple recipe for a quick dinner.

Tortilas are a very basic type of bread. They are made by poor people in poor countries by the tonne every day. However in the first world, Tortillas are bloody expensive. At industrial scales these things should cost 10c each, but you'll pay a damn-sight more than that if you go to the super market to buy them. Maybe it's the plastic packaging and/or the transport, but in 2009 a packet of 6 can cost as much as $4!

Ingredients (10-12 Tortillas):

  • 1 Cup water
  • 3 Cups flour (Substitute 1 cup for corn meal if you have some)
  • 3/4 tsp salt
  • 2 tsp baking soda.

Read More ⇒

Recipe: Fresh pasta the easy way.

I battled for years to make fresh pasta by hand, until Jamie Oliver showed me the easy way. Up until that point I thought he was just an empty celebrity chef!

Ingredients per person

  • 1 x egg at room temperature
  • 100g plain white flour

Read More ⇒

837 billion australian dollars

The US federal reserve bank has decided to put together a 'package' of $USD700 billion to help prevent the greed of stock brokers destroying the modern world. That is, of course, with special clauses which will ensure that they have a controlling hold on it's future.

Read More ⇒

Google Chrome – First Impressions

Google Chrome has hit the ground running. I'm totally blown away with how fast it is in comparison to Firefox. That said, though, it's not yet lumbered down with plugins.

User Interface

The user interface, whilst remaining familiar, is revolutionary. I feel that it reflects the programatical approach taken in it's construction. The way the tabs rule over the buttons and URL bar says to me that this tab is another instance of Chrome within the Chrome Controller window. Better yet, the total lack of any user interface with the use of an 'application shortcut' is fantastic. It allows the web-app developer to create true web based applications without being lumbered with needless controls. Gmail and Reader feel like real applications now.

Read More ⇒

Leucopogon microphyllus

I took this photo whilst attending my girlfriends Hockey match in Pennant Hills. It's a Leucopogon microphyllus, a flower my sister helped me identify with her copy of Flora of New South Wales. Thanks to her I'll know what I'm taking photos of from now on. Thanks Lel!

Read More ⇒

The Australian Gardener

orangery

My late Grandfather was an avid gardener. He had more than half of his very large Sydney backyard dedicated to the growing of fruit and vegetables. I was lucky enough to inherit a couple of his gardening books of which were both first published in the 1950's.

Read More ⇒

Finding your top music with Last Played & Last Skipped iTunes Smart Playlists

I worked at a Music magazine once which saw a whole heap of un-categorised music dumped into my iTunes library (for research of course). Most of this music is not to my liking, however there are some golden tunes floating around in there which I would love to hear again rather than have them sink back into the jungle of confusion that is my iTunes library.

I love playlists. I love them so much I have one for each album I own. One down-side of this is that when these playlists are sync'd to your iPod, you only ever hear the songs in these lists. The great majority of my iTunes library was going unlistened to! The solution was to create a Smart Playlist which pulled out music I haven't listened to in the last few months. It looks something like this:

Read More ⇒