Tutorials, blog posts and example sites

Example Sites with Tutorials

Todo App

• Backbone-Components explained step by step by Todo Example: http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/
• Demo: http://localtodos.com/
• Source: https://github.com/jeromegn/backbone.localstorage
• CoffeeScript version (+annotated): https://github.com/JasonGiedymin/backbone-todojs-coffeescript
• TodoMVC app: http://todomvc.com/examples/backbone/
• TodoMVC app source: https://github.com/tastejs/todomvc/tree/gh-pages/examples/backbone

Backbone.js Money Management App

• Source: https://github.com/jeka-kiselyov/dimeshift
• Demo: http://dimeshift.com/

Strut - An ImpressJS GUI by Matt Crinklaw

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

Ostio — open-source forum for GitHub projects

• 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

• 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, Part 3
• Source: https://github.com/jamesyu/CloudEdit

Bookmarkly by Dan Grossman

• Source: https://github.com/dangrossman/Bookmarkly

ScrumBoard application by Fatih Erikli

• 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
• 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

• 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

• 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

• 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

• 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/

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
• 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
• 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
• Full Stack Web Development with Backbone.js by Patrick Mulder
• Backbone.js Essentials by Jeremy Walker
• Mastering Backbone.js by Abiee Echamea

Tutorials and Blog Posts

• 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
• How to Share Backbone.js models with Node.js – amir.unoc.net
• Introducing the Backbone Store – elfsternberg.com (Coffeescript version) (Demo)
• Building a Single-Page App with Backbone.js, Underscore.js and JQuery – andyet.net
• Restful Ajax Web App Basics – thomasdavis.github.com
• Backbone.js Tutorial – by noob for noobs - thomasdavis.github.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
• 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
• Master Space and Time With JavaScript, Book 3: Backbone - http://www.noelrappin.com/mstwjs
• Integrating Backbone with Laravel PHP framework maxoffsky blog
• Structuring your web apps via Backbone.JS hegdeashwin-Backbone.github.com
• Learning Backbone Marionette hegdeashwin-Backbone.Marionette.github.com
• A faster start with Backbone.js
• How to avoid jQuery spaghetti inside your Backbone views jifeon.blogspot.com
• Learning Backbone.js Testing by Jonathan Freeman (An interactive guide to perform automated testing on Backbone.js applications with the help of a real-world example)

In other languages

Spanish

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

Russian

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

Japanese

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

Melayu

• Kenali BackboneJS

Swedish

• Backbone tutorial

Dead Links

• Tutorials for absolute beginners - backbonetutorials.com
• Reusing Backbone.js Models on the server with Node.js and Socket.io to Build Real-time Apps – andyet.net
• 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
• eCloudEdit - Erlang, WebMachine and Backbone.js – part 1, part 2
• 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
• Knockout.js vs. Backbone.js ifandelse.com
• Backbone.js Tips and Tricks - jules.boussekeyt.org
• Model is stateful smagch.github.com
• Memory free Backbone.Router jules.boussekeyt.org
• Backbone.js Screencast - Introduction and Views - joeybeninghove.com
• https://github.com/damienklinnert/rhetoricus
• Tekpub - Plugging into MarionetteJS. (free + paid) - http://tekpub.com/products/backbone
• Backbone.js Basics (paid) - https://peepcode.com/products/backbone-js
• Backbone.js Course