Are backbone.js and node.js entirely different things from jQuery?

Question

This is a noob question but I really feel like asking it out.I know node.js can handle server side scripting and backbone.js "gives structure" to web applications but why would I want to learn them in the first place when I already know jQuery and handle all the server side logic using Django.Will I get any increase in processing speed or something if I use backbone.js or node.js

Answer 1

The simple overview answer to this is that Backbone gives your front-end javascript code structure. When I say structure what I mean is your code will implement the most common actions in a systematic, standard, consistent way across your application and be more organized so that you and possibly others can clearly understand the different parts of your complex code. It works well with any JSON data sent back from the server in a RESTful manner so your Django skills will be put to good use.

There is no reason you can't use jQuery (only) for your projects, (Backbone actually uses jQuery for DOM manipulation as well as the AJAX calls) but if you've ever seen how code can creep and intertwine with other parts of code, mixing parts that are view/presentation related to data... if you've ever struggled with having to debug such code, or expand such code, or having to rebuild from ground up, basic functionalities that all your apps need to have... Or if you've found yourself doing things inconsistently, you start to realize that a little help is kind of nice. ;-)

Backbone.

I may be wrong but I'm just going to take a chance that you might not be familiar with such things as an MVC framework. If you know what an MVC framework is (and more importantly, how it is beneficial for development) then the advantage of Backbone will be apparent. Backbone is a kind of MVC.

Particularly with larger projects, separating data > from presentation > from control logic becomes crucial in terms of code maintenance. That is, Model, View, Control = MVC. You can think of Backbone as an MVC framework for client-side javascript. It's actually a variation of MVC (more like MV*) if you get technical but the gist is the same. With Javascript performance increasing and applications becoming ever more complex, large, such a framework is becoming more necessary for many developers. And while you have other options (Knockout.js etc.) that do similar things, Backbone is a pretty sweet choice among the crowd.

To answer some of your other sub-questions:

Backbone will work nicely with your Django server setup. Backbone does all of it's data back and forth with JSON. For example, with Backbone - your basic data objects are what are called Models. A model is created using a JSON hash. For example, a User model might take the JSON:

{"user":"Rajat", "username":"backboneLearner"}

The advantage of using a Backbone model and not just have it as a regular JS object is that Models already have a bunch of conveniences and niceties built in. Let's use an example:

// Define a Model
var User = Backbone.Model.extend({
    defaults: {
        "user":undefined,
        "username":undefined
    },
    urlRoot: 'user'
});

// Instantiate a Model
var userModel = new User({
    "user":"Rajat",
    "username":"backboneLearner"
});

Want to save this to your server?

userModel.save();

Automatically makes a POST call for you. No long ajax code - already done for you in the background. Don't like your username I gave you? Let's change it.

userModel.save({"username":"coolguy"});

Using the same save() method, Backbone changed the username attribute AND made a PUT request for you instead of POST because it knows you already saved your user. (saved models have an id provided by your Django server) Backbone says your welcome.

Maybe you want your DOM to change when the name is changed:

<div id="nameDiv">coolguy</div>

Backbone View objects are responsible for this sort of stuff. As a matter of fact, they play with models really nicely. In your View you can do stuff like this.

// Create a listener for changes on your user model
this.userModel.on('change', this.updateNameDiv, this);

Yup. Backbone provides an assortment of special events that Models, Collections, and Views can make and listen for. You aren't limited to these. You can make custom ones too.

// This is the event handler declared in the view
updateNameDiv: function(model) {
    this.$("#nameDiv").html(model.get('username'));
}

// Change userModel
userModel.set("username","superman");

That's it. Your DOM now looks like this.

<div id="nameDiv">superman</div>

Backbone uses all of jQueries offerings when it comes to traversing and manipulating the DOM. You can also customize Backbone heavily with all the other javascript skills you have. It's a type of framework that gives you a LOT of freedom to make your own choices as well as expand on it. Bottom line is, Backbone won't feel restricting if you already know jQuery. As another layer of abstraction, Backbone makes a lot of the tedious things that much simpler. It's a growing community and once you use it you probably won't want to going back to coding without it. The benefits I claim aren't exclusive to Backbone. There are definitely some other clever frameworks out there. But I hope, you get a sense for why I think you should give it a try. If this long explanation / story plus examples haven't convinced you then just pretend you were fooled by only my enthusiasm for this framework and give it a shot.

There is a beginner TodoList tutorial that get's everyone started. A new way of programming can be a shift and sometimes difficult to wrap one's head around but I'd be surprised if you regret it.

Answer 2

They're all different things. You don't need to use them for speed probably if you already know how to work with Django and jQuery. But they are the new cool things so you would do well to at least play around with them.