This training kit has been developed to learn the basics of Backbone.JS.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Structuring your web apps with Backbone.js

This training kit has been developed for those who

  • Already have the basic knowledge of JavaScript & jQuery;
  • Who wants to write JavaScript in a structured/pattern way;

This training kit will teach you the basics of Backbone.js and introduction to advanced part;

Prerequisites arranged as per the priority

  • Basic understanding of web development concepts like functional programming, templating etc.
  • JavaScript, jQuery, Underscore.

If you are already know & understand Backbone.js and want to learn Backbone.js Marionette framework then its strongly recommended to skip this training kit and jump to understand the basic to advanced of Backbone.js Marionette from the repository "Learning Backbone Marionette"

Training kit includes below session

  • Ch 1 : Getting Started.

  • Ch 2 : Backbone Model.

  • Ch 3 : Backbone View, Events & Templates.

  • Ch 4 : Backbone Collection.

  • Ch 5 : Backbone Router.

  • Ch 6 : Application DEMO & Plugin examples.

  • For more information on Backbone's coding standards, plugins etc. Please visit Backbone's training kit Github Wiki documentation

How to use training kit examples

Clone the repository and start running the examples in your browser and browse the codes with ready commits or you can also experiment with the code online which is powered by JSFiddle.

Download this repository OR Experiment online

Recommended text editor

You can used any text editor which ever you are comfortable with on any operating systems. But when it comes to JavaScript based project I personally recommend the following editors as per the priority.

  • Sublime Text 2 or above
  • Atom
  • Bracket
  • Notepad++

Development tools

  • Backbone Eye, Home Site | Git Repository A Mozilla FIrefox - Firebug extension for debugging Backbone.js applications. A way to understand Backbone application behavior without wading through JavaScript code.

  • Backbone Debugger, Git Repository A Google Chrome - Developer Tools extension for debugging Backbone.js applications. Displays in real-time all the application views, models, collections and routers, with detailed information such as handled jQuery events, model attributes, collection models, sync status, events triggered and more.

  • Nebula, Git Repository An open source application skeleton for a typical Backbone web apps. You can use it to quickly bootstrap your Backbone web application projects.

  • Nebula-cli, Git Repository Nebula-cli is a command line generator for Nebula. This tool will help to generate a walking application skeleton for a typical Backbone web apps. You can use it to quickly bootstrap your Backbone web application projects.

  • Boneloop, Git Repository An open source enterprise edition of Nebula based upon Backbone + Marionette - A scalable and composite application architecture for Backbone.js. It provides a client-[server]-side stack for building enterprise grade HTML5/Marionette applications. It could be used with any server side like Node.js, Ruby, PHP, JEE, Spring etc. By default it's server side environment comes with Node.js - Loopback (StrongLoop) stack.

  • Bonegear, Git Repository Bonegear is an open source UI components for your Backbone.js projects.


Developed & maintained by author: Ashwin Hegde & Contributors

We really appreciate all kind of feedback and contributions. Thank you for using and supporting this project.

To request a feature or you find any typo errors, enhancements or questions; please feel free to send a pull-request on "develop" branch or post it on following link, or vote for the ones that are already registered.

Visit the following link to know about:


The MIT License (MIT)

Copyright (c) 2016-2018 Ashwin Hegde