No matter how fast today’s computers and networks are, the users will constantly need faster and faster services. To reduce the volume of the transferred data we usually use some sort of compression. That is why this computer sciences area will be always interesting to research and develop.

There are many data compression algorithms, some of them lossless, others lossy, but their main goal aways will be to spare storage space and traffic. These algorithms are very useful when talking about data transfer between two distant places. Perhaps the best example is the transfer between a web server and a browser.

In the last few years a lot of research has been done on compressing files, executed on the client side. Such files are javascript, css, htmls and images. In fact servers and clients already have some techniques to compress data, like using GZIP for instance, that can dramatically decrease the transfer. In the other hand there are lots of tools and tricks in order to decrease the size of the data.

Actually when a file is executed by the client’s virtual machine, it doesn’t matter how “beautifully” it is formatted from a programmer’s point of view. Thus the spaces, tabs and the new lines don’t bring any significant information for the environment. That is why such compressing tools like YUI Compressor, Google Closure Compiler, etc. remove those symbols. Well, they can achieve even more in order to improve the compression rate. In this post I won’t cover this, but this shows how important data compression algorithms are.

It would be great if we could just compress data with some tool. Unfortunately this is not the case and usually the compression rate depends on the data itself. It is obvious that the choice of data compression algorithm depends mainly on the data and first of all we must explore the data.

Here I’ll cover one very simple lossless data compression algorithm called “run-length encoding” that can be very useful in some cases.

Overview

This algorithm consists of replacing large sequences of repeating data with only one item of this data followed by a counter showing how many times this item is repeated. To become clearer let’s see a string example.

aaaaaaaaaabbbaxxxxyyyzyx

This string’s length is 24 and as we can see there are lots of repetitions. Using the run-length algorithm, we replace any run with shorter string followed by a counter.

a10b3a1x4y3z1y1x1

The length of this string is 17, which is approximately 70% of the initial length. Obviously this is not the optimal way to compress the given string. For instance we don’t need to use the digit “1” when the character is repeated only once. In some cases this approach can increase the length of the initial string which is exactly the opposite of what we need. In this case we’ll get the string bellow.

a10b3ax4y3zyx

Now the length of the resulting string is 13, which is 54% of the initial length! A variation of the example above is not to keep a counter of the repetitions of the character, but their position instead. Thus the initial string will be compressed as follows.

a0b10a13x14y18z21y22x23

Which of these two approaches you’ll use depends on the goal. In the second case we can achieve a good optimization of binary search.

It is clear that this algorithm is not only applicable on strings. We can achieve very good results on arrays. A typical example is the transfer of JSON from a server to a client. Then if there are large sequences of repeating data we can achieve great results.

Implementation

The implementation bellow is assuming that we’re compressing a string and it’s written on PHP. However the nature of this algorithm doesn’t restrict us to use only strings. As I said before with slight modifications we can use it with other data structures. It is important only to understand that the run-length algorithm is very useful on large sequences of repeating elements, no matter characters or array items.

$message = 'aaaaaaaaaabbbaxxxxyyyzyx';

function run_length_encode($msg)
{
	$i = $j = 0;
	$prev = '';
	$output = '';
	
	while ($msg[$i]) {
		if ($msg[$i] != $prev) {
			
			if ($i) 
				$output .= $j;
				
			$output .= $msg[$i];
				
			$prev = $msg[$i];
			
			$j = 0;
		}
		$j++;
		$i++;
	}
	
	$output .= $j;
	
	return $output;
}

// a10b3a1x4y3z1y1x1
echo run_length_encode($message);

And slightly optimized.

$message = 'aaaaaaaaaabbbaxxxxyyyzyx';

function run_length_encode($msg)
{
	$i = $j = 0;
	$prev = '';
	$output = '';
	
	while ($msg[$i]) {
		if ($msg[$i] != $prev) {
			
			if ($i && $j > 1) 
				$output .= $j;
				
			$output .= $msg[$i];
				
			$prev = $msg[$i];
			
			$j = 0;
		}
		$j++;
		$i++;
	}
	
	if ($j > 1)
		$output .= $j;
	
	return $output;
}

