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);

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 😀

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…

JavaScript: Why to put semicolons after each expression

By JavaScript standard it is not obligatory to put semicolons after each expression when there is only one expression on a line. Parser automaticaly puts it after line. For example:

var a, b
a = 7
b = 8

will be parse it as:

var a, b;
a = 7;
b = 8;

But not putting semicolons is not considered a good coding style and therefore sounds question: “why to put semicolons if it is not obligatory?”. The answer is that there are some cases that not putting semicolon breaks code execution flow or even worse – there is compilation error. I do not speak when there are two or more expressions, I mean:

return
true

this will be parsed as:

return;
true;

and undefined will be returned instead of true. Compilation error occurs, when jumping or breaking a label:

break
label

These are too simple examples, but there is shown why to put semicolons after each expression.

JavaScript Closure Misunderstanding

Let’s list some well-known facts:

  • JavaScript blocks don’t have scope.
  • Only functions have scope.
  • Variable access speed depends on “distance” of scopes (in which scope is defined a variable and from which scope we want to retrieve it).
  • The furthest scope is global scope and it is considered as slowest scope (That is window object in browser implementation of JavaScript).
  • Closures are used to cache scope locally and make variable access faster (and for much more…).

Classical closure example is:

//without closure
window.singeltonObject = {/* properties of singleton object */};
getSingeltonObject = function(){
   return singeltonObject;
};
//with closure
getSingeltonObject = (function(){
    var singeltonObject = {/* properties of singleton object */};
    return function(){
          return singeltonObject;
    }
})();

Closure version looks difficult but it is very powerful (for example you can not modify your singelton object, it is closed in a local scope, while when you have defined it in global scope it is accessible from everywere). Les’t explain it:

//without closure
//global scope
window.singeltonObject = {};
getSingeltonObject = function(){
    //local scope
   return singeltonObject; //goes out of local scope in
                            //global scope, finds variable and
                            //reads it.
}
//with closure
//global scope
getSingeltonObject = (function(){
    //local scope1
    var singeltonObject = {};
    return function(){
          //local scope2
          //while definition of this function local scope1
          //is cached and singeltonObject will be found there,
          //it will not be searched in global scope
          //that's why it is faster and useful.
          return singeltonObject;
    }
})();

What happens when we have three or multiple deep closure? I mean, when we have such kind of code:

/**
*  @param {Number} personId
*  @return {Object}
*     Has method logPersonId that logs parameter
*/
getSingeltonObject = (function(){
    //scope0
    var singeltonObject;
    return function(personId){
          //scope1
          if(!singeltonObject){
               singeltonObject = {
                    logPersonId : function(){
                        console.log(personId);
                    }
               }
          }
          return singeltonObject;
    }
})();

At first glance everything is OK, but there is a bug:

getSingeltonObject(1).logPersonId(); // 1 will be logged
getSingeltonObject(123).logPersonId(); //still 1 will be
                              //logged instead of 123 :) why?

Because the function logPersonId is defined once, it caches the scope1 and at that time the parameter personId equals to 1. During the second call logPersonId is already defined and it has cached scope1 when personId was equal to 1 and it still “remembers” it. That is why in both calls value 1 was logged.

What is solution? scope0. We have to update personId in scope0 by creating a new variable in it (for example newPersonId) and assigning it personId everytime the getSingeltonObject is called. The code will look like this:

getSingeltonObject = (function(){
    //scope0
    var singeltonObject, newPersonId;
    return function(personId){
         //scope1
         newPersonId = personId;
          if(!singeltonObject){
               singeltonObject = {
                    logPersonId : function(){
                        console.log(newPersonId); //newPersonId
                    //will be found in scope0 and it will
                    //equal to parameter of getSingeltonObject
                    //function every time.
                    }
               }
          }
          return singeltonObject;
    }
})();

This was a little about JavaScript closure and its complexity.

JavaScript shorthands

