CoffeeScript, Meet Backbone.js

CoffeeScript, Meet Backbone.js is a simple Backbone.js tutorial written in CoffeeScript comprised of self-explanatory "hello world" examples of increasing complexity. It was designed to provide a smoother transition from zero to the popular Todos example The bulk of this tutorial is a rewrite of the original hello-backbonejs tutorial.

Backbone.js offers a lean MVC framework for organizing your Javascript application. It leads to more maintainable code by untangling the "spaghetti" of callbacks tied to different parts of the DOM and the backend server that often arises in rich client-side applications.

The tutorial starts with a minimalist View object, and progressively introduces event binding/handling, Models, and Collections.

Once in the tutorial, use the navigation menu in the top-right corner to view other examples. Example numbers are in order of increasing complexity.

Start the Tutorial

Fork me on GitHub

The only non-Javascript part of the examples is the following HTML template (with some minimal styling):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CoffeeScript, Meet Backbone.js: Part N</title>
  <link rel="stylesheet" href="/coffeescript-meet-backbonejs/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
  <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <header>
    <h1>CoffeeScript, Meet Backbone.js: Part N</h1>
    <p>Looking for <a href="docs/script.html">the documentation</a>?</p>
  </header>
</body>
</html>