// a10b3ax4y3zyx
echo run_length_encode($message);

Finally a small change – now we store the position of the character.

$message = 'aaaaaaaaaabbbaxxxxyyyzyx';

function run_length_encode($msg)
{
	$i = 0;
	$prev = '';
	$output = '';
	
	while ($msg[$i]) {
		if ($msg[$i] != $prev) {
				
			$output .= $msg[$i] . $i;
				
			$prev = $msg[$i];
			
		}

		$i++;
	}
	
	return $output;
}

// a0b10a13x14y18z21y22x23
echo run_length_encode($message);

Complexity and Data Compression

We’re used to talk about complexity of an algorithm measuring time and we usually try to find the fastest implementation, like in search algorithms. Here it is not so important to compress data quickly, but to compress as much as possible so the output is as small as possible without lossing data. A great feature of run-length encoding is that this algorithm is easy to implement.

Application

We can use run-length encoding in many cases. It is commonly used to compress images and is very successful when we deal only with black and white images. Here I’ll cover another use case that I only mentioned above. Let’s say we have to transfer a very large array of data to our AJAX-powered application using JSON. Let’s say also that the data are some years, for instance the years of the premiere of a movie. There are lots of movies with a premiere in the same year, thus although the data is sorted, we actually can’t have any benefit. More important is that we have large sequences of data. Here we can use run-length encoding.

$data = array(
	0 	=> 1991,
	1 	=> 1991,
	...
	2223 	=> 1991,
	2224 	=> 1992,
	...
	19298 	=> 1995,
	19299 	=> 1996,
	...
);

As you can see to transfer the whole array can be a nightmare, especially on slow networks. It is better to compress it (i.e. with PHP’s json_encode).

// {"0":1991,"1":1991, ..., "2223":1991,"2224":1992, ..., "19298":1995,"19299":1996, ...}
echo json_encode($data);

After running run-length encoding we can receive something like the following array (note that these are only sample data and it’s up to you to decide which is the best format to store data).

$data = array(
	0 => array(1991, 2224),
	1 => array(1992, 3948),
	2 => array(1995, 2398),
	3 => array(1996, 3489),
);

And the JSON output.

// [[1991,2224],[1992,3948],[1995,2398],[1996,3489]]
echo json_encode($data);

Note that if the data is sorted we can achieve great success compressing it!!! This approach can be used for images, graphics or map coordinates.

This is only one example of how data compression can be useful in our daily work. Although the communication between the server and the client can be optimized and compressed, we can improve it. In other words we’re not always sure that the opposite side supports compression.

Well, it’s true that the client has to decompress the data, which can also be slow. Now in the first case we have only the time to transfer, as on the diagram bellow.

In the second case, we should sum the time for compression, transfer and decompression.

All this is important, but in general data compression can be handy in many cases in our daily work.

JavaScript, being a functional language, differs from most of the procedural/object oriented languages we know. The object oriented approach in JavaScript is rather strange. However there is much power in making objects! The syntax is really odd and there are several approaches.

Literal Notation

As many of you may know the most used notation is the JSON (JavaScript Object Notation).

{ 'key1' : 'val1'
, 'key2' : 'val2'
, 'key3' : 'val3'
}

Of course this is the very basic example. You can use as value any JavaScript object – another similar object or a function.

{ 'key1' : 'val1'
, 'key2' : { 'inner_key1' : 'inner_val1' }
, 'key3' : function() {
			return 10 + 5;
		 }
}

The two examples above are showing an anonymous object in JavaScript, but you can assign this code to some variable.

var myObject = 
	{ 'key1' : 'val1'
	, 'key2' : 'val2'
	, 'key3' : 'val3'
	}

or

