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.