Veera Sundar

Backbone JS – Hello World tutorial

Veera — Mon, 30 Jan 2012 15:39:11 +0000

Backbone.js is recently getting lots of traction among the web developers because of its ability to organize the JavaScript code. It provides the structure (Model-View) around which we can build our JavaScript heavy web applications.

I have started learning backbone.js for my personal project and I’m going to document my learning along the way. Let’s start with a simplest possible example: A Hello World tutorial in Backbone.js (duh!)

You are welcomed to point out any anti-patterns/mistakes that I made in this tutorial so that I can update the content for better.

Demo | Source code

The need for Backbone.js

Generally, we use JavaScript to handle UI events (click, keypress, etc), to process the UI data (innerHTML, etc) and to render DOM elements (appendChild, etc).

Without a framework like Backbone.js, each developer would implement the above logic in his/her own coding style. This might cause some maintenance issues if multiple developers are involved.

Backbone.js provides a structure to do the above operations so that it is easy to write a maintainable code with less effort.

With Backbone, you get the following constructs:

Model - used to represent your application data. For example, an Employee model.
Collection - used to hold a list of your model objects. For example, an Employees collection which contains a list of Employee model.
Views - each model & collection can be associated with a Backbone view. You can also create a view for an existing DOM element so that the view can respond to events generated from that DOM element.

That said, Let’s start building our application step by step.

0. Requirement

Our requirement is to create a application that gets a name from the user and says ‘Hello {name}’ and appends it to a list.

1. Create the User Interface

Let’s create our user interface first.

	
		
			Backbone JS - Hello World Tutorial!
			<= back to the article
		

		
			
				Enter a name and click say hello!

As you can see, it’s a simple HTML document with a textbox, button to accept user input and a empty OL element to hold the list of hello messages.

2. Create the Backbone Views to represent the UI elements

We have two views in our UI: One that accepts user input and one that shows the accepted inputs as a list. So, we’ll create two Backbone views for this. Open the hello.js and type in the below code.

(function($) {

	var UserInputView = Backbone.View.extend({

		el : '#UserInput',

		initialize : function() {
			this.helloListView = new HelloListView();
		},

		events : {
			'click button' : 'addToHelloCollection'
		},

		addToHelloCollection : function(e) {
		}
	});

	var HelloListView = Backbone.View.extend({

		el : '#HelloList',

	});

	new UserInputView();

})(jQuery);

Because we are creating the Backbone views to represent the existing DOM elements, we can mention the elements in el option. You can use the CSS3 selector syntax here and Backbone will find the element for you.

All Backbone objects has an initialize() function. Above we are initializing the UserInputView with a reference to the HelloListView.

Each view can accept a events object. Within this, you can specify what are all the events this view will trigger and method name to handle the event. In our case, we have a click event for the button element and a method addToHelloCollection to handle the click event. It is important to note that Backbone searches for the elements mentioned inside the events hash (in this case button) inside the el. So the el element should contain whatever element you give in the events object.

3. Create Backbone Model, Collection and a view to represent the model

It’s time to create a Backbone Model to hold our application data. We can map each hello message to a model. Since we have list of messages, we’ll create a Backbone Collection too. Lets look at the code.

var Hello = Backbone.Model.extend({
		initialize : function() {
			this.name = 'name'
		}
	});

	var HelloView = Backbone.View.extend({
		tagName : 'li',
		render : function() {
			$(this.el).html('Hello ' + this.model.get('name'));
			return this;
		}
	});

	var HelloList = Backbone.Collection.extend({
		model : Hello
	});

Hello is the model object with a property name initialized to ‘name’. HelloList is the collection and we set this collection model property to our Hello model.

In Backbone, each Model and Collection can have it’s own view to render themselves. So, we created a HelloView for the Hello model with the render() method to generate the HTML output. Since this view is not associated with any existing DOM elements and Backbone needs a wrapper tag to surround the rendered output, we provide the tagName property with ‘li’. Because of this, when the Hello model generates its HTML code (in render() method), it will be surrounded by li tag.

4. Combine everything: The final code for hello.js

Lets update our hello.js file with this final JavaScript.

(function($) {

	var UserInputView = Backbone.View.extend({

		el : '#UserInput',

		initialize : function() {
			this.helloListView = new HelloListView();
		},

		events : {
			'click button' : 'addToHelloCollection'
		},

		addToHelloCollection : function(e) {
			var hello = new Hello({
				name : this.$('input').val()
			});
			this.helloListView.collection.add(hello);
		}
	});

	var Hello = Backbone.Model.extend({
		initialize : function() {
			this.name = 'name'
		}
	});

	var HelloView = Backbone.View.extend({
		tagName : 'li',
		render : function() {
			$(this.el).html('Hello ' + this.model.get('name'));
			return this;
		}
	});

	var HelloList = Backbone.Collection.extend({
		model : Hello
	});

	var HelloListView = Backbone.View.extend({

		el : '#HelloList',

		initialize : function() {
			_.bindAll(this, 'render', 'appendToHelloUL');
			this.collection = new HelloList();
			this.collection.bind('add', this.appendToHelloUL);
		},

		render:function(){

			$.each(this.collection.models, function(i, helloModel){
				self.appendToHelloUL(helloModel);
			});
		},

		appendToHelloUL : function(helloModel) {
			var helloView = new HelloView({
				model : helloModel
			});
			$(this.el).append(helloView.render().el);
		}
	});

	new UserInputView();

})(jQuery);

As you can see, we have two Backbone views:

UserInputView – which listens to the user interface events(button click) and update the model object with user input.
HelloListView – which listens to the changes in our model(add event) and update the user interface with the model values.

