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

What is Backbone.js and why to use it?

  Author : Shailendra Chauhan
Updated On : 26 Sep 2016
Total Views : 13,630   

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
PPC Marketing (offline)

Sat, Sun 09:00 AM-10:30 AM IST

Know More
AngularJS Development (online)

MON-FRI 08:00 PM-09:30 PM IST.

Know More
26 OCT
ASP.NET MVC with AngularJS Development (online)

MON-FRI 07:30 AM-09:00 AM IST

Know More
24 OCT
NodeJS Development (online)

MON-FRI     06:00 AM - 07:30 AM IST

24 OCT
MEAN Stack Development (online)

MON-FRI     06:00 AM -07:30 AM IST

22 OCT
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     08:00 AM-09:30 AM

12 OCT
ASP.NET MVC with AngularJS Development (online)

Mon-Fri     09:30 PM-11:00 PM IST

17 SEP
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     05:00 PM-06:30 PM IST

NodeJS Development (offline)

Sat, Sun     11:00 AM-12:30 PM IST


Professional Speaks