Please enable Javascript to correctly display the contents on Dot Net Tricks!

What is Backbone.js and why to use it?

  Author : Shailendra Chauhan
Posted On : 01 Apr 2014
Total Views : 17,125   
Updated On : 26 Sep 2016

Backbone is a most popular JavaScript MV* framework which allow you to create MVC(model-view-controller) like applications and single-page applications. The main components of Backbone.js are Model, View, Collection, Router and Event class objects.

In Backbone, a model stores data retrieved from the server in RESTful JSON manner and it is associated with the view. The view renders the HTML by using JavaScript templating or rendering framework and handles events triggered on elements of itself. The router is like as controller and is responsible for handling a given URL and telling the framework what code to run for that URL. The events is a module that can be mixed with any object to bind and trigger custom named events.

Key Points about Backbone

  1. It has a hard dependency with Underscore.js to make itself more functional and supporting a range of useful collection-based operations.

  2. It has a soft dependency with jQuery.

  3. It can update the HTML of your application automatically when the model changes.

  4. It use JavaScript templating or client-side rendering framework to render html which avoid you to embed HTML code inside JavaScript code.

  5. It offers a significantly clean and elegant way for DOM manipulations and UI updates.

Why Backbone?

Backbone allow you to develop a web applications by using JavaScript with the minimal set of data-structuring (models and collections) and user interface (views and URLs) primitives. Backbone is best to develop MVC(model-view-controller) like web applications or single-page web applications or complex JavaScript web applications in a more organized, structured manner without JavaScript code mixing with HTML. Since it decouples your application between models and views that render the model's data.

Getting started with Backbone

To setup a working environment for Backbone, you need following three js files: jQuery, Backbone, Underscore. Put these three files with in js folder of your application and use it in your index.html page.

<!DOCTYPE html>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>Backbone.js Tricks</title>
 <!--CSS for you application-->
 <link rel="stylesheet" href="css/site.css" type="text/css" media="screen" />

 <!--Required libraries to setup Backbone-->
 <script type="text/javascript" src="js/lib/jquery.js"></script>
 <script type="text/javascript" src="js/lib/underscore.js"></script>
 <script type="text/javascript" src="js/lib/backbone.js"></script>

 <!--Initilizing Backbone components-->
 <script type="text/javascript" src="js/init.js"></script>

 <!-- Backbone components-->
 <script type="text/javascript" src="js/models.js"></script>
 <script type="text/javascript" src="js/collections.js"></script>
 <script type="text/javascript" src="js/views.js"></script>
 <script type="text/javascript" src="js/routers.js"></script>

 <!--Application related js-->
 <script type="text/javascript" src="js/application.js"></script>
 <h1>Getting Started with Backbone.js</h1>
What do you think?

I hope you will enjoy the Backbone.js while developing SPA. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Free Interview Books
20 JAN
ASP.NET Core with Angular4 (Online)
07:00 AM-09:00 AM IST / 07:30 PM Central Time
20 JAN
ASP.NET MVC with Angular (Classroom)
05:00 PM to 07:00 PM IST (+5:30 GMT)
20 JAN
ASP.NET MVC with Angular4 (Online)
03:00 pm to 05:00 pm
20 JAN
Angular2+4 with Firebase (Classroom)
03:00 PM to 05:00 PM IST (+5:30 GMT)
16 JAN
Developing Microsoft Azure Solutions (Online)
07:00 AM-09:00 AM IST/ 07:30 PM -09:30 PM CST
16 JAN
React with Redux (Online)
07:00 AM-08:30 AM IST
15 JAN
Big Data Hadoop Developer (Online)
05:00 PM to 06:30Pm IST / 06:30AM to 08:00AM CST
ASP.NET Core with Angular4 (Online)
09:00 Pm to 11:00 Pm IST (+5:30Gmt)
Big Data Hadoop Developer (Online)
07:00 AM - 08:30 AM IST(+5:30 GMT)
16 DEC
ASP.NET MVC with Angular4 (Classroom)
10:00 AM - 01::00 PM IST(+5:30 GMT)
12 DEC
ASP.NET MVC with Angular4 (Online)
09:00 PM - 11:00 PM IST(+5:30 GMT)
Developing Microsoft Azure Solutions (Online)
07:00 AM-09:00 AM IST / 08:30 PM Central Time
Angular2+4 with Firebase (Online)
10:30 AM-12:30 PM IST(+5.30 GMT)
27 NOV
ASP.NET Core (Online)
07:00 AM to 09:00 AM IST (+5:30 GMT)
11 NOV
ASP.NET MVC (Online)
08:00 AM-10:00 AM IST / 09:30 PM To 11:30 PM(CST)