BackboneJS with Webpack: A lesson in optimization


Developing a large BackboneJS application presents a unique design problem. As developers, we like to organize our code so it is understandable, logical, and predictable. However, doing so can cause performance issues on the client side.

In this blog I will discuss a handy tool I like to use for this purpose: Webpack. I’ll show it in action, how to use it, and what it is good for. But first, let’s talk about how I came across Webpack.

An Example

On a previous project, I was building an audio and video streaming player. The frontend was developed using BackboneJS. I used libraries such as jQuery and SocketIO. Using Require shim configuration, I ended up with my dependencies / exports organized as follows.

    baseUrl: "js/",
    paths: {
        jquery: 'libs/jquery.js',
        underscore: '/libs/underscore.js/1.6.0/underscore-min',
        socketio: '/libs/',
        backbone: '/libs/backbone.js/1.1.0/backbone-min',
        templates: 'templates'
    shim: {
        'jquery': {
            exports: '$'
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        'underscore': {
            exports: '_'
        'socketio': {
            exports: 'io'

This worked great for my loading all my libraries. For each of my files, I defined the libraries I wanted to use. Breaking down each of my files into modules is a great way to handle organizing the large code base. Then I used the RequireJS AMD text resource loader plugin to load all template files.

], function($, _, Backbone, recordingTemplate) {
   // Do some stuff

At the time this was a decent solution. My code base was organized, easy to understand, and predictable. However, the larger my application became, a performance problem began to develop. For each template that was added, a new call to the server was made. This began to balloon the initial loading time of the application.


Loading of all templates

Wouldn’t it be great if all necessary resources were compacted into a single file, optimizing the loading time, and still be able to keep our code organized?

Developing a BackboneJS app all in a single file would be frustrating experience to manage. That’s where Webpack comes to the rescue.

What is Webpack?

Webpack is a module bundler that takes your files, compacts them, and generates a static file. Think of it as your own personal secretary there to help keep your life organized. You provide the configuration, it supplies the optimization.

Webpack’s primary goal is to keep initial loading time down. It does this by code splitting, and loaders.

Code Splitting

Code splitting is ideal for large applications where it is not efficient to put all code into a single file. Some blocks of code may only be useful for certain pages of the site. Using this opt-in feature allows you to define the split points in your code base, and Webpack will optimize the dependencies required to generate the optimal bundle.

var a = require("a");
require.ensure(["b"], function(require) {
    var c = require("c");

This example uses commonJS require.ensure to load resources on demand. The final output would contain two chunked files:

  • output.js – the primary entry point chunk containing
    • chunk loading logic
    • module A
  • 1.output.js – the additional chunk to be loaded on demand containing
    • module B
    • module C
[sixthpoint@sixthpoint webpack-code-splitting]$ webpack
Hash: e863fe1f9db99737fcd2
Version: webpack 1.12.2
Time: 564ms
      Asset       Size  Chunks             Chunk Names
  output.js     302 kB       0  [emitted]  main
1.output.js  172 bytes       1  [emitted]  
   [0] ./main.js 338 bytes {0} [built]
   [6] ./a.js 18 bytes {0} [built]
   [7] ./b.js 19 bytes {1} [built]
   [8] ./c.js 17 bytes {1} [built]


Loaders preprocess files as you use the require() method. Using a loader you can easy require() resources such as CSS, images, or compile-to JS languages (CoffeeScript or JSX).

By default, Webpack knows how to process your JavaScript files, minify, and combine them. But it doesn’t really know how to do much else. Loaders are the solution to processing different types of files and turn them into usable resources for your application.

Load bootstrap CSS file:


Create a image element, and set the src to the image resource file:

var img = document.createElement('img');
img.src = require('./bootstrap-logo.png');

Using the CLI all loaders can be defined in the webpack.config.js file.

module.exports = {
  entry: './main.js',
  output: {
    filename: 'output.js'       
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" },
      { test: /\.png$/, loader: "url-loader?mimetype=image/png" }

This example configuration file sets the application entry point, desired output file name for webpack to build, and a list of two loaders (CSS and PNG).

If you want to test this out for yourself, check out this github repo:

How do I use BackboneJS with Webpack?

Above I showed my starter application which had an initial loading performance issue. Remember all those template calls? Webpack async loading and code splitting is going to significantly decrease load times. Let’s assume my application needs only a two entry points:

  • #/nowplaying – will be responsible for loading data from
  • #/schedules – will display all scheduling information

To start I have modified my Webpack config file and using the providePlugin added jQuery, Backbone, and Underscore to the global scope of my application. I will no longer have to require these libraries through my app.  This is similar to the shim config above.

var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'output.js'       
  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.png$/, loader: "url-loader?mimetype=image/png" },
  plugins : [ new webpack.ProvidePlugin({
			$ : "jquery",
			Backbone : "backbone",
			_ : "underscore"
		}) ]

The most important file of this app is the Backbone router. The router defines the code splitting points.

Notice that by using require.ensure, I will load only the API resource when navigating to the now playing page. This way, if somebody never goes to the now playing page, the resources for that page will never have to be loaded. If the user navigates to the now playing page, it will then be cached for if they return, for performance reasons.

var AppRouter = Backbone.Router.extend({
	routes : {
		'nowplaying' : 'nowplaying',
		'schedule' : 'schedule',
		'*actions' : 'home'

var initialize = function() {
	var appRouter = new AppRouter;

	appRouter.on('route:home', function() {
		$('#content').text("Home Screen");

	appRouter.on('route:nowplaying', function() {
		require.ensure([], function() {
                    // nowPlayingView contains socketIO resource

	appRouter.on('route:schedule', function() {
		require.ensure([], function() {


module.exports = initialize;

So how does Webpack organize this? Simple, both the now playing view (1.output.js) and the schedule view (2.output.js) get their respective files since they are async loaded.

Here is the output of the terminal, as expected:

[sixthpoint@sixthpoint webpack-backboneJS-socketIO-client]$ webpack
Hash: b29b2a6017bad0dd0577
Version: webpack 1.12.2
Time: 808ms
      Asset       Size  Chunks             Chunk Names
  output.js     388 kB       0  [emitted]  main
1.output.js     180 kB       1  [emitted]  
2.output.js  248 bytes       2  [emitted]  
   [0] ./main.js 54 bytes {0} [built]
   [1] ./router.js 604 bytes {0} [built]
   [5] ./nowplayingView.js 132 bytes {1} [built]
  [56] ./scheduleView.js 37 bytes {2} [built]
    + 53 hidden modules

Final Thoughts

What kind of project is Webpack good for? Webpack is great for any scale of project. It is simple to use and configure. Anyone who is developing a JavaScript application should consider using Webpack for its performance improvements and excellent set of plugins.

The complete source code of the optimized project can be found on github:

BackboneJS utilizing a event aggregator


When creating dynamic single page applications (SPA) a project can become rather large containing multiple views. These views may need to share or be alerted if the other view changes. BackboneJS can alert views if models data changes using the listenTo method.

this.listenTo(this.model, 'change', this.render);

However, lets assume you do not wish to pass a reference to a model in each of the views. It would be nice to have a way to pass data between the views another way; hence an event aggregator.

To demonstrate this consider this simple wine application. A user has the ability to modify the wine name or year. When the user data is submitted a dispatcher event is triggered alerting the wineView to rerender the set contents.

The Application

The first step is to create each view and pass in the event aggregator.

var aggregator = _.extend({}, Backbone.Events);

var formView = new FormView({ag: aggregator, model: new WineModel()});
var wineView = new WineView({ag: aggregator});

The formView binds to the click of the setData event which will update our wine model data. It then uses the event aggregators trigger method to alert all other views listening (the wineView) of the new data. The wine data model is passed in the trigger so a reference to the wine model is not needed in the wineView.

var FormView = Backbone.View.extend({
    el: '#input',
    aggregator: null,
    initialize: function (options) {
        this.aggregator =;
    events: {
        "click #setData": "setData",
        "click .reset": "reset"
    render: function () {
        return this;
    setData: function () {
        if ($("#name").val() !== "") {
            this.model.set({name: $("#name").val()});
        if ($("#year").val() !== "") {
            this.model.set({year: $("#year").val()});
        this.aggregator.trigger("aggregateEvent", this.model);

        return false;
    reset: function () {
        this.aggregator.trigger("aggregateEvent", this.model);

        return false;

The wineView binds to the event “aggregateEvent” and when it is fired rerenders the view using the model data passed from the formView.

var WineView = Backbone.View.extend({
    el: '#output',
    initialize: function (options) {
        _.bindAll(this, "render");"aggregateEvent", this.render);
    render: function (model) {
        var compiledTemplate = _.template(WineTemplate)(model.toJSON());
        return this;

To see this event aggregator in action checkout my Github page and checkout a working example.

Reverse sort json objects


I had a case that required taking the latest 10 articles and place them in descending order in a collection. To do this I needed to reverse insert the articles into my collection. The reason for this is that the API handed out the articles in ascending order, which I did not want.

The solution to reverse insert articles in my backboneJS collection.

var t = [];
for (var name in articles) {
   t[name] = articles[name];

var len = t.length;
while (len--) {
   if (t[len] !== undefined) {