Veera Sundar » Web

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.

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?

How to create a new image in GIMP with the size of clipboard image

Veera — Sun, 08 Jan 2012 05:34:15 +0000

When you are designing a web page and you are given only the single visual design image file, it is vital to slice the image into multiple smaller images to get the required image parts (logo, icons etc.).

In Photoshop world, slicing images is piece-of-cake. When you copy an image and choose “File->New”, Photoshop automagically sets the new image dimension as of the clipboard image.

But GIMP doesn’t do this! Wait…there’s another technique to achieve the same functionality in GIMP.

Open the image from which you want to cut smaller images and make them as separate files.
Copy/Cut your required section.
Now go to “Edit -> Paste as New Image” (or just Ctrl+Shift+v)
Bingo! you have a new image with the same size as of the one you just cut/copied.

Making XAMPP to serve any directory outside htdocs

Veera — Tue, 22 Nov 2011 06:52:22 +0000

So, you have installed XAMPP on windows, changed its server port to a different number other than 80 and changed the MySQL root password to a more secure one. Now its the time to create some HTML files that will be served by XAMPP server.

By default, XAMPP serves any file that is located under the directory [xampp_installation_folder]/htdocs, which means that you have to copy all your HTML/PHP files inside this directory. But what if you maintain a different folder for all your projects files and you want XAMPP to serve them too along with htdocs?

Lets make XAMPP to do this.

Open the file [xamp_installation_folder]/apache/conf/httpd.conf in any text editor.

Copy below lines after the htdocs element after changing the directory to your own folder.


    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all

Then search for this string:
. Inside that element, add a new alias as followed:
```
Alias /yoursite/ "C:/path/to/your/folder/yoursite/"
```
Save the file and restart the XAMPP server.

After this, if you have a website named ‘yoursite’ inside the folder ‘c:/path/to/your/folder’ you can access it directly by using the URL: http://localhost:8080/yoursite/ (assuming you have changed XAMPP port to 8080).

Design changes

Veera — Tue, 08 Nov 2011 05:30:36 +0000

Just a quick note to let you know that the design of this blog has been changed a bit. If you are using a wide screen monitor (> 1100 pixels), you would notice that the blog title has been moved towards the left, leaving more space for the post content.

Floating the title left caused a broken layout in resolution that are less than 1100 pixels. The title was displayed on top of the content, because of the absolute positioning. But, thanks to media queries, the layout is now adopts itself to all monitors.

@media all and (min-width:1100px){
.custom #header{border:none;position:absolute;top:0;left:0;width:100px;}
}

And, there’s space for the social buttons too, which I shamelessly copied from my own home page.

So, what do you think?

PS: If you are reading this post in an reader, never mind!

Veera Sundar » Web

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

The Rise of the Front End Developers

Related Posts

How to create a new image in GIMP with the size of clipboard image

Related Posts

Making XAMPP to serve any directory outside htdocs

Related Posts

Design changes

Related Posts