var myObject =
	{ 'key1' : 'val1'
	, 'key2' : { 'inner_key1' : 'inner_val1' }
	, 'key3' : function() {
				return 10 + 5;
			 }
	}

and then you can call the properties of these objects with the ‘.’ operator:

myObject.key1;
myObject.key2.inner_key1;
myObject.key3();

So far so good – this is the literal object notation in JavaScript. However there is another “objects” in JavaScript.

Objects and Functions in JavaScript

Actually in JS the functions are also objects (classes). So you can define a function and then define another function inside or use the “this” operator.

var a = function(name)
{
	this.name = name;
	
	this.print = function() {
		alert(this.name);	
	}
}

Then you can make a new instance of this “class”.

var myObject = new a('hello world');
var anotherObject = new a('some test');

myObject.print(); // will print the string "hello world"
anotherObject.print(); // will print the string "some test"

Thus the function “a” defined within the code “var a = function(name) …” is a class in JavaScript. You can make instances (objects) of this class with the “new” operator.

You can use another notation for defining the function “a”, so both can be used and it’s up to you to decide which one is more convenient.

function a(name) 
{
	this.name = name;
	
	this.print = function() {
		alert(this.name);	
	}	
}

Prototypes

JS gives you more power. In most of the languages you’ve to define the class first and then make objects. In JS you can define a “class” then make some objects and then add some properties to the class by using the prototype.

var a = function(name) 
{
	this.name = name;
}

var myObj = new a('hello world');

a.prototype.print = function() {
	alert(this.name);	
}

myObj.print();

So you can see how you can add functions and properties to an already defined class using the prototype. Thus you can call the “print” function on the myObj object.

Inheritance

The prototype built-in property can be used to make use of one of the main OOP features – inheritance.

var SuperClass = function()
{
	this.superFunction = function() {
		return 'function in Super Class';	
	}
}

var sup = new SuperClass();
sup.superFunction(); // will return the string "function in Super Class"

Now you can add one more class and set its prototype to the SuperClass

var SubClass = function()
{
	this.subFunction = function() {
		return 'function in Sub Class';	
	}	
}

SubClass.prototype = new SuperClass();

Thus you make SubClass inherit from SuperClass. Now you can call the SuperClass properties from any SubClass object.

var sub = new SubClass();
sub.superFunction(); // will return the string "function in Super Class"
sub.subFunction(); // will return the string "function in Sub Class"

Even more! You can add properties to the super class with prototype.

SuperClass.prototype.myFunc = function() {
	return 'my new function';	
}

And then call it from the sub class:

sub.myFunc(); // will return the string "my new function"

Override a Function

What happens if you have the same function name in both classes. Actually this overrides the method in the sub class.

var SuperClass = function()
{
	this.myFunc = function() {
		return 'function in Super Class';	
	}
}

var SubClass = function()
{
	this.myFunc = function() {
		return 'function in Sub Class';	
	}	
}

SubClass.prototype = new SuperClass();

var sub = new SubClass();
sub.myFunc(); // will return the string "function in Sub Class"

while

var sup = new SuperClass();
sup.myFunc(); // will return the string "function in Super Class"

Conclusion

Now you know there are classes, inheritance and overrides in JavaScript – thus you can improve your object oriented JavaScript!

Typically in jQuery when you bind an HTML element with some event this event is fired every time the user (client) triggers it. Thus when you’ve a click event attached on a button you can click it as many times as you want. In some rare cases this can be tricky. Let’s imagine the following scenario.

1. The user clicks on a “vote” button.
2. Some AJAX calls are performed.
3. After a successful AJAX call you setup a cookie to deny further votes from this machine.

This seems to be pretty well known scenario, but as the click event is attached to the button there is enough time to click several times on the “vote” button and to vote several times. In this case before the cookie is set the user can vote more than once.

Demo

So one possible solution is to unbind the click event. In jQuery terms this is done by …

$.unbind()

With this method you can simply unbind the “click” event or whatever event there is attached on the desired HTML element. So now in the first case we had:

