Backbone.js the Basics

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 an initialize function and some default values which tells us what kind of data can 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

  • Collections

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

Simplifying the construction of graphs made using amcharts

I was given a task by sir to simplifying the work of construction of graphs using amcharts. My sir had already constructed a graph by making use of an equation.

For making graphs, we have to look into the way using which the graphs are created.

For a simple 2-D graph we have an equation y = f(x). This equation is followed at every point on the graph. The simplest way to create a path is by interpolation i.e. for each point of x we try to find out the corresponding value of y using the equation and finally put the point on the graph. This the most basic and most useful method for creating the graph.

The equation can further be extended into y = f(x) + c1 + c2…. where c1, c2…. are the constants. So what we have to do now is that we have to pass a set of constants too to complete the calculations.

So, my college senior Manpreet Kaur, who created the original version of this made use of this logic and created a function that calculated the value of the equation when all the constants and each value of x was passed into the function.

amchart graph using a equation

Now my task was to simplify the work of the construction by making use of some other equation. I decided to make a .json file and define everything in that file and try to take the variables from the JSON file. So that all the initialization must be on one occasion. I was able to make the same graph by making the JSON file and importing the variables from the JSON file.

I was able to make the graph but code is not full proof i.e. the support of some technical person is required to make the graph completely. I decided to use three or four more equations.

How to contribute to the open source and improve the way you write code

Contributing to open-source is something that most people don’t try to do when they are starting out in the development career. Due to this reason, people are leaving a lot on the table.

Open-source can be advantages to the career of a developer at any level.

A full-length blog was posted on my website lately. Please give a look and let me know if you liked it.