Tutorials, blog posts and example sites

Example Sites with Tutorials

Todo App

• Tutorial: http://jgn.heroku.com/2010/10/25/creating-localtodoscom----a-short-story/
• Demo: http://localtodos.com/
• Source: https://github.com/jeromegn/localtodos
• Source (annotated): http://documentcloud.github.com/backbone/docs/todos.html
• CoffeeScript version (+annotated): https://github.com/JasonGiedymin/backbone-todojs-coffeescript
• TodoMVC app: http://todomvc.com/architecture-examples/backbone/
• TodoMVC app source: https://github.com/addyosmani/todomvc/tree/gh-pages/architecture-examples/backbone

Strut - An ImpressJS GUI by Matt Crinklaw

• Demo: http://tantaman.github.com/Strut/dist/index.html
• Source: https://github.com/tantaman/Strut

Ostio — open-source forum for GitHub projects

• Demo: http://ost.io
• Source: https://github.com/paulmillr/ostio

Employee Directory App by Christophe Coenraets

• Backbone.js + Twitter Bootstrap version
• Mobile version: Backbone.js + jQuery Mobile
• Mobile version: Backbone.js + native-looking iPhone skins
• Source: https://github.com/ccoenraets/backbone-directory

Employee Directory App with Node JS, MongoDB - Serves web, mobile or iPhone versions based on user-agent

• Demo: http://nodebackbone-vinkaga.dotcloud.com/
• Source: https://github.com/vinkaga/node-backbone

Password locker by Al B - Share passwords between colleagues using Django, Django REST framework and backbone.js

• Tutorial: http://10kblogger.wordpress.com/2012/05/25/a-restful-password-locker-with-django-and-backbone-js/
• Source: https://github.com/boosh/pwlocker

CloudEdit by James Yu

• Tutorial: Part 1, Part 2
• Demo: http://cloudedit.jamesyu.org/
• Source: https://github.com/jamesyu/CloudEdit

Bookmarkly by Dan Grossman

• Demo: http://bookmarkly.com/
• Source: https://github.com/dangrossman/Bookmarkly

ScrumBoard application by Fatih Erikli

• Demo: http://scrumboard.herokuapp.com
• Source: https://github.com/fatiherikli/scrumboard

Wine Cellar App by Christophe Coenraets

• Tutorial: Part 1: Getting Started, Part 2: CRUD, Part 3: Deep Linking and Application States
• Demo: http://www.coenraets.org/backbone-cellar/part3/
• Source: https://github.com/ccoenraets/backbone-cellar

Backbone Mobile Example by Ben Nolan

• Tutorial: http://bennolan.com/2010/11/24/backbone-jquery-demo.html
• Demo: http://bennolan.com/science/backbone-mobile/
• Source: https://github.com/bnolan/backbone-mobile

Backbone Gallery by Addy Osmani

• Tutorial: http://addyosmani.com/blog/building-spas-jquerys-best-friends/
• Demo: http://addyosmani.com/resources/backbonegallery/index.php
• Source: https://github.com/addyosmani/backbonejs-gallery

Facebook NewsFeed App by Serdar Yildirim

• Tutorial: http://serdaryildirim.net/js/backbone-js-facebook-news-feed-example.html
• Source: https://github.com/serdary/backbone-facebook-newsfeed

nodechat.js – Using node.js, backbone.js, socket.io, and redis to make a real time chat app

• Tutorial: http://fzysqr.com/2011/02/28/nodechat-js-using-node-js-backbone-js-socket-io-and-redis-to-make-a-real-time-chat-app/
• Source: https://github.com/jslatts/nodechat

Backbone, Express, Mongoose and SocketIO

• Source: https://github.com/datapimp/backbone-express-mongoose-socketio

Brunch Colors

• Demo: http://brunch-colors.com/
• Source: https://github.com/janmonschke/Brunch-colors/tree/master/_attachments/brunch/src/app

Grizzly - a Google wave clone using only backbone.js and couchdb.

• Source: https://github.com/pyronicide/backbone.couchdb.js/tree/master/examples/grizzly

Bomberman - a multiplayer bomberman clone using backbone.js, node.js, socket.io, sass, canvas

• Demo: http://bit.ly/html5bomb
• Source: https://github.com/cri5ti/html5-bomberman

Very simple backbone site example

• Demo: http://beyondtheclouds.net/Projects/backboneapp
• Source: https://github.com/L0stSoul/Training/tree/master/Backboneapp

Articulated Vertebrae - very very simple backbone examples. Minimalist, requires no other plugins, languages or modules

• Source: https://github.com/allan-bonadio/bbexamples

Backbone.sync Examples

• Backbone.sync + localStorage : one key -> one model
• Source : https://github.com/k33g/ossicle/blob/master/js/backbone.sync/backbone-sync-localstorage.js
• Sample : https://github.com/k33g/ossicle/blob/master/index-bb-localstorage.html
• Backbone.sync + GitHub API : read markdown files from your GitHub Repository
• Source : https://github.com/k33g/ossicle/blob/master/js/backbone.sync/backbone-sync-github.js
• Sample : https://github.com/k33g/ossicle/blob/master/index-bb-github-api.html
• override .sync() + LRUCache : return Promise when there is a cache
• Source : https://github.com/smagch/backbone-examples/tree/gh-pages/filter
• Sample : http://smagch.github.com/backbone-examples/filter/#comment/create_ts

