MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introduction to Backbone.js

In this article we will have an introduction about the javascript framework called backbone.js.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

When developing a website application you will inevitably work a lot with javascript language to deal the DOM manipulation or for some other needs. There are many javascript libraries that will make this task easier, and the most popular library like we all know is Jquery, it’s indeed great to handle the attractiveness of our web app. But when our app gets larger the code will need a structure to make it easy to maintain, absolutely jQuery alone can’t do that. That’s when Backbone comes to play.

1. What is Backbone.js?

Backbone is a javascript library that provides structure for your applications, it adapts the concept of MVC (model, view, controller) pattern that has been implemented earlier in the server-side language like PHP. But backbone is considered as not a true MVC, it’s considered as MV* because C in the backbone is for Collection instead of Controller. I can tell you it still gives you the similar functionality.

For those who are not familiar with terms MVC pattern let me provide a brief description:

  • M stands for “Model”, in the backbone its simply an object that represents your data.
  • V stands for “View”, view is responsible to handle what to serve/display to the user. View is connected to data in collection or model.
  • C in backbone is “Collection” as a mentioned previously. Collection is the collection of model, its responsible to handle a group of data (that has been stored in the Model).

The idea of MVC is a separation of concern. This idea is reasonably good because if you maintain large codes of your application you can edit some side of your code without affecting others. For example if you need to update the user interface of your application you will only need to change the codes inside a view without the need to change model or collection. You can read more about MVC pattern here http://en.wikipedia.org/wiki/Model-view-controller

2. Is it replacing jQuery?

No, it doesn’t replace jQuery rather than its a complimentary. Backbone can work with any other libraries like jQuery or Zepto. Because developing web application only with a pile of jQuery selector and callback will give you headache when comes to maintaining it.

3. When do I need Backbone.js?

If you are developing a web application that requires a lot javascript, you will need backbone. If your application needs to be scalable then you will need backbone to gives structure to your code. If you are building an awesome web application and works a lot with lines of jQuery to traverse your DOM, or give animations, binding many events to your app, you will for sure need Backbone.

If you are creating a wordpress theme and will be likely deal a little with jQuery, you don’t need to use backbone.

The conclusion is,if you want to bring your front-end to the next level, you need backbone.

4. What do I need to know before working with backbone?

This advice is only for novice. Many people understand how to use javascript library like jQuery, but that’s not sufficient to understand how backbone works. You need to know about object oriented programming, what object oriented programming is beyond the scope of this article. You can read more about it in this article about Object Oriented Javascript Programming Classes and Objects

5. Ok, I’m really interested with backbone. So how do I install it?

The installation is straight-forward like when you install jQuery, you will call the library somewhere in your application. But heads up! Backbone depends on a utility belt called underscore.js. so before you call backbone library makes sure you call underscore first. See the listing below.

Listing 1: Setting up 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 underscore.js here http://underscorejs.org/

Download backbone.js here http://backbonejs.org

After downloading all the files required put those files on a folder called ‘js’ in the root of your application and call the script like the listing above. Remember underscore must be called before backbone.

Backbone like I mention earlier provides structure to your code by implementing the MV* pattern on the client side. You may familiar with event binding to DOM element using jQuery, well backbone can do it too in cleaner way.

Let me show you a little difference on event delegations between jQuery and Backbone.

Listing 2: Event Delegation using jQuery

	$(‘div.open’).click(function(){ .... you code here ..... }); //bind a click event on ‘div’ with a class ‘open’

Listing 3: Event Delegation using Backbone

//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

Not so big difference, but from structural standview it’s a huge difference. While jQuery provides you with straight chaining mechanism that will probably give you spaghetti codes as the application gets larger. Backbone provides you more structural approach, where events delegations is bind from the ‘events’ property inside a view object and separate the callback in another methods. Let see one more example on event delegations using backbone.

Listing 4: Multiple events delegation using Backbone

//this code is inside backbone view object
events : {
“click div.open” : “openDialog” //if user clicks ‘div’ with class ‘open’ run the ‘openDialog’ methods
	“dblclick span.edit” : “editPost” // if user double clicks ‘span’ with class ‘edit’ run the ‘editPost’ methods
	“click a.close” : “closePost” // if user clicks ‘a’ with class ‘close’ run the ‘closePost’ methods
}, 
// then define callbacks method for each event above.
openDialog : function (e) { ... code here ..},
editPost: function(e) { ... code here ... },
closePost: function(e) { ... code here .. }

Remember, I stated that backbone depends on underscore, that means you can also use the power of underscore inside backbone. More about it, I suggest you to head over the official site of underscore and see what magic can make backbone even better.

6. Great, so whats next?

Well, I know you are ready to build awesome web application with the help of backbone. But since this article is aimed to introduce you with backbone, we are not going deeper to the code now, just yet.

May be some of you wondering what can backbone actually do in real world applications, well to give you more insight and big picture on how backbone could help developer, let me give you example of applications that is built with backbone.

http://droptask.com

DropTask is a visual task management app designed for teams and individuals. It uses beautiful visuals to help users organise their tasks, and collaborate with other DropTask users. It works on the desktop, on the iPad, and in all major mobile phone browsers. DropTask is written entirely in CoffeeScript, using Node.js on the server and Backbone.js on the client. DropTask uses a number of other awesome libraries including d3.js and hammer.js

DropTask

Figure 1: DropTask

http://blossom.io

Blossom is another task management, it’s very lean and suitable to work in collaboration with your team. But blossom differs from droptask, while droptask provides you with eye-catching visual organisation of your task, blossom maintains the tasks in a simple and clean workarea. It’s built with backbone of course.

Blossom

Figure 2: Blossom

http://stitcher.com/webapp

Stitcher's web app delivers on demand listening for over 15,000 radio shows and podcasts. Listeners can find their favorite news, sports, entertainment and talk radio shows from sources like NPR, CNN, Fox, BBC, Adam Carolla and more and then create their own playlists to listen the the latest episodes anytime.

Stitcher

Figure 3: Stitcher

http://webmon.com

Webmon is a web availability monitoring and escalation service that allows you to monitor your online services and get notified upon downtime and error conditions. Webmon also offers realtime dashboards to compare service performances in realtime and take action when needed. website monitoring done right!

Webmon

Figure 4: Webmon

Conclusion

I finish here this article about backbone.js, hope you liked and see you next time.



A passionate and visionary web developer who falls in love with web technologies. Always excited to learn more, just like you.

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login