Tutorials, blog posts and example sites

Example Sites with Tutorials

Todo App

• Story of the demo (not a 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

Backbone Contact Manager by Dmytro Yarmak

• Demo: http://dmytroyarmak.github.io/backbone-contact-manager
• Slides: http://dmytroyarmak.github.io/codeangels-backbone-introduction
• Tutorial: https://github.com/dmytroyarmak/backbone-contact-manager/blob/gh-pages/README.md#backbone-contact-manager
• Source: https://github.com/dmytroyarmak/backbone-contact-manager

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

Social Mobile Application sketch by Vadim Mirgorod

• Tutorial: http://vmirgorod.name/blog/building-iosandroid-mobile-app-using-backbonejs-jquerymobile-and-html
• Demo: http://dealancer.github.io/sma/
• Source: https://github.com/dealancer/sma/

Backbone Infinite Scroll by Tomas Randus

• Demo: http://demoinfinite.appspot.com/
• Source: https://github.com/dizzyn/backbone-infinite-scroll

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

• 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 Contact Manager by Pradeep Saran - Using RequireJS and Localstorage

Features of this app are client side data storage (localstorage), form validations, search functionality, using RequireJS, page transitions and clean code.

• Demo: http://devsaran.github.io/contact-manager-backbone/
• Source: https://github.com/devsaran/contact-manager-backbone

Backbone.sync Examples

• Backbone.sync + localStorage : one key -> one model
• Source : https://github.com/mbrio/ossicle/blob/master/js/backbone.sync/backbone-sync-localstorage.js
• Sample : https://github.com/mbrio/ossicle/blob/master/index-bb-localstorage.html
• Backbone.sync + GitHub API : read markdown files from your GitHub Repository
• Source : https://github.com/mbrio/ossicle/blob/master/js/backbone.sync/backbone-sync-github.js
• Sample : https://github.com/mbrio/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/

rhetoricus.com

• Demo: http://rhetoricus.com
• Source: https://github.com/damienklinnert/rhetoricus

Simple RSS Reader - BackboneJs, LocalStorage, RequireJS, Bootstrap, YQL

• Source: https://github.com/laurentDezitter/backbone-rss-reader

Screencasts And Presentation Videos

• Backbone on Rails Part 1 (paid) - railscasts.com/episodes/323-backbone-on-rails-part-1
• Backbone on Rails Part 2 (paid) - railscasts.com/episodes/325-backbone-on-rails-part-2
• Hands On Backbone.js (paid) - http://pragprog.com/screencasts/v-dback/hands-on-backbone-js
• BackboneRails.com - Building real apps in depth. Advanced material. (free + paid) - http://www.backbonerails.com
• Tekpub - Plugging into MarionetteJS. (free + paid) - http://tekpub.com/products/backbone
• Advanced Backbone Patterns and Techniques. (paid) - http://tutsplus.com/course/advanced-backbone-patterns-and-techniques/
• Backbone.js Fundamentals (paid) - http://pluralsight.com/training/Courses/TableOfContents/backbone-fundamentals
• Backbone.js Basics (paid) - https://peepcode.com/products/backbone-js
• Atlanta JavaScript Meetup, October 2012 (two speakers. first on Backbone, second on Backbone+Marionette)http://www.youtube.com/watch?v=HDZqmGwROG0

Books

• Backbone.js Patterns and Best Practices by Swarnendu De
• Backbone Fundamentals (an open-source book) addyosmani.github.com
• Backbone.js Cookbook by Vadim Mirgorod
• Developing a Backbone.js Edge (more info)
• Instant Backbone.js Application Development by Thomas Hunter II
• Backbone.js Testing by Ryan Roemer

Tutorials and Blog Posts

• Tutorials for absolute beginners - backbonetutorials.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
• Structuring your web apps via Backbone.JS hegdeashwin-Backbone.github.com

In other languages

Spanish

• Curso básico en español: http://youtu.be/pQE5OGGo6KE

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 (pt-BR)

• Série Backbone.js:
  • Parte 1 - Introdução
  • Parte 2 - View
  • Parte 3 - Model
  • Parte 4 - Collection
  • Parte 5 - Router, Histórico, Backbone.sync, Eventos e mais
• Turbinando o client-side com Backbone.js

Japanese

• Backbone.js Advent Calendar 2011
• Backbone.js Advent Calendar 2012

Melayu

• Kenali BackboneJS

Swedish

• Backbone tutorial