Introduction
The web application development process has been evolving over the years. In the beginning web applications were just static HTML pages, which required programmers to change the code in order to change the content. Later, in web 2.0, server side programming languages were added to generate HTML pages dynamically based on user input and data stored in database.
Web applications nowadays require heavy use of JavaScript to generate content on the fly. The user needn’t wait between requests and page refreshes. A lot of the logic/code that used to be on the server side is being moved to the client side. Although JavaScript is now vastly used for making web applications, we sure have faced some problems to create large applications with JavaScript.
Backbone.js
For this problem to be solved Backbone.js or backbone is here. We all have used different kind of frameworks like Model-View-Controller(MVC), Model-View-Presenter(MVP),Model-View-View Model(MVVM) for creating single page applications(SPAs). Backbone.js (or simply Backbone) is a frontend JavaScript framework for building data-heavy Single Page Applications (SPAs).Backbone follows its own special paradigm. Backbone doesn’t require files to be structured in file system. Backbone also helps us providing necessary advises about code structure in projects. Backbone is most useful when an application uses a database in the backend to persist user data, and the frontend application will need to mirror a lot of this data.
In the above we have discussed about the necessity of backbone.js. now let us look through the working process of backbone.js.
Working process of backbone.js
While running Backbone-based SPAs, users will be interacting with data from the backend. When they interact with the application, they are doing so using Views. A View represents part of the Document Object Model (DOM). These interactions trigger events for updating the data in the model. Backbone.js keeps track of these models and sends the data for every change to the web server to be persisted. It also keeps track of changes to model data and can update Views. This makes the process of updating the DOM and sending data to the server seem to be automatic. Instead of building several one-off jQuery $.ajax calls, we can use consistent method.
Now let us work through a sample code which will print Hello! World.
HTML page
<!DOCTYPE HTML> <html> <head> <title>Backbone Application Development Starter</title> <!-- utility library and selector engine should be placed here.--> <script src="scripts/backbone-1.0.0.js"></script> </head> <body> <div id="display"> <div class="listing">There is a problem.</div> </div> </body> <script src="scripts/sample.js"></script> </html>
To begin with backbone.js we will be in need of three third party scripts.
- Backbone.
- Underscore/ LoDash.
- J-query/Zepto.
In the above html page we have included backbone-1.0.0.js. and we have to include Underscore/ LoDash and J-query/Zepto. After loading all the libraries and selector engine we are able to write html codes.
JavaScript file
var obj = {};
_.extend(obj, Backbone.Events);
obj.on("show-message", function(msg) {
$('#display .listing').text(msg);
});
obj.trigger("show-message", "Hello World");now as we can see there are many things happening in the above code snippet. As we can see at the first line
var obj = {};We are creating an object named ‘obj’. The second line is very important.
_.extend(obj, Backbone.Events);
In this line we can see that the utility library is providing us with many functions. One of which is extend. This function takes two or more objects as its arguments. After copying the attributes from them, appends them to the first object. The extend utility function is the best way of adding Backbone functionality to the classes. our object obj is now a Backbone Event object, which can be used for triggering events and running callback functions when an event is triggered.
Except the above code we can also write the same code using templates. Let us see to that:
var AppView = Backbone.View.extend({
el: $('#container'),
template: _.template("<h3>Hello <%= who %><h3>"),
initialize: function(){
this.render();
},
render: function(){
this.$el.html(this.template({who: 'world!'}));
}
});
var appView = new AppView();In the above code we are using a different approach to print Hello world! We are using template. We have created a view here which extends the utility libraries.
el: $('#container'),‘el’ here is a DOM element of the view. Next we have a template which has the placeholder ‘who’ to be substitute later.
this.$el.html(this.template({who: 'world!'}));In this line we are rendering the function using substituting the variable ‘who’ for ‘world!’ . at the very last we are using the following code snippet to initialize the view.
var appView = new AppView();
Backbone.js provides us with five very important features.
- Models.
- Collections.
- Views.
- Templates.
- View events.
We will just go through the basics of these five features in this article.
Models: Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it.
Collections: A collection proxies to Underscore to give list functions for working with the data.
Views: Backbone views are used to reflect applications’ data models. They are also used to listen to events and react accordingly.
Templates: Templates are essentially pieces of markup that is use to create a bunch of different reusable copies of that markup but populating each component with different data.
View events: Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events.
We will have detail of Backbone features in our later articles. So please look for the same.
| Reference: | Introduction to Backbone.js from our JCG partner Piyas De at the Phlox Blog blog. |