$(document).ready(function() {
    $('input').click(function() {
        $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
               , success : function() {
                    $('p').append('You\'ve voted successfully!
');
               }    
        }); 
    }); 
});

Now you can replace the code above with:

$(document).ready(function() {
    $('input').click(function() {
        $('input').unbind();
        $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
               , success : function() {
                    $('p').append('You\'ve voted successfully!
');
               }    
        }); 
    }); 
});

As you can see on the demo here now the button cannot be clicked more than once.

Demo

Cookies + unbind()

There is a problem however. After reloading the page the event is attached again, so the user can click on the button once more. The obvious solution is to combine both the cookie and the unbind() as shown in the following pseudo code.

$(document).ready(function() {
    if (cookie is not set) { 
        $('input').click(function() {
            $('input').unbind();
            $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
                   , success : function() {
                        $('p').append('You\'ve voted successfully!
');
                        set cookie
                   }    
            }); 
        });
    } 
});

What is typical for most of the web servers is that they listen for requests and respond as quickly as possible on every one of them. In fact the speed of the response is one of the main targets of optimization for developers. Fast servers are what everyone needs. From web developers to website visitors!

In the field of the that battle different web servers have different “weapons” to gain time. While this is useful in most of the cases, when it comes to a chat-like applications and Node.js approaches, the response is not always immediately returned. As I described in my posts until now about Node.js, a simple web server may wait for an event to be emitted, and than return the response.

I wrote about how to write the very first server, but than I didn’t described how to make a “non-responding” server. By the term “non-responding” I mean a server that responds not immediately after it has received and parsed/executed the request.

A typical web server, responding immediately on every request, written with Node, this may look like so:

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

The code that shows us that the request is executed and responds in these lines:

  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');

Actually by commenting/removing those lines you’ll get a server that simply doesn’t respond – ever! This of course is not the main goal, but you can start from somewhere.

