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.