What is Backbone.js and why to use it?

21 aug. 2022

Beginner

3,07K Views

3 min read

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

It has a hard dependency with Underscore.js to make itself more functional and supporting a range of useful collection-based operations.
It has a soft dependency with jQuery.
It can update the HTML of your application automatically when the model changes.
It use JavaScript templating or client-side rendering framework to render html which avoid you to embed HTML code inside JavaScript code.
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>
<html>
<head>
 <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>
</head>
<body>
 <h1>Getting Started with Backbone.js</h1>
</body>
</html>

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.