Backbone.js the Basics: How to create simple apps in JavaScript

Backbone is a JavaScript front-end framework that is used to solve down the purpose of modular programming in JavaScript. Whenever a programmer starts to build nice apps in JavaScript with some functionality the code starts to become more and more cumbersome with more and more functions working with one another and returning values from one function to other. Backbone provides a platform that makes the code of the application more standardized by using some build in methods and structures of writing code.

I decided to work on this framework because one of the project on which I was working had it's code written in this platform and it was whole lot of code( somewhat around 45000 lines of code). After opening the main file, sometimes my editor starts to hang. Here is the code of that project: https://github.com/singh1114/converse.js

Backbone doesn't works like many of the MVC( Models, Views, Controllers) frameworks like ruby on rails. The code of backbone consist of four major classes:

• Models
• Views
• Collections
• Controllers

Sometimes Routers are also considered as the main part but if you want to build a SPA( single page application) then you don't have to think of them.

Dependencies

Backbone has a soft dependency on jquery and hard dependency on Underscore.js. So, if you want to build a application then create a folder with your app name and then download the newest production version of these three softwares and then add them as a script in the order as follows :

• Jquery
• underscore.js
• backbone.js

See an example here which includes CDN format of these files included:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
<script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js">
<script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js">

Now let's talk about all the major things in Backbone one by one:

• Models

Models are the single row in the database in this case. Each time you create a model in the app you create a set of rules in which the user can provide some data to the app.


var Person = Backbone.Model.extend({
initialize: function(){
console.log("This works as constructor");;
},
defaults:{
Name: 'Ranvir Singh',
Age: 21,
}
});
var sahil = new Person({Name: "Sahil", Age: 23});

var ranvir = new Person();

var name = sahil.get('Name');
document.write(name);

var sahil.set({Name: 'Sahil Sharma'}) ;

sahil.save();

Person is the type of class which has a initialize function and some default values which tells us what kind of data can be arrive from some place. There are many functions like get and set which can be used to provide further functionalities. You can find some of them on this link.

get and set functions are used so that we have less probability to change the values by chance. save function is used to permanently change the changes to the particular.

We will discuss the rest part in next tutorial and I will tell you when it's out.