The Backbone.js is a JavaScript library using which you can make various web applications. In this article I’ll give an introduction to it and explain to develop an application using Backbone.js. When developing a web application you will inevitably work with the javascript language to handle DOM manipulation or some other needs.
There are many JavaScript libraries, such as Backbone.js, Derby.js, Meteor.js, Knockout.js, Ember.js, Angular.js, and Spine.js , that will make task easier, the library more popular, as we all know is the Jquery. But when our application gets larger the code will have a structure to make it easy to maintain, absolutely jQuery alone can not do this. This is where Backbone comes to play.
What is Backbone.js?
Backbone.js is a JavaScript library that provides structure to your applications, adapts the concept of MVC (model, view, controller) pattern that was implemented at the beginning of the server-side language such as PHP. Simply put, it makes the task of developing JavaScript applications considerably easier for you. But the backbone is not considered a true MVC because C in the backbone stands for the collection instead of Controller. But this gives similar functionality. For those who are not familiar with the terms of the MVC pattern let me give a brief description:
- M stands for “Model”, the backbone is simply an object that represents the data.
- V means “View” display is responsible for dealing with what to serve / display to the user. View is data bound together or model.
- C backbone is “collection” as one mentioned earlier. Collection is the collection model, your responsibility to deal with a set of data (which is stored in the model).
The idea of MVC is separation of concern. This idea is fairly good, because if you keep large codes of your application, you can edit some parts of your code without affecting the other. For example, if you need to update the user interface of your application, you will only need to change the codes within a vision without the need to change the model or collection.
When do I need Backbone.js?
- If you are developing a web application that requires a lot of javascript.
- If your application needs to be scalable, you will need backbone to give structure to your code.
- If you are building a web application and works very fantastic with lines of jQuery to traverse the DOM, or give animations, many binding events for your application, you will certainly want to use the Backbone.
- If you are creating a theme for wordpress, you will probably need a bit of jQuery, you do not need to use backbone.
The conclusion is that if you want to bring your front-end to the next level, a higher level, you will need to use backbone.
What I need to know before working with backbone?
This advice is only for beginners. Many people understand how to use a javascript library like jQuery, but this is not enough to understand how it works with backbone. You need to know about object-oriented programming.
How do I install backbone?
Installation is simple and straightforward, such as when you install jQuery, you will call the library somewhere in your application. Backbone relies on a utility belt called underscore.js. Therefore, before calling library backbone make sure you call underscore.js first. See the listing below:
Listing 1 : Setting the minimum requirement to work with backbone
<! DOCTYPE html>
<html>
<head>
<title> Backbone App </title>
</head>
<body>
<script src="js/jquery.js"> </script>
<script src="js/underscore.js"> </script>
<script src="js/backbone.js"> </script>
</body>
</html>
Download the underscore.js here http://underscorejs.org/
Download the Backbone.js here http://backbonejs.org
After downloading all the necessary files, put the files in a folder called ‘js’ in the root of your application and call the script as the above listing.
Remember that underscore.js must be called before Backbone.js.
Backbone.js as I mentioned earlier, provides the framework for your code, implementing the standard MV* on the client side. Let me show you a little difference in delegations of events between jQuery and Backbone.
Listing 2 : Using jQuery event delegation
$(‘div.open’).click(function(){ .... your code goes here ..... });
Listing 3 : Backbone using event delegation
//this code is inside a backbone view object
events : {
“click div.open” : “openDialog” //if user clicks ‘div’ with class ‘open’ run the ‘openDialog’ methods
},
openDialog : function () { ... you code goes here ...}); //define your openDialog methods as callback
There is not much difference between them. While jQuery chaining mechanism provides line that will probably give you the codes of spaghetti as the application becomes larger. Backbone provides more structural approach, where events delegations call is the property of “events” within a display object and separate the other callback methods. Let’s see another example of using event delegation backbone.
Listing 4 : Delegation various events using Backbone
//This code goes inside the object backbone
events : {
“click div.open” : “openDialog”
“dblclick span.edit” : “editPost”
“click a.close” : “closePost”
},
// Here define the callbacks
openDialog : function (e) { ... code here ..},
editPost: function(e) { ... code here... },
closePost: function(e) { ... code here.. }
Other Examples using Backbone.js
Below we will see other examples of code where the Backbone.js is used.
Listing 5 : Creating the class view of a hello world
var HelloView = Backbone.View.extend({
el: $('body'),
initialize: function() {
this.render();
},
render: function() {
$(this.el).append("<h1>Hello World</h1>");
}
});
After creating the class, the more important thing is to instantiate the view and initialize method which will occur automatically inserting the H1 to the body.
Listing 6 : Instantiating a view
var view = new helloView ();
The complete code can be seen in Listing 7.
Listing 7 : The complete hello world
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="../lib/jquery-min.js"></script>
<script src="../lib/underscore-min.js"></script>
<script src="../lib/backbone-min.js"></script>
<script>
$(document).ready(function() {
var HelloView = Backbone.View.extend({
el: $('body'),
initialize: function() {
this.render();
},
render: function() {
$(this.el).append("<h1>Hello World</h1>");
}
});
var helloView = new HelloView();
});
</script>
</head>
<body></body>
</html>
Summary
Remember, as I said it depends on the backbone underscore, it means that you can also use the power of the underscore in the backbone. To learn more about the subject, I suggest you look at the official website of the underscore and see the magic that the backbone can do.
Bean Definition Inheritance in Spring