How I finally understood how to use Backbone in a real project.

backbone-wtf.markdown

Project files: https://github.com/johnshopkins/roy-gbiv

• Models with individual model views, ie a color model with a "color wedge" view
• Collections with collection views that build their collected models using the model view, ie a palette collection made up of colors and a "color wheel" collection view that assembles its color models using the color wedge view into a wheel
• Use Common JS "require()" to keep files separate

js/
    app/
        collections/
            Palette.js
        models/
            Color.js
        templates/
            color-wedge.html
        views/
            ColorWedge.js
            ColorWheel.js
        Router.js
    lib/
        myLib.js
    vendor/
        jquery.js
    main.js

• Use browserify to compile JS files
• Use gulp or grunt to watch globs and compile JS and Sass/Less > CSS on change
• If you use underscore templates (Handlebars are more complicated than necessary for me), you can use node-underscorify (a browserify transform) to precompile template functions from a .html file
• Use the npm versions of Backbone, Underscore, and jQuery, but remember to set Backbone.$ = $ whenever you use Backbone
• Use jshint, but remember to set /* global require: false */ and /* global module: false */ for the main node-based globals (if you're using the browser: true flag in dev, you don't have to worry about console, window, other browser globals).
• Note, the "false" there means you can't write to that file
• Use some kind of "event global", possibly the "vent" convention, ie vent = _.extend({}, Backbone.Events); so you can maintain event state across all files, but remember to put /* global vent: true */ at the top of any file where you use it, so jshint knows about it