Let’s talk about shortening JavaScript code. Browser has to parse JavaScript source code every time when it is used in a web page, because JavaScript is a scripting language and the browser gets raw source code as a text. So, code shortening gives the following benefits:

  • Less amount of bytes will be downloaded from the server, which means that the download time will be shorter.
  • Browser parsing phase will take less time
  • Code will be written/read faster and so on.

That’s why shortening code is good. Now let’s talk about how and when code can be shortened:

Explanation
Longer Version Shorter Version
1. Shortening the function Boolean. This function takes one parameter and returnes Boolean type value true if that parameter is truthy and returns false otherwise.
Boolean(value)
!!value
2. Shortening the function Number. This function takes one parameter, converts it to number value and returns it.
Number(value)
+value
3. This is very useful shorthand. Often we need to get one or another value and one of them has more priority than another(in this case foo has more priority). Often this shorthand is used with default values:

prop = value || defaultValue;
if(foo){
  return foo;
}else{
  return bar;
}
foo || bar
4. This is opposite case than previous: We want to take the second variable if first is defined (or truthy) and we want the first variable if it is not defined (or falsy).
if(foo){
  return bar;
}else{
  return foo;
}
foo && bar
5. This is very useful shorthand too known as “ternary operation”. Often we need to get one or another value or do one or another job depended on some logic.
if(condition){
  return val1;
}else{
  return val2;
}
(condition) ? val1 : val2;
6. When we want to give a value to some variable only once and use it in multiple times; for example to initialize a class just once (“singelton” pattern). The common case is when caching a DOM element. In shorthand is used evaluation of logical expressions.
if(!val){
  //calculate val just once
  val = calcVal();
}
//use val variable
(!val && (val = calcVal()) );
//use val variable

Problem when using JavaScript keyword in code

It is well known advice/rule in programming that you must not use keywords in your own code (considered cases when programming language gives ability to do it). But sometimes when programmer is overtired may forget this rule and builds a huge logic and writes a big amount of code using language keywords. And then flow of code execution goes wrong or illogically. What is effective solution of this kind of situations?

Let’s discuss it when coding in JavaScript. For example, if you have defined array of this kind of objects:

{
	title		             : 'Employees',
	root		             : 'employeesList',
	display 	             : 'always',
	constructor: {
			fn			: someFunction,
			config		: {
				rootVisible	: false,
				listeners: {
              		                    click: function(node) {
                                                alert('Not implemented yet!');
				            }
				 }
			},
			type		: 'tree',
			children	: 'subEmployees',
			getText		: function(node){
			    return node.text || 'EMPTY';
			}
	}
}

Object looks quite complicated, there is used JavaScript’s keyword constructor, I’ve array that contains objects of this kind and have build logic on this array. Once I needed to check if i-th object had property constructor and as usual I wrote:

    for(var i=0; i<array.length; i+=1){
        if(array[i].constuctor){
            alert('has property constuctor');
        }else{
            alert('doesn\'t have constructor');
        }
    }

 
The result always was: has property constuctor. Of course it would have!!! 😀 why? Because every JavaScript object has property constructor since every object is directly or indirectly inherited from Object function (or class in this case) and Object.prototype object contains property constructor that is reference to function which created that object. So, every JavaScript object has property constructor because JavaScript language defines Object.prototype.constructor as reference to function that created object. (new ThisWillBeReturnedByConstructorPropertyOfObject() ), more shortly “constructor” is keyword :).

When I realized it I was confused for a second but then I remembered about function hasOwnProperty that also have every object (because Object.prototype.hasOwnProperty is defined by language). This function gets one parameter -{String} property of an object. And returns Boolean true if object has not inherited property and has defined it itself. So I changed my code like this and everything was corrected:

    for(var i=0; i<array.length; i+=1){
        if(array[i].hasOwnProperty("constuctor")){
            alert('has property constuctor');
        }else{
            alert('doesn\'t have constructor');
        }
    }

I do not provoke writing a bad code. All I wanted to say is that, unfortunately, if you have written a bad code, that I described above, there is a way by which you can go around of problem by a little change. In the most cases programmers do not have enough time to spend on not scheduled tasks.