Demystify Backbone.js: Introduction to Backbone.js

Sourav.Kayal
Posted by in JavaScript category on for Intermediate level | Points: 250 | Views : 12343 red flag
Rating: 4 out of 5  
 2 vote(s)

In this article we will learn the basic concept of client side programming and Backbone.js

Demystify Backbone.js: Introduction to Backbone.js

This is the first article of ”Demystify Backbone.js” article series. In this article we will learn various concept of Backbone.js from very beginning. This article demands basic understand of JavaScript and client side programming concept. The advance knowledge of JavaScript, like concept of class, function, callback function etc will help you for better understanding.

The first question is “Why JS”? and why “Backbone.JS” ?  Let’s try to get answer. We know that JavaScript is client side technology means it executes in client (Let’s not consider server side JS like node.js) . Each and every browser has it’s own capability to parse JavaScript and execute the code. Now, the most advantage in client side execution is its speed.

When we are executing result very near to user then obviously user will get output very soon and when user will get output very soon, their user experience will be very good. This is the place where JavaScript has gained popularity.

The use of JavaScript has increased rapidly day by day. The concept of HttpRequest and HttpResponse has given power to it. People started to use AJAX heavily and JavaScript gives nice facility to implement it in web application.

So, this is the reason behind the popularity of JavaScript. Now, one problem came in application development. People are started to use JavaScript heavily and obviously the amount of client side code started to became heavier. There was a great problem to manage and rectify this huge code. People started to bring structurization in client code. And this is the place where “Backbone.js” comes in to play.

So, the purpose of Backbone.js is to bring the uniformity of client code and maintain the code in proper structure.  Backbone.JS breaks the client code into three separate sections. Called “Model” “View” and “Collection”. It uses MVC framework to maintain code.

If you have some experience on design patterns then most probably you know the concept of very popular MVC pattern where application divides into three different portions called Model, view and controller.

Components of Backbone.js

In above section we have learned why JavaScript in web application and why need to use Backbone.Js in application. In this section we will discuss various sections of Backbone.js. Basically we will get idea about the components of Backbone.js and we will come to know to topics which need to cover to learn Backbone.js.

Model:-

In MVC architecture “Model” is business entity or we can say it’s very much similar with class in C# or other application. In Backbone.js we can implement class in JavaScript.

Here is small example of class in Backbone.js

        <script>
            var Person = Backbone.Model.extend({
            });
        </script>

 The class in Backbone.js inherits from base class called “Model”.  In this example we have created Person class which has extends from Model class in Backbone.js library.

We can set various property of Model class which we will learn in coming article.

View:-

View in Backbone.js is very similar with view in MC pattern. In view we can handle various events and we can call appropriate template to be display.

        <script>
            var DocumentRow = Backbone.View.extend({
            });
        </script>

In this example we have created one empty view which is very similar with mode creation. The view extends from “View” from Backbone’s class library. There are various property of view in Backbone.js , in coming article we will explore more about it.

Collection:-

Collection is set of model class. It’s a set of model class object. In below example we have implemented collection in Backbone.js

         <script>
            var personCollection = Backbone.Collection.extend({
                model: person
            });
        </script>

Like model and view we have to extend collection object from “collection” class in Backbone library. In above example we have created “personCollection” which will contain a set of “person” class object. Various properties of collection we will explore more in coming article.

Router:-

Router is used to define the route of mode. It defines where data need to save or from where the data will come. Here is one example of sample router in Backbone.js

        <script>
                var MyRouter = Backbone.Router.extend({
 
                }
        </script>

Again, this is very similar with Mode, view and collection. We have created “MyRouter” which is derived from Router class of Backbone.js.

Conclusion:-

These are the important concepts in Backbone.js. To implement any application using Backbone.js one should know these concepts. The aim of this article is to get basic idea of Backbone.js and in coming articles we will explore more about it.


Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Posted by: Sheonarayan on: 12/8/2013 | Points: 25
I think there is a typo here. In this statement "The class in Backbone.js inherits from base class called “Mode”. Perhaps the "Mode" should be "Model".

Sorry if it is not, I am just guessing.

Thanks

Login to post response

Comment using Facebook(Author doesn't get notification)