Question

I’m writing a backbone.js app. I have multiple js, css and html template files. I also have a script to crunch them into a single file so it is faster to download. How should I work during development:

1. Add a listener to the file system and after every change compile the files so I can see it in a browser. This implies a 1-2 seconds overhead before I can see what I did, which is annoying for html fine-tuning.

2. Somehow browse using the multiple files during development and only crunch before going to production. This means I need to have a separate index.html for dev and prod.

What’s your take?

Answer 1

I use Minify to combine and minify my JS, and in my index.html for my backbone apps, I simply have a code block like this:

   if (APP._dev === true) {
        // So on development, we load all the files individually
        $.when(
                // Utilities
                $.getScript(APP._rootDir + 'app/js/util.js'),

                // Models
                $.getScript(APP._rootDir + 'app/js/models/Timer.js'),
                $.getScript(APP._rootDir + 'app/js/models/Section.js'),

                // Collections
                $.getScript(APP._rootDir + 'app/js/collections/Timers.js'),
                $.getScript(APP._rootDir + 'app/js/collections/Sections.js'),

                // Views
                $.getScript(APP._rootDir + 'app/js/views/TitleView.js'),
                $.getScript(APP._rootDir + 'app/js/views/BackgroundAudioView.js'),

                // Router
                $.getScript(APP._rootDir + 'app/js/routers/APPRouter.js'),

                // Load in our templates file and add each template to a
                // proerty visible in our application scope
                $.get(APP._rootDir + 'app/js/templates/all.html',function(result){
                    var tmp = $('<div></div>').html(result);
                    $('script.template', tmp).each(function(){
                        APP._templates[this.id] = $(this).html();
                    });
                },'html'),

                // Here we create a new deferred object which we will bind
                // to JQuery's ready() event.
                $.Deferred(function (deferred) {

                    // DOM Ready. Invokes our APP.init() function.
                    $(deferred.resolve); // init
                })
        ).done(
                APP.init
        ).fail(
                function () { /* fail how you would like */ }
        );
    } else {
        $.when(
                // And on prod, we load a combined & minified JS file instead
                $.getScript(APP._rootDir + 'min/?g=js'),

                // Load in our templates file and add each template to a
                // proerty visible in our application scope
                $.get(APP._rootDir + 'app/js/templates/all.html',function(result){
                    var tmp = $('<div></div>').html(result);
                    $('script.template', tmp).each(function(){
                        APP._templates[this.id] = $(this).html();
                    });
                },'html'),

                // Here we create a new deferred object which we will bind
                // to JQuery's ready() event.
                $.Deferred(function (deferred) {

                    // DOM Ready. Invokes our APP.init() function.
                    $(deferred.resolve); // init
                })
        ).done(
                APP.init
        ).fail(
                function () { /* fail how you would like */ }
        );
    }

Then, in my groupsConfig in my Minify’s /min/ directory, I define my build array to match jQuery’s deferred object load order:

return array(
    'js' => array(
        '//' . $rootDir . '/util.js',

        '//' . $rootDir . '/models/Timer.js',
        '//' . $rootDir . '/models/Section.js',

        '//' . $rootDir . '/collections/Timers.js',
        '//' . $rootDir . '/collections/Sections.js',

        '//' . $rootDir . '/views/TitleView.js',
        '//' . $rootDir . '/views/BackgroundAudioView.js',

        '//' . $rootDir . '/routers/APPRouter.js'
    ),
    'css' => array(),
);

It’s probably not as DRY as it could be but it works and you can tweak it for your needs.