var http = require('http');
http.createServer(function (req, res) {
  // res.writeHead(200, {'Content-Type': 'text/plain'});
  // res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

This is how you can hold for a while. Perhaps putting these lines in a conditional statement and periodically checking for some event to occur will do the job.

var http = require('http');
http.createServer(function (req, res) {
  if (something) {
     res.writeHead(200, {'Content-Type': 'text/plain'});
     res.end('Hello World\n');
  }
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

Looping Server

As described in the code above if you put the respond into a conditional you can possibly return the response after some event has fired. The only thing is to periodically loop and check for this condition to be true. Assuming your server’s code is in server.js, started with the “node server.js” command, you’ve to put this code into it:

var http = require("http"),
    fs	 = require("fs");  

// we create a server with automatically binding
// to a server request listener
http.createServer(function(request, response) {
	checkFile(request, response);
}).listen(8124);

function checkFile(request, response)
{
	var date = new Date();
	if (date-request.socket._idleStart.getTime() > 59999) {
		response.writeHead(200, {
			'Content-Type'   : 'text/plain',
			'Access-Control-Allow-Origin' : '*'
		});

		// return response
		response.write('OK', 'utf8');
		response.end();
	}

	// we check the information from the file, especially
	// to know when it was changed for the last time
	fs.stat('filepath', function(err, stats) {
		// if the file is changed
		if (stats.mtime.getTime() > request.socket._idleStart.getTime()) {
			// read it
			fs.readFile('filepath', 'utf8', function(err, data) {
				// return the contents
				response.writeHead(200, {
					'Content-Type'   : 'text/plain',
					'Access-Control-Allow-Origin' : '*'
				});

				// return response
				response.write(data, 'utf8');
				response.end();

				// return
				return false;
			});
		}
	});	

	setTimeout(function() { checkFile(request, response) }, 10000);
};

Note: you must change “filepath” with an existing file path in your system.

Here we can read periodically the file’s mtime, which is the modify time. Thus whenever the file is changed the server will return the response. It’s interesting to note that if no change occurs within the timeout period you’ve to return some status message as we did in those lines:

        
var date = new Date();
if (date-request.socket._idleStart.getTime() > 59999) {
	response.writeHead(200, {
		'Content-Type'   : 'text/plain',
		'Access-Control-Allow-Origin' : '*'
	});
	
	// return response
	response.write('OK', 'utf8');
	response.end();
}

The client side should long poll this server. The example bellow is written in jQuery. The only “special” thing is that after receiving the response, you must call the server again.

The Client

The client is nothing new to the jQuery/JavaScript community except you must call again the server when the response is returned:

function callNode() {
    $.ajax({
        cache : false,
		// setup the server address
        url : 'http://www.example.com:8124/',
        data : {},
        success : function(response, code, xhr) {

            if ('OK' == response) {
            	callNode();
                return false;
            }

            // do whatever you want with the response
            ...

            // make new call
            callNode();
        }
    });
};
callNode();

Summary

As Node can hold the response, the only thing you should do is to check periodically for something as in this example this was a file change. Than it’s important to change the client so it can call the server after the response from it is received.

Typically Node can be used for chat-like applications or whatever apps that must deliver real time data, but for sure it is really great software.

After Node.js is istalled, described in my previous post, I can simply run this command:

stoimenpopov:~# node server.js

and this will start the server with the code within server.js. But what’s the code of server.js?

Following the instructions of Node’s homepage and most of the tutorials I’ve found, I can simply copy/paste the code from the first lines of Node’s page:

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

There are several things I find interesting in this code, making it different from JavaScript as we know it. First of all what is

var http = require(‘http’)

and why I need it? What is the purpouse of 8124 and 127.0.0.1?

Node is built in modules and to use one of them you must first include it with require. Just like the example above with require(‘http’). In the same manner you can include every module of Node.

What are the Node’s modules are pretty well described in the API page. Well I’d like to say that the API page is quite insufficient. That is very bad, cause most of the code you’ll need developing a node.js applicatoin isn’t described/explained there.

However is more than obvious that 8124 is the port, while 127.0.0.1 is the IP address of the server, which in this case is the localhost. Thus after running the server and typing http://127.0.0.1:8124/ into your browser you’ll get “Hello World”. This is not enough when the server is running on a remote machine, while you’ve to access it from your local computer.

The first server

As I described the code above shows you an example server. In fact the API page shows a slightly different code:

var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World\n');
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');

Here the line:

}).listen(8124);

omits the address of the server. It appears to be non-required and the server is supposed to listen on this machine on the given port. To be honest I’m not sure why you’ve to write the server address, except for limit the possible address to this one. However in my case the server was installed on a remote machine indeed, while I was trying to access it from my local machine. So here are some base steps to do before accomplishing this.

1. Changing the IP address

First of all you can omit the IP address. This can help you move the code from one server to another without changing the code.

}).listen(8124, ip_address);

possibly a better solution is:

}).listen(8124);

Node can listen on whatever port you say so this is up to you to decide which port should be opened.

2. Opening the port

While everything’s on the localhost you wont have problems with port opening. If you’d like to access it remotely however, you’ve to open the port. In other words http://127.0.0.1:8124/ is OK without port opening, but http://example.com:8124/ – is not!

To open a port in UNIX/Linux you’ve to type this command in the terminal:

iptables -A INPUT -p tcp --dport 8124 -j ACCEPT

don’t forget to change the port number from 8124 to whatever port number you’re using.

3. The first AJAX call

We still cannot make the first AJAX call to the Node server. Here I’m using jQuery because of the easy AJAX interface.

$(document).ready(function() {
	$.ajax({
    	// setup the server address
        url : 'http://example:8124/',
        success : function(response) {
        	// on success
        	alert(response);
		},
        error : function() {
        	// on error
        }
    });
});

After executing this code in a browser there wont be a response. That is because of the remote AJAX calls restriction. To overcome this you’ve to change the returned header from the Node’s server, by adding this:

