Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

All the resources for my talk on Require.js and Backbone.js

You will need Grunt to build the presentation. Install grunt globally, then run:

npm install


You will also need Bower and Grunt to use the example code.


Open index.html in a browser

Post-slide flow and notes

  • Introduce Bower

    • Install on machine: npm install -g bower
    • Install jQuery, Backbone, Lodash, Handlebars.js, normalize-css...
    • Use .bowerrc to change install path
    • Show --save option
    • Show # to specify version
    • Install from git repo
  • Backbone code walkthrough

    • Explain code separation
    • 01 - Globals
    • 02 - Global namespace
      • Should be the minimum amount you do
    • 03 - AMD with Require
  • Build process

    • Could learn r.js, Grunt is better
      • Way more options (build templates, css pre-processors, and so much more)
      • Watch process
      • Once you use it, you'll want to use it all the time
    • Install on machine: npm install -g grunt-cli
    • Install for local use: npm install grunt grunt-contrib-requirejs grunt-contrib-handlebars and anything else
    • or Gruntfile.js

Simple App from scratch (code/demo)

  • Starts with H5BP
  • Use bower to install require, jquery, lodash, backbone, handlebars, normalize-css, modernizr
  • Fix paths in index.html and add require
  • Create main.js to bootstrap require
  • Build app...

Code examples (code/##)


  • All Backbone objects bound directly to window
  • Grunt concats
    • routers
    • views
    • models
    • collections
  • Grunt compiles
    • Handlebars templates
    • Bound to window.JST


  • Less typing
  • Less setup


  • Huge potential for global variable collisions
  • Suffix each classname with type (ie. BrewListView, BrewModel)


  • BrewApp namespace bound to window
  • All Backbone classes bount to BrewApp
  • Further namespaced by type (Views, Models, etc)
  • Grunt concats
    • routers
    • views
    • models
    • collections
  • Grunt compiles
    • Handlebars templates
    • Bound to BrewApp.Templates


  • Cleaner class names (ie. Models.Brew instead of BrewModel)
  • Very reduced chance of variable collision


  • Remember to create window.BrewApp
    • Or, add window.BrewApp = window.BrewApp || {} to every file
    • Or, inject via Grunt


  • Only script in HTML is require
  • Filenames more concise
  • Each file is now a module with defined dependecies
  • Grunt file building dist/app.js
  • Grunt further minifying to dist/app.min.js
  • NOTE: Backbone.history.navigate instead of router.navigate


  • Even cleaner separation of code
  • Very easy to see what modules are being used
    • Dependencies are managed per-module instead of per app
  • Easily build single js file
    • Only build modules being used
    • Faster page loads
  • Dependency injection (for mocks and testing)


  • More work to set up
  • Can be harder to debug
  • May be tricky to work in to an existing project piecemeal