Backbone Hangman

• Demo: http://backbone-hangman.heroku.com/
• Source: https://github.com/trivektor/Backbone-Hangman
• Tutorial: http://trivektor.wordpress.com/2012/01/15/redo-the-classic-hangman-game-with-a-new-approach-backbone-js/

Tutorials and Blog Posts

• Backbone on Rails Part 1 - railscasts.com/episodes/323-backbone-on-rails-part-1
• Backbone on Rails Part 2 - railscasts.com/episodes/325-backbone-on-rails-part-2
• Backbone Fundamentals (an open-source book) addyosmani.github.com
• Part 1: Backbone.js + Require.js – developer.teradata.com
• Part 2: Backbone.js + Require.js, Further Modularization and Just in Time Dependency Loading – developer.teradata.com
• Backbone.js and socket.io – developer.teradata.com
• Organizing Your Backbone.js Application With Modules – weblog.bocoup.com
• Backbone and jquery mobile – bennolan.com
• Testing Backbone Apps with Jasmine and Sinon – tinnedfruit.com
• Reusing Backbone.js Models on the server with Node.js and Socket.io to Build Real-time Apps – andyet.net
• How to Share Backbone.js models with Node.js – amir.unoc.net
• Introducing the Backbone Store – elfsternberg.com (Coffeescript version) (Demo)
• Backbone.js demo app with Sinatra backend – ryandotsmith.heroku.com
• LiquidMedia - An Intro to Backbone.js –  part1, part 2, part 3
• Backbone-CouchDB - Give your CouchApp some Backbone – janmonschke.posterous.com
• One of These Days Blog - Backbone.js – oneofthesedaysblog.com
• Backbone.js and Django – joshbohde.com
• The Meta Cloud - Backbone.js Tutorial – plexical.com
• Moved to Backbone.js and JQuery Templates – akshay.cc
• Building a Single-Page App with Backbone.js, Underscore.js and JQuery – andyet.net
• eCloudEdit - Erlang, WebMachine and Backbone.js – part 1, part 2
• Restful Ajax Web App Basics – thomasdavis.github.com
• Backbone.js Tutorial – by noob for noobs - thomasdavis.github.com
• Simple Javascript Inheritance with Backbone.js - blog.usefunnel.com
• Slideshow: Backbone.js Intro backbone-dot-js-intro.heroku.com
• Autocomplete jQuery Plugin using Backbone: planbox.com
• Backbone.js + jQuery = Best OO Friends Example: coldfusioning.com
• Backbone, API and Events for Models decipherinc.com
• Getting Started with Backbone.js net.tutsplus.com
• Intro to Backbone.js talk from 6/9/11 DCRUG: YouTube video (~30 minutes, starts at 8m41s), slides (PDF)
• Hello Backbone.js: arturadib.com
• Hello Backbone.js in CoffeeScript: hello-backbonejs
• Backbone.js and dependent selects: railsindirection.blogspot.com
• Backbone.js todo's example. This one combines backbone with jquery, handlebars, jammit and rails 3.rx/backbone-todos
• Knockout.js vs. Backbone.js ifandelse.com
• The [backbone.js] tag on Stack Overflow
• Backbone and MVC - image gallery tutorial - further discussion - CoffeeScript's Fat Arrow & Backbone
• Cascading Select Boxes with Backbone.js: A Step-by-Step Tutorial - shinetech.com
• Building a shared calendar with Backbone.js and FullCalendar: A step-by-step tutorial - shinetech.com
• How to switch views with Backbone.js – blog.viison.com
• Backbone.js Screencast - Introduction and Views - joeybeninghove.com
• Master Space and Time With JavaScript, Book 3: Backbone - http://www.noelrappin.com/mstwjs
• Backbone.js Tips and Tricks - jules.boussekeyt.org
• Memory free Backbone.Router jules.boussekeyt.org
• Model is stateful smagch.github.com
• Integrating Backbone with Laravel PHP framework maxoffsky blog

In other languages

Russian

• Русская версия документации Backbone.js backbonejs.ru
• Написание сложных интерфейсов с Backbone.js habrahabr.ru

French

• MON 1ER TUTO BACKBONE.JS (AVEC ZEPTO) & Backbone.js, on continue
• "BackBone par le bon bout" :
  • Partie I : Backbone.Model + Backbone.Collection
  • Partie II : Backbone.sync
  • Partie III : Backbone.View
  • Partie IV : Backbone.Router
• Organiser son code Backbone JS en modules
  • Démonstration

Portuguese

• Série Backbone.js:
  • Parte 1 - Introdução
  • Parte 2 - View
  • Parte 3 - Model
  • Parte 4 - Collection