'Access-Control-Allow-Origin' : '*'

Now server.js will look like this:

var http = require('http');

http.createServer(function (request, response) {
	response.writeHead(200, {
		'Content-Type': 'text/plain',
		'Access-Control-Allow-Origin' : '*'
	});
	response.end('Hello World\n');
}).listen(8124);

you can now either load http://example.com:8124/ into your browser or to make the AJAX call. In both cases the answer will be “Hello World”

Summary

Now you have a very simple Node.js server. Well it is nothing special as it responses with “Hello World” on every request, but it works remotely.

Soon I’ll describe how to change the server so it can waits to respond until some event is emitted – which is the real power of Node.js.

First of all the use of some software is needed not because of itself, but because of the need of some specific functionality. In my case this was the need of real time news feed. Of course there is a way to make this without Node.js, as I’ll describe later in this post, but there are several disadvantages. However to begin from somewhere, let me explain what is Node.js.

Introducing Node.js

Perhaps the best way do describe what is Node.js is from its about page.

Node’s goal is to provide an easy way to build scalable network programs. In the “hello world” web server example above, many client connections can be handled concurrently. Node tells the operating system (through epoll, kqueue, /dev/poll, or select) that it should be notified when a new connection is made, and then it goes to sleep. If someone new connects, then it executes the callback. Each connection is only a small heap allocation.

…

In general Node is a program using the Google Chrome’s V8 JavaScript engine, which in turn is a program that can parse and execute code written in JavaScript. V8 is a very very interesting project itself. First of all from Google have developed this engine especially for one of his products – their browser Chrome. It pretends to be and by no means is one of the masterpieces of Google. It is fast and reliable engine, written in C++ and JavaScript, as Wikipedia’s page says. Actually this code is open source and can be embedded in whatever application written in C++. Thus you can have in your application a JavaScript engine.

Such kind of application/server is Node.js. With V8 embedded into, Node is intended to run on a machine and to serve some requests. Just like a normal web server, but with few differences. First of all Node is not only serving HTTP requests, but also TCP. Well I’m not so deep into this yet, but so far that works for me. What I need for now is its web serving functionality.

The way Node works, however is different from what we know from every other web server. Here it is a normal server in general:

Whenever a request comes to the server, it tries to return the response as fast as possible. This is one of the main goals of every web developer team – to make the application as fast as possible. However in Node the things work different:

Here the server doesn’t return immediately the response, but holds as long as possible until some “event” occurs. You can thing of Node as a classical chat server. Until one of the peers doesn’t write a message, the other doesn’t receive anything.

Some may be confused as how you can use both the typical web server, as Apache, with Node as another web server within the same page. The answer is – with AJAX. As you know thus you can have only one chunk of your page talking with the server – in this case the entire page is returned by Apache, but inside the page you can have a chat app using Node as a server, working perhaps on a different port on the same machine.

Typically this scenario can be simulated without Node, but as I said, with some disadvantages. Let’s say you have two browsers and one server – you can infinitely loop AJAX calls to the server and whenever there is new message on the server return it to the browser – this is quite inefficient. There are two approaches in this case.

1. You can make those AJAX calls too recently and you can have a call every N seconds. In that case if N is to short you’ll have too many calls and in case the other peer doesn’t make anything the server will be unusually loaded with no practical effect.
2. In the second case you can choose to make N too long – for instance 20 seconds. This is also bad, because during this period of time the peers may want to interact and chat.

In that case Node is a web server, but simply doesn’t return the response until a specific event doesn’t occur. How does this look like in a web browser. You may know how looking into the Firebug console for every AJAX call you see the request and how many seconds it has taken. If you make an AJAX call to a Node server app the request just doesn’t respond immediately.

Installing Node.js

The process of installation is described quite well, so I’m going to describe it in few steps.