Everything starts when we create a new UserInputView() which triggers initialize function for each objects and sets up event listeners. When user interacts with the view, the respective event listeners are called and the model gets updated. Then the HelloListView which is listening to model changes gets triggered and the user interface is updated.

Well, that concludes this tutorial. You can see the completed application in action or fork the code in GitHub.

We’re on Google+ and Facebook

Veera — Sat, 28 Jan 2012 04:24:44 +0000

I’ve been using Google Friend Connect tool in this blog for my readers to join this site. But, last November, Google announced that they will be shutting down Friend Connect and recommended site owners to create a Google+ page, instead.

So, there it is: Google+ page for this blog.

There were 148 subscribers joined this site through Friend Connect. I have already sent out a newsletter to all of them, asking to add my blog to their circle. But, I highly doubt that how many of them have a Google+ profile already. So, I expect, the adoption would be little slow.

Anyway, If you are already in Google+, don’t forget to add my blog to your circle. Also, I’ve setup a Facebook page too!

Thanks for reading. :)

The Rise of the Front End Developers

Veera — Tue, 24 Jan 2012 17:53:54 +0000

In any web development company, there exists two different worlds; well there are more, but we’ll just focus on - front end (designers) & back end (developers)

The Front end guys are responsible for making something that is visible to the end users (THE LOOK). The back end guys are responsible for making the front end work (THE FUNCTIONALITY). Together, they both deliver a complete web application/site.

The back end developers would typically use programming languages, such as Java/C++/Python. Apart from talking to database and processing requests, they even have an arsenal of libraries to generate the site markup (JSPs, server side templates, etc).

Front end guys usually fill in by writing HTML documents and CSS files (merely a writer) to present this markup in an visually pleasing way and back end just take these templates to populate data.

Front end had only one option to do any logical operations, by using JavaScript - which has been used for a long time just to validate forms (and do some freaky stuffs).

Because of this cultural difference, there’s always been a ego-war between these two worlds. Even the company management would rate the front end guys par below the back end developers because the front ends guys don’t do any serious programming.

All was going fine until the web2.0 era. Now, the front end realized that they could use JavaScript to do much more cooler stuffs than just the form validation. The development of high speed JavaScript engines (such as V8) made it possible to run complex JavaScript code right in the browser. With the introduction of technologies such as WebGL and Canvas, even graphics rendering became feasible using JavaScript.

But, this didn’t change anything on the server side; the server programs were still running on JVMs/Rubys/Pythons.

Fast forward to today: The scenario is dramatically changing. JavaScript has just sneaked its way into the servers. Now, it is no longer required that a web application needs to have a back end programming language such as Java/C++. Everything can be done using just JavaScript.

Thanks to node.js which made it possible to run the JavaScript on the server side. Using MongoDB, one can replace the need to have SQL code and now store JSON documents using JavaScript MongoDB connectors. The JavaScript template libraries such as {{Mustache}}/Underscore almost removed the need to have server side templates (JSPs). On the client side, JavaScript MVC frameworks such as Backbone.JS enable us to write maintainable code. And, there’s always the plain old JavaScript waiting for us to write some form validation script.

With that, now it is possible to do the heavy lifting just by using JavaScript. The front end JavaScript programmers no longer need to focus on just the front end. They can use their skill set to develop the web application end-to-end.

This rise of the front end developers poses a real threat to the survival of back end developers. If you are one of that back end guy, do you already realize this threat? What’s your game plan to stay fit to survive this challenge?

Fix for viewing Tamil font in Chrome – Ubuntu

Veera — Sun, 22 Jan 2012 10:16:00 +0000

It seems like the Chrome browser in Ubuntu has some issues in displaying Tamil fonts. I guess, other Indian languages also might be having the same issue. The weirdest thing is Firefox was displaying the Tamil content properly.

So, after searching through the Chromium group for a while, found the fix for this issue.

To fix Tamil font in Ubuntu Chrome

Open Terminal
Go to the folder: cd /usr/share/fonts/truetype/freefont
Delete FreeSerif.ttf: sudo rm FreeSerif.ttf
Delete FreeSans.ttf: sudo rm FreeSans.ttf
Close and re-open the browser.

The Tamil font should be displayed properly now.

Java.lang.VerifyError: Expecting a stackmap frame at branch target – JDK 7

Veera — Wed, 18 Jan 2012 13:53:21 +0000

Right now, when I try to persist an object in Google App Engine, I’m facing the error “Java.lang.VerifyError: Expecting a stackmap frame at branch target“. I’m using JDK 7 and it seems like the problem lies with this JDK.

After googling a bit, I found that there seems to be two solutions to fix this problem.

Solution 1: Change to JDK 6

As simple as is, change your JDK to version 6 and you won’t be bugged by this exception anymore. Well, in my case, I have to use JDK 7. So, moving on to the solution 2.

Solution 2: Configure JVM

Go to Windows -> Preferences -> Installed JREs. Select the default JVM and click edit. Then add this parameter as VM argument “-XX:-UseSplitVerifier” as seen below.

This should solve the issue.

Veera Sundar

Backbone JS – Hello World tutorial

The need for Backbone.js

0. Requirement

1. Create the User Interface

Backbone JS - Hello World Tutorial!

<= back to the article

2. Create the Backbone Views to represent the UI elements

3. Create Backbone Model, Collection and a view to represent the model

4. Combine everything: The final code for hello.js

Related Posts

We’re on Google+ and Facebook

Related Posts

The Rise of the Front End Developers

Related Posts

Fix for viewing Tamil font in Chrome – Ubuntu

To fix Tamil font in Ubuntu Chrome

Related Posts

Java.lang.VerifyError: Expecting a stackmap frame at branch target – JDK 7

Solution 1: Change to JDK 6

Solution 2: Configure JVM

Related Posts