Refactoring Large Web Applications with Backbone.js

I was fortunate in May of 2015 to have been selected to give a talk at dev.Objective() conference in Minneapolis, MN. It was my first time speaking at a conference and it was a really positive one. Everyone was nice and supportive.

I spoke about my experience working on a large traditional style web application with a large team of developers and how I helped to turn the JavaScript from jQuery spaghetti code into organized, modular, testable code with the help of Backbone.js, Jasmine, RequireJS, and eventually Browserify.

Here are my slides from the talk:

Refactoring Large Web Applications with Backbone.js

Jasmine with Custom Templates

For one of the sites I work on, SiteCatalyst (Adobe Analytics) is used to gather metrics. This library needs to be included inside the <body>. This was problematic when I wanted to use grunt-contrib-jasmine to run my Jasmine unit tests headlessly with PhantomJS & Grunt (aka from the command line) since by default it generates a spec runner with all referenced JS in the <head>.

That’s when I read about using Jasmine Templates. This seemed like the solution but the documentation and getting to a working solution wasn’t super straight forward.

I wanted to be able to pass in some variables to reference a minified version of the Adobe Analytics JavaScript (AppMeasurement.min-x.x.x.js) and a non-minified version (AppMeasurement-x.x.x.js) to run unit tests before and after the minification. So for the jasmine task in my Gruntfile.js I had to specify a template module (JavaScript) to execute and then the module would specify the .tmpl (HTML Template).

The trickiest part in all of this was remembering to put ./tests/ instead of tests/ as the path to load the template module so it loaded from the current working directory.

Here is what my code ended up looking like:

Grunt Configuration

Template

Runner Template