1. Download the application from Git, note that V8 is embedded inside. The version while this post was written and of course was stable is v0.2.4
2. For those familiar with Unix/Linux systems, there are three simple steps following, however without GCC (Gnu Compiler Collection) you wont be able to proceed! I’m writing this especially for the Mac OS users, as they may know there is no built-in GCC there.
3. ./configure
4. make
5. make install
6. make test (optional)

This in general is enough. After all that you can write the node command in your terminal. However if there are some problems while compiling it you may refer to Git and the Node community for more help. Don’t forget that V8 can work only on x86, x64 and ARM architectures.

Summary

There are few things that can be summarized now:

1. First of all Node can be a web server, as Apache is, but with the option to respond on event firing.
2. You can request it either with a web page loaded in your browser or within a chunk of the page via AJAX.
3. To install Node you need GCC. It comes with V8 JavaScript engine inside, which can run only on x86, x64 and ARM.

So far so good! Now we have Node installed, practically useless, because there is no application running on it. In my next post I’ll describe how to run your first application.

If you’re familiar with jQuery you should already know what are selectors and how they work. However we’re used to get some DOM element with a specific selector, but actually sometimes you cannot select directly what you need. This is especially true when mixing more than one JavaScript libraries. In my case OpenLayers generated a vector layer and jQuery was supposed to change the vectors fill-color property.

With the simple $(‘path’) I easily got all vectors in the current document, but the problem was that I took them as text. Thus it came to me to use nested jQuery – $($(‘selector’));

To describe what actually happened in my case, let me show you a breve example.

Example

Here’s a short HTML markup:

text text

With jQuery I can select both the DIV and SPAN with the simple $(‘div’) and $(‘span’), but just for the example lets assume I’ve only the inner text of the DIV tag:

$('div').html();

That was the case in the OpenLayers/jQuery problem. Now I can easily use another jQuery selector:

$($('div').html());

This will return the same as $(‘span’) – a jQuery object.

Animation

As I said animating some vector properties is as simple as:

var paper = Raphael('canvas', 1024, 500);
var c = paper.circle(50, 50, 6).attr({fill : '#f00'});
c.animate({r : 10, fill : '#00f'}, 1000);

Here we change the radius and the background color of the circle for 1000 milliseconds.

The same thing can be done with any property with any other JavaScript library as jQuery. But as in jQuery, Raphael or whatever library the animation is not looping. That’s natural you can just change a property by animating it, but the looping animation suggests at least two animations. So it’s a developers job to implement this. Here’s a simple way to do this.

Two Way Animation

The solution here is using two functions calling each other.

var paper = Raphael('canvas', 1024, 500);
var c = paper.circle(50, 50, 6).attr({fill : '#f00'});

function a() {
    c.animate({r : 10, fill : '#00f'}, 1000, b);
}
function b() {
    c.animate({r : 6, fill : '#f00'}, 1000, a);
}
a();

$data = array(...);
$this->_helper->json($data);

// IndexController.php
class IndexController extends Zend_Controller_Action
{
	public function indexAction()
	{
		$data = array(...);
		
		$this->view->data = Zend_Json::encode($data);	
	}	
}

The result in general is a specially formatted string. So you can simply set it up to a view member variable and pass it to the view.

// index/index.phtml
echo $this->data

In that case you’ve a .phtml file to maintain, so lets just return the string and “setNoRender” the view in our second try.

// IndexController.php
class IndexController extends Zend_Controller_Action
{
	public function indexAction()
	{
		$data = array(...);
		
		echo Zend_Json::encode($data);	
		
		$this->_helper->viewRenderer->setNoRender(true);
	}	
}

Actually this is pretty much the most clear solution, but actually you can output the JSON string and simply exit() as it’s shown in our third example.

// IndexController.php
class IndexController extends Zend_Controller_Action
{
	public function indexAction()
	{
		$data = array(...);
		
		echo Zend_Json::encode($data);	
		
		exit();
	}	
}

Which one is to be used is up to the developer’s choice, mine is the third one as it’s the minimal one.