Awesome

Update

This project is from 2011 and is no longer maintained. It has been supersceded by the many node.js frameworks that are now available and tools like grunt.js and gulp.js.

Overview

This is project represents the skeleton of an application with node.js server-side and backbone.js client-side. All JavaScript is written using CoffeeScript, all CSS is written using Compass and SASS, all templates are written using underscore.js and all client-side JavaScript is packaged using Jammit. A utility class is provided that automatically recompiles & packages all of these pre-processor languages every time you hit save, so you can iterate quickly: make a code change, hit refresh.

node-backbone-skeleton is primarily for my own personal use and not a battle-tested, production-ready framework. However, I've found it useful for a few projects, so perhaps other developers will find it a handy starting point.

Getting Started

1. gem install compass
2. npm install glob
3. gem install jammit
4. npm install -g coffee-script
5. Add the NODE_ENV=development to your environment variables (e.g. add export NODE_ENV=development to .bash_profile)
6. Run with node server.js (or node-dev server.js to get "hot redeploy")
7. Go to http://localhost:8003
8. Make changes to the code and watch the CoffeeScript, SASS and templates get recompiled as soon as you hit save

Technologies

• Server: node.js + express
• Client-side MVC: backbone.js
• Templating: underscore.js
• Preprocessor: CoffeeScript
• Client-side library: jQuery
• Stylesheets: Compass and SASS
• Config: node-settings

Directory structure

• /bootstrap: client-side JS files used to bootstrap the application, e.g. setup the namespace as well as create the backbone.js controllers, models and views.
• /compiled: all files compiled to JavaScript - namely, all the CoffeeScript and templating code - is dumped in this directory. You should never need to change anything in here by hand.
• /config: configuration settings for the project.
• /controllers: backbone.js controllers.
• /lib: 3rd party libraries, including jQuery, underscore.js and backbone.js.
• /models: backbone.js models.
• /node_modules: node.js modules installed via npm, including express, watch-tree, node-utils and underscore.js.
• /public: all static content (CSS, JS, images) publicly visible to the browser gets dumped here.
• server.coffee: the main node.js server file. Gets automatically compiled into server.js using /util/watcher.coffee.
• /stylesheets: SASS stylesheets go here and are compiled when you hit save via Compass into /public/css.
• /templates: underscore.js templates go here and are compiled when you hit save into /compiled/templates.
• /util: utility class that auto-recompiles and packages all the JavaScript and CSS.
• /views: backbone.js views.

/util/watcher.coffee

This class is loaded by server.js at startup to watch the project using watch-tree and recompile and package files as necessary so that you can iterate quickly. The goal is to support "make a change, hit reload" style development even though this project uses a number of pre-processors that require "compilation". It works reasonably well already and as I improve, I'll likely break this off into its own Github/NPM project.

Sample usage:

var Watcher = require('./util/watcher').watcher;
var options = {
  compass: 'config/config.rb',
  verbose: true,
  templates: templates,
  package: 'config/jammit.yml',
  packageOut: 'public/js',
  paths: {
    'server.coffee':                    {type: 'coffee', out: '.'},
    'templates/**/*.html':              {type: 'template', out: 'compiled/templates', package: true},
    'views/**/*.coffee':                {type: 'coffee', out: 'compiled/views', package: true}     
  }
};
var watcher = new Watcher(options);
watcher.watch();

Executing the watch() function does the following:

• Runs compass watch if a config file is specified in options.compass
• Watches over the root directory (as specified in options.root or '.' by default) and takes action any time a file changes that matches one of the keys (globs processed using node-glob). The action taken depends on the type:
  • coffee: compiles the file using CoffeeScript and puts the output into the directory specified by out
  • template: compiles the template using underscore.js and puts the output into the directory specified by out. Also adds this template by filename into the object specified in options.templates: e.g. if foo.html changed, foo.js would be created and options.templates['foo'] would be set to the compiled function.
  • If package: true is specified, will also run Jammit using the config file specified in options.package and put the output in the folder specified in options.packageOut