Every developer knows that computer algorithms are tightly related to data structures. Indeed many of the algorithms depend on a data structures and can be very effective for some data structures and ineffective for others. A typical example of this is the heapsort algorithm, which depends on a data structure called “heap”. In this case although the stack and the queue are data structures instead of pure algorithms it’s imporant to understand their structure and the way they operate over data.

However, before we continue with the concrete realization of the stack and the queue, let’s first take a look on the definition of this term. A data structure is a logical abstraction that “models” the real world and presents (stores) our data in a specific format. The access to this data structure is often predefined thus we can access directly every item containing data. This help us to perform a different kind of tasks and operations over different kind of data structures – insert, delete, search, etc.. A typical data structures are the stack, the queue, the linked list and the tree.

All these structures help us perform specific operations effectively. For instance searching in a balanced tree is faster than searching in a linked list.

It is also very important to note that data structures can be represented in many different ways. We can model them using arrays or pointers, as shown in this post. In fact the most important thing is to represent the logical structure of the data structure you’re modeling. Thus the stack is a structure that follows the LIFO (Last In First Out) principle and it doesn’t matter how it is represented in our program (whether it will be coded with an array or with pointers). The important thing into a stack representation is to follow the LIFO principle correctly. In this case if the stack is an array only its top should be accessible and the only operation must be inserting new top of the stack.

Overview

The stack and the queue are somehow related data structures as they represent two parts of somehow identical logics. Thus they are commonly described in pair.

Stack

The stack data structure models the real-world stack. You can think of it as stack of boxes one above the other. Thus the only way to put another item into the stack is to put it above all other items (on its top). This operation is often called “push”. In the other hand taking an item from the stack is called pop, and also only the highest item can be “poped”. The following image describes better the structure of the stack and its operations – push and pop.

We see here how computer data structures model the real world. The stack data structure indeed makes no exception and models the real-world stacks.

Stack Implementation

As I said a stack can be implemented in some different ways. The first approach is to use an array (using the specific language syntax of the programming language of your choice). Here’s the implementation of a stack using an array in PHP.

$stack = array();

function push($data, &$stack) {
	$stack[] = $data;
}

function pop(&$stack)
{
	$len = count($stack);
	$top = $stack[$len-1];
	
	unset($stack[$len-1]);
	
	return $top;
}

// array()
print_r($stack);

push(1, $stack);
push(2, $stack);
push('some test', $stack);
push(array(25,12,1999), $stack);

// [1, 2, 'some test', [25, 12, 1999]]
print_r($stack);

// [25, 12, 1999]
echo pop($stack);
// 'some test'
echo pop($stack);

// [1, 2]
print_r($stack);

However there are much easier ways to do the same thing with PHP since there are lots of predefined functions that work with stacks.

$stack = array();

function push($data, &$stack) {
	$stack[] = $data;
}

function pop(&$stack)
{
	return array_pop($stack);
}

// array()
print_r($stack);

push(1, $stack);
push(2, $stack);
push('some test', $stack);
push(array(25,12,1999), $stack);

// [1, 2, 'some test', [25, 12, 1999]]
print_r($stack);

// [25, 12, 1999]
echo pop($stack);
// 'some test'
echo pop($stack);

// [1, 2]
print_r($ret);

As in many programming languages here the example makes use of integers but it can be modified to work with more complex data types as objects, mutli dimensional arrays, etc. However we can use a higher level abstraction in order to represent a stack. Here’s a short example of a stack using pointers. The stack class only holds a pointer to the top of the stack. Thus only the top can be “poped”. Also each elements points to its predecessor. Using this abstraction we’re sure that the programmer can perform only these two operations – “pop” and “push”.

class Struct
{
	protected $_data = null;
	protected $_next = null;
	
	public function __construct($data, $next)
	{
		$this->_data = $data;
		$this->_next = $next;
	}
	
	public function getData()
	{
		return $this->_data;
	}
	
	public function setData(&$data)
	{
		$this->_data = $data;
	}
	
	public function getNext()
	{
		return $this->_next;
	}
	
	public function setNext(&$next)
	{
		$this->_next = $next;
	}
}

class Stack
{
	protected $_top = null;
	
	public function push($data)
	{
		$item = new Struct($data, null);
		
		if ($this->_top == null) {
			$this->_top = $item;
		} else {
			$item->setNext($this->_top);
			$this->_top = $item;
		}
	}

	public function pop()
	{
		if ($this->_top) {
			$t = $this->_top;
			$data = $t->getData();
			
			$this->_top = $this->_top->getNext();
			
			$t = null;
			
			return $data;
		}
	}
	
	public function __toString()
	{
		$output = '';
		$t = $this->_top;
		while ($t) {
			$output .= $t->getData() . ' ';
			$t = $t->getNext();
		}
		
		return $output;
	}
}

$s = new Stack();
$s->push(1);
$s->push(2);
$s->push(3);

// 3 2 1
echo $s;

$s->pop();
$s->pop();

// 1
echo $s;

Queue

As mentioned above the queue is somehow related to the stack data structure. However it follows a different principle – FIFO (First In First Out), which means that the item that has been in the queue for the longest time is retrieved first.

This comes again from the real world, where we can think of a queue of people waiting in front of a movie theater. In this case the person that has waited the most takes its ticket first.

Queue Implementation

An array representation of a queue isn’t a difficult task. However the only example of a queue here is using pointers. Indeed the following code syntax is very tightly related to PHP so only the main principles of supporting a queue functionality is important.

class Item
{
	public $data = null;
	public $next = null;
	public $prev = null;
	
	public function __construct($data)
	{
		$this->data = $data;
	}
}

class Queue
{
	protected $_head = null;
	protected $_tail = null;
	
	public function insert($data)
	{
		$item = new Item($data);
		
		if ($this->_head == NULL) {
			$this->_head = $item;
		} else if ($this->_tail == NULL) {
			$this->_tail = $item;
			$this->_head->next = $this->_tail;
			$this->_tail->prev = $this->_head;
		} else {
			$this->_tail->next = $item;
			$item->prev = $this->_tail;
			$this->_tail = $item;
		}
	}
	
	public function delete()
	{
		if (isset($this->_head->data)) {
			
			$temp = $this->_tail;
			$data = $temp->data;
			
			$this->_tail = $this->_tail->prev;
			
			if (isset($this->_tail->next))
				$this->_tail->next = null;
			else 
				$this->_tail = $this->_head = null;
			
			return $data;
		}
		
		return FALSE;
	}
	
	public function __toString()
	{
		$output = '';
		$t = $this->_head;
		while ($t) {
			$output .= $t->data . ' | ';
			$t = $t->next;
		}
		
		return $output;
	}
}


$q = new Queue();

$q->insert(1);
$q->insert(2);
$q->insert(3);

// 1 2 3
echo $q;

$q->delete();
$q->delete();

// 1
echo $q;

$q->insert(15);
$q->insert('hello');
$q->insert('world');
$q->delete();

// 1 15 "hello"
echo $q;

Application

Stacks and queues are widely used in programming. By defining stacks and queues we somehow predefine the way our data structure is accessed, thus we’re sure that our program will access the data in a specific manner. For instance if we code a queue for a list or upcomming commands, we’re sure that the most waited command will be executed first. In this case we predefine the order the commands are processed. In the web programming, especially in JavaScript, every developer knows what’s an event fired in a web browser environemtn. In case of many events, they’re putted into a queue and they are executed consecutively in the order they were fired by the user.

Another example is the execution stack of most of the programming compilers and interpreters. We know that in a OOP languages, such as PHP for instance, there’s a stack of function calls. In case of failure we can easily see the “stack trace”.

You see how many examples of queues and stacks there are in the real-world programming. These two structures are easy to implement yet very important in order to understand other more complex data structures as linked lists and trees.

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.

HTML5 is mentioned as entirely new “thing” out in the web, but what it actually means is rather a collection of new, unknown for the current HTML version, features. One of the most interesting and used things in HTML5 are the support of a video in a entirely new “video” tag. Until now the playing of a video was either with Flash player or with Quick Time. But in both cases it relied on a third party plugins. Of course normally the question about performance was inevitable. Which is faster? But imagine we didn’t have the IMG tag? This give you the answer – using third party plugins always slows down the page, and today most of the web is based on video sharing and therefore the browsers become slower!

Performance of HTML5 video tag against Flash video players

As I mentioned above the performance of HTML5 video should be way better than the performance of any Flash video player. To be more precise I’ll reference an article from ajaxian.com, where the author points on his turn an interesting presentation. Indeed the performance of HTML5 video was way, way better:

But sometimes this doesn’t resolves all the problems. Normally with this “new” technique of putting a video into the page, come some additional issues.

First of all there are many codecs that the browser should support and almost always there is something “your” browser don’t support. That makes the task bigger. Now you should support more and more video file formats for the different browsers. And yet another problem is the detection of this codec support.

Detection and integration

Lucky enough, I found a great article and tutorial describing how to integrate HTML5 video with progressive enhancement. First of all you can check for it’s support than downgrade to Quick Time and Flash and if the client doesn’t support even that – render an image.

You can find the source here.

Thanks to this technique you can fully integrate new video tag into your page. Remember that most of the clients for sure will be happy to watch video in a more user friendly manner.