Writing First Node.js Server

Since Node.js project has been announced in 2009 it has gained very big interest and popularity in developers’ world. I wanted to play with node.js and wrote very simple server. It takes two parameters from HTTP request from browser URL and response is the sum of those two numbers.
Firstly we need to import http module for creating instance of server:

var http = require('http');

We will need url module too for simplifying parsing of arguments from URL:

var url = require('url');

Then we need to create server instance with listener function:

http.createServer(function (req, res) {
  ...
}).listen(7777);

This anonymous function is listener for client requests. It takes request and response objects as parameters. listen(7777) means that server is started on 7777 port at localhost.
For getting parameter values very easily in JSON object we will need just this:

var query = url.parse(req.url, true).query || {};

It is very simple and intuitive, as expected... In variable query we store object like this {a:1, b:2} if the request URL was ?a=1&b=2.
Let's check if both a and b are defined in query object and if yes then print sum if no then print warning in browser.

var rez = "";
if (query.a && query.b) {
  rez = (+query.a + +query.b) + "";
} else {
  rez = 'type url like "?a=1&b=2" to get sum from server!';
}

And finally there is whole code:

var http = require('http');
var url = require('url');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});

    var query = url.parse(req.url, true).query || {};

    var rez = "";
    if (query.a && query.b) {
        rez = (+query.a + +query.b) + "";
    } else {
        rez = 'type url like "?a=1&b=2" to get sum from server!';
    }

    res.end(rez);
}).listen(7777);
Advertisements

DWRProxy for ExtJs 4

If you are using ExtJs version 4.x for your RIA and DWR for easy to communicate between server-side and client-side (that means “easy ajax”, transform JavaScript object into Java object and vice-versa and so on) in that case you might have noticed that data package of ExtJs4 doesn’t support loading data from DWR method. I’we created Ext.ux.data.DwrProxy class that supports loading data into store from DWR method. Let’s look at sample code:


/**
 * Let's assume that we have already defined App.data.Store 
 * class with its Model class.
 */
var store = Ext.create('App.data.Store', {
    proxy: {
        type : 'dwr',
        /*DWR method that will return data.*/
        dwrFn : MyDWRClass.getRecords,

        /** Function that returns parameters for remote
         * DWR Method for each request.
         */
         getDwrArgs: function(operation, store) {
           var argObj = Ext.apply({}, operation.params);
           argObj.start = operation.start;
           argObj.limit = operation.limit;
           /**
            * If server side method takes several parameters
            * then array must be returned.
            */
           return argObj;
       },

       reader : {
           type: 'json',
           root: 'records',
           totalProperty: 'count'
       }
   }
}); 

The usage is very likely as DWRProxy classes for ExtJs 3.x and ExtJs 2.x but supports only loading data. I’m ready to implement create, update and destroy methods too if there will be any request for it (I only use DWRProxy just for loading data and paging).

I’ve implemented one additional config option – preprocessResponse that takes response data and fired before server response will be loaded into store. In very specific cases may be you need to do custom modifications to data before it will be load
ed by proxy.reader.

Please look at source of Ext.ux.data.DwrProxy and see more about what and how I’ve done and give me any feedback.

Wish you good luck with ExtJs4 and don’t forget to include DwrProxy.js. 🙂

UPDATE:
reader propery of proxy depends on response format and structure. In given case reader can read the following structured JSON object:

{
  /* because root = 'records' */
  records: [{},{},{},{}...],
  /* because totalProperty = 'count' */
  count: 100
}

ExtJs 4 Tree rootVisible false problem

I was building Ext.tree.Panel like this:


Ext.create('Ext.tree.Panel', {
    rootVisible : false,
    root   : {
        text    : 'Menu',
        children : [{
            text : 'Item 1',
            children : [{
                 text : 'Item 1.1',
                 leaf  : true
            },{
                 text : 'Item 1.2',
                 leaf  : true
            }]
        }, {
            text : 'Item 2',
            children : [{
                 text : 'Item 2.1',
                 leaf  : true
            }]
        }]
    }
});

And while instantiating I got this error: “Cannot read property ‘elements’ of undefined”. I searched this error w/o any luck. Then after looking demos and thinking a little bit I got the solution: root item must have expanded : true. So code must look like this:


Ext.create('Ext.tree.Panel', {
    rootVisible : false,
    root   : {
        text    : 'Menu',
        expanded : true,
        children : [{
            text : 'Item 1',
            children : [{
                 text : 'Item 1.1',
                 leaf  : true
            },{
                 text : 'Item 1.2',
                 leaf  : true
            }]
        }, {
            text : 'Item 2',
            children : [{
                 text : 'Item 2.1',
                 leaf  : true
            }]
        }]
    }
});

I hope this post will save your minimum 15 minutes 🙂

Another confusion in IE

It is well-known fact that there are a lot of staff that are implemented illogically in IE. I found another one, cost of which was three successive days of rewriting + debugging and a month of background warring + thinking for me…

I have implemented dynamic loading of .js content in my web application. It had problem in IE for a long time. Once it came time to fix it. I rewrite all the staff that was related to it. Originally it was in a single file. I rewrite it in three files with three different classes (App, Manager, Loader) to make it as simple and as clear as possible with a lot of comments. Loader class is responsible for file downloading and this was the most suspected place. After exploring during three successive days I found the problem. Originally the key method was written like this: (I use ExtJs):

       /* Loads .js file from specified URL */
	Loader.prototype.loadScript = function(src, callBack){
	    var script;
	    !this.head && (this.head = document.getElementsByTagName("head")[0]);
	    script = document.createElement('script');
	    script.type = 'text/javascript';
	    if(Ext.isIE){
	        //listener for IE
	        script.setAttribute('onreadystatechange', function() {
	            if (script.readyState == 'complete'){
	                callBack();
		    }
		});
            }else{
	        //listener for other browsers than IE.
	        script.onload = callBack;
	    }
	    script.setAttribute('src', src);
	    this.head.appendChild(script);
	};

Problem was in bolded line. There are two cases:

  • When the file is not in the cache then onreadystatechange is fired two times: firstly, script.readyState == ‘loading’ and secondly, script.readyState == ‘loaded’. script.readyState never equals to “complete”!!!.
  • When the file is in the cache then onreadystatechange is fired only once and script.readyState == ‘complete’.
  • So, I rewrite if condition like this: (script.readyState == ‘complete’ || script.readyState == ‘loaded’). It is very easy solution but it was quite time-consuming to get to it for me.

    The first thing is to discover that script.onload doesn’t work in IE and you have to use script.onreadystatechange instead and the socond thing is to debug and pray for discovering how onreadystatechange works 😀

Digital Image Processing using Matlab

Here, in this post I will write a code which will find the area in the picture where the sentence “Digital Image Processing” is written and outlines it.

So the result should be the picture where the sentence “Digital Image Processing” is highlighted.

 

%Reading image
I = imread(‘img1.jpg’);

%Show the original image
figure; imshow(I); title(‘Original Image’);

% Add some text on the right side of the picture, if you want to place this code in one
%line, remove dots.

text(size(I,2),size(I,1)+15,‘Edited by Mariam Kupatadze’,…
‘FontSize’,…
7,…
‘HorizontalAlignment’,…
‘right’);

Digital_Image_Processing_Original_Image

%Detect edges using sobel method
Isobel = edge(I,‘sobel’);

%Show image
figure; imshow(Isobel); title(‘Edge Detected Image’);

text(size(I,2),size(I,1)+15,‘Edited by Mariam Kupatadze’,…
‘FontSize’,…
7,…
‘HorizontalAlignment’,…
‘right’);

Digital_Image_Processing_Edge_Detected_Image

%Remove objects which are connected to the border
Inobord = imclearborder(Isobel);

%Show Image
figure; imshow(Inobord); title(‘Border Cleared Image 1’);

text(size(I,2),size(I,1)+15,‘Edited by Mariam Kupatadze’,…
‘FontSize’,…
7,…
‘HorizontalAlignment’,…
‘right’);

Digital_Image_Processing_Bordered_Cleared_Image_1

%Creates a disk-shaped structuring element by radius=15
StructEl1 = strel(‘disk’,15);

%Creates a linear structuring elements
StructEl2 = strel(‘line’, 3, 90);
StructEl3 = strel(‘line’, 3, 0);

%Remove the linear gaps from the picture
Idil = imdilate(Inobord, [StructEl2 StructEl3]);

%Because of, there left extra objects, I will dilate it by disk-shaped structuring element for to %make them connect to the border.
Idil = imdilate(Idil, StructEl1);

%Show image
figure; imshow(Idil); title(‘Dilated Image’);

text(size(I,2),size(I,1)+15,‘Edited by Mariam Kupatadze’,…
‘FontSize’,…
7,…
‘HorizontalAlignment’,…
‘right’);

Digital_Image_Processing_Dilated_Image

%Again remove objects which are connected to the border
Inobord1 = imclearborder(Idil);

%Show image
figure; imshow(Inobord1); title(‘Border Cleared Image 2’);

text(size(I,2),size(I,1)+15,‘Edited by Mariam Kupatadze’,…
‘FontSize’,…
7,…
‘HorizontalAlignment’,…
‘right’);

Digital_Image_Processing_Border_Cleared_Image_2

%Fill existing holes in the picture
Ifilled = imfill(Inobord1, ‘holes’);

%Show image
figure; imshow(Ifilled); title(‘Holes Filled Image’);

text(size(I,2),size(I,1)+15,‘Edited by Mariam Kupatadze’,…
‘FontSize’,…
7,…
‘HorizontalAlignment’,…
‘right’);

Digital_Image_Processing_Holes_Filled_Image

%Find perimeter of “Ifilled” image, with default connectivity 4
Ioutlined = bwperim(Ifilled);%The same as bwperim(Ifilled,4);
IOut = I;

%Highlight the desired area
IOut(Ioutlined) = 255;

%Show image
figure; imshow(IOut); title(‘Sentence Highlighted Image’);

text(size(I,2),size(I,1)+15,‘Edited by Mariam Kupatadze’,…
‘FontSize’,…7,…
‘HorizontalAlignment’,…
‘right’);

Digital_Image_Processing_Sentence_Highlighted_Image

How to Load JavaScript Contents Dynamically

This post is related to my previous post in terms of performance of loading page. Compressing and Combining .js files is very good thing to do. But not all .js files are essential for page functionality in the very first seconds after site is loaded. Almost in all web applications we are facing that situation. Application has many users with different privileges and roles. Not all list of menu is accessible for every user and in most cases user will not open all menus in one session. So, it has no purpose to load all .js files for the first time, because most of them will not be executed at all. Let’s make our architecture so that a .js file was loaded only after demand on function that is defined there. To explain better I’ll give very clear example. For example I have a web application with menu items (Let’s call them applications or subapplications ):

  • Menu 1
  • Menu 2
  • Menu 3

After the first load of site it is enough to load just those contents that displays my menu. And after click on Menu 1 firstly, let’s download that .js files where are defined functionality of Menu 1 and secondly, execute the functions that creates and displays the layout of Menu 1. I think I’m clear what I want to do. To approach the goal we have to create a singleton class that handles application content loading staff. All .js content will be downloaded by this class except essential files for displaying initial layout of web application. And this is the class that handlers dynamic loading:

(function(){
  var appManager, loadScript, head, App;
  appManager = {};
  appManager.cache = {}; //App instances will be cached here
  /**
  * Loads JavaScript from specified URL in DOM
  * @param {string} src
  *     URL for JavaScript file
  * @param {function} callBack
  *     function that will be called after file downloading finishes.
  *     Usually callBack function will call one of the function that
  *     is defined in newly downloaded file.
  */
  loadScript = function(src, callBack){
    var script;
    //get and cache head of document
    head && (head = document.getElementsByTagName("head")[0]);
    script = document.createElement('script'); //create script tag
    script.type = 'text/javascript';
    //listen to moment when downloading finishes (for IE)
    script.onreadystatechange= function() {
      if (this.readyState == 'complete') callBack();
    };
    //listen to moment when downloading finishes (for others than IE)
    script.onload = callBack;
    script.src = src; //assing src property to script tag
    head.appendChild(script); //append to head to begin download.
  };
  /**
  * Application class that has properties:
  *  name - name of subapplication
  *  src - URL of application's .js file
  *  callBack - function that will be executed after file loads,
  *  status - weather application file is downloaded or not.
  */
  App = function(name, callBack){
    this.name = name;
    /**
    * .js file name is considered to be
    * dirName + "_min.js" in directory
    * named dirName.
    */
    this.src = name + "/" + name + "_min.js";
    this.callBack = callBack;
    this.status = 'instantiated';
    /**
    * Cache application because not to
    * create and download more than once
    * the same application.
    */
    appManager.cache[name] = this;
  };
  /**
  * Method of App class that downloads its
  * .js file and executes callback function
  */
  App.prototype.load = function(){
    var that;
    this.status = 'loading';
    that = this;
    loadFinished = function(){
      that.callBack();
      that.status = 'loaded';
    };
    loadScript(that.src, loadFinished);
  };
  /**
  * By this function will be loaded applications
  * from global scope.
  * @param {string} appName
  *       Name of application, typically name of application
  *       and the name of directory under which application
  *       .js files are.
  * @param {function} callBack
  *        Function that will be executed after application
  *        loads.
  */
  appManager.load = function(appName, callBack){
    var app;
    /**
    * Create an application or get it from cache if it was created
    * before.
    */
    app = this.cache[appName] || new App(appName, callBack);
    if(app.isLoaded()){
      /**
      * If application is taken from cache and its file is already
      * downloaded then directly execute callBack.
      */
      callBack();
    }else if(app.isLoading()){
      /**
      * If application is taken from cache and the process of
      * downloading is in progress do nothing.
      */
      return;
    }else{
      /**
      *  Application is created for the first time and load it.
      */
      app.load();
    }
  };
  //make appManager global.
  window.appManager = appManager;
})();

This code is useful for understanding an idea and to run demos. But in real application, when there are many changes at runtime, this class also needs some additional functionalities such as: dependences on applications, some special files to be downloaded except core file and so on…

Now we have got dynamically loaded JavaScript content architecture.

Compressing and Combining all .js Files

Most of the people are trying to: make their front-end in Web, port their applications from Desktop to Web, make Rich Internet Applications (RIA) … that’t why webification is a global process. Webifying has a lot of advantages but, of course, rises some problems. One of the problem is a huge amount of web content most of which are JavaScript files. If your application is big enough (>60 files or hundrends of files) then your bottleneck will be load of web site. So, let’s do the tool that minifies the size of JavaScript content. Since a developer is always limited in time and sometimes the time that is given is too small, let’s use existing tools to accomplish our goal.

I chose Closure Compiler. It removes comments, spaces, new lines; does obfuscation and finally size of compressed file is very small. It is very simple to install, the only thing is to run a single .jar file. Let’s download it, extract and get “compiler.jar”. Save this file in “/home/giorgi/jars/” directory (instead of “giorgi” use existing user):

mkdir /home/giorgi/jars
cp compiler.jar /home/giorgi/jars

We will use it in command line and sample command is (make sure that you are in /home/giorgi/jars directory or where you have saved “compiler.jar”):

java -jar compiler.jar --js myJs.js --js_output_file myJs_min.js

As you guess myJs.js is original file and myJs_min.js will be compressed file. We can give multiple .js files to compress and combine in a single file:

java -jar compiler.jar --js myJs.js --js anotherMyJs.js --js_output_file myJs_min.js

If your application is multilanguage then you have to give –charset UTF-8 as parameter.

Writing commands by hand is wasting time, in this case. So, to make Closure Compiler much more useful let’s make a sample script that will generate and execute commands for us. Typically it is needed to compress files under some special directory where are .js files of web application. So, our script must compress files under one directory. Let’t do it by Python. The script must look for .js files under directory and subdirectories, collect their names and then generate a command line. It will look like this:

#!/usr/bin/python
#The above line indicates that this file
#must be run by python interpreter
import os;
import re;
#regular expression that matches .js file
a = re.compile('^.*\.js$')
#initially command looks like this
compress_command = 'java -jar /home/giorgi/jars/compiler.jar'
#get full path of current working directory
#(under which are .js file of our application)
cwd_full = os.getcwd()
#extract the name of current directory
cwd = cwd_full[cwd_full.rindex('/') + 1:]
#in all subdirectories check all
#files if it is .js file then add to command
for root, dirs, files in os.walk('../' + cwd):
    for name in files:
        if a.match(name):
            compress_command += ' --js ' + root + '/' + name

#add output file and charset to command.
#output file will be: nameOfCurrentDirectory + "_min.js"
compress_command += ' --js_output_file ' + cwd + '_min.js --charset UTF-8'
os.system(compress_command) #execute generated command.
  • Let’s save this python script in file and name as “do_js_compression.py”
  • Make it runnable: chmod +x do_js_compression.py
  • Make it global, so that we can execute it from every directory. So copy it to “/bin” directory:
    cp do_js_compression.py /bin
  • Now we are able to run this script for all applications. For this we have to move to application direcotry and run this script:
    cd /home/giorgi/app
    do_js_compression.py

    And we will get the file “app_min.js” that is combined and compressed file of all .js files. And we solved our performance problem by one step…