Tuesday, August 28, 2012

Optimize performance of Applications developed in ExtJs 4 or Sencha 2: Web Storage & Sqlite

Storing Data on Client side:
We can enhance our web application response time by storing less modifiable data on our client machine. If we do this, we can minimize server hit for these data and thus can minimize the response time to a great extent.
For storing data on client side, now a day, mainly two type of storages are being used.
1)      Web Storage
2)      Some client side Relational Database like Sqlite
Web Storage:
Web storage is standardized by w3c. Web Storage can be viewed as improvement on cookies. It differs from cookies like:
·         Web Storage provides greater storage capacity ( 5 mb per domain in Mozilla, Chrome, Opera and 10 mb per storage area in IE) compared to 4 kb for cookies.
·         Unlike in case of cookies, which can be directly accessed and changed by server programming,  web storage cannot be directly altered by Server programming.
There are two main web storage types: localStorage and sessionStorage.
localStorage:
 The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. Here, data is stored like a key-value pair. E.g.
// Store value on the browser beyond the duration of the session
localStorage.setItem('key', 'value');

// Retrieve value (works even after closing and re-opening the browser)
alert(localStorage.getItem('key'));

Session Storage:

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.

// Store value on browser for duration of the session
sessionStorage.setItem('key', 'value');
 
// Retrieve value (gets deleted when browser is closed and re-opened)
alert(sessionStorage.getItem('key'));


SQLite:

SQLite is an embedded SQL database engine. A complete SQL database with multiple tables, indices, triggers, and views, is contained in a single disk file. SQLite is a compact library with library size of 350 kb when all features are enabled. SQLite can also be made to run in minimal stack space (4KiB) and very little heap (100KiB), making SQLite a popular database engine choice on memory constrained gadgets such as cellphones, PDAs, and MP3 players. Important features of Sqlite are as follows:

Important Features:

1)      Zero – Configuration: There is not any installation and configuration process for Sqlite to use it. It can be directly used.
2)      Server Less:  It is not implemented as a separate server process. With SQLite, the process that wants to access the database reads and writes directly from the database files on disk. There is no intermediary server process.
3)      Single Database file: An SQLite database is a single ordinary disk file that can be located anywhere in the directory hierarchy.
4)      Stable Cross-Platform Database File
5)      Compact
6)      Menifest Typing
7)      Variable length records
8)      Readable source code

Detail Ideas about SQLite can be found from http://www.sqlite.org.

Wednesday, August 22, 2012

Optimize performance of Applications developed in ExtJs 4 or Sencha 2: Code Minification


All of us know that just creating any application in very short time frame is not the real achievement. The real effort is invested after creation of application to make it more efficient, faster, and more responsive. Once, I have developed an application in ExtJs 4.1 in very short time frame and when we tested it in real time scenario, I found that my application was very slow and then I started considering about the ways by which I can make my application faster. I have done several changes like:

1)      Code Minification
2)      Applied Phone Gap
3)      Utilized browser local storage or SQL-lite database
4)      Masking
5)      Zip the response data
6)      Use of Dynamic Loading

Here currently we are going to discuss the technique of code minification. We will discuss the other remaining techniques in my next blog.

Code Minification:
It is the one of the easiest way to decrease the page loading time. This can reduce the code size upto 10 times i.e. if the total size of all of your custom javascript files is say 3 MB, it can reduce this size to 300 KB and thus similarly the page loading time will also be decreases. Code minification does not do any huge modification in your code. It just merge codes of all of your javascript files in a single file and removes the unwanted blank spaces, tabs and comment lines. It also reduces the variable name length.  Following are the steps of code minification by using Sencha tool.

Steps for Minification of javascript files of Sencha application.

1.       Download SenchaSDKTools-2.0.0-beta3-windows.exe

2.       Set path in window environment variable to “C:\Program Files (x86)\SenchaSDKTools-2.0.0-beta3”

3.       Restart your system if needed.

4.       Download Jsbuilder3 and unzip it

5.       Open command prompt and go to the root directory of web project i.e. WebContent in case of tomcat

6.       Now create .jsb3 file by using following command:

C:\abc\ MyWebProject\WebContent>sencha create jsb -a  C:\abc\ MyWebProject \WebContent \index.html -p MyWebProject.jsb3
       This .jsb3 file will be created at root directory i.e. WebContent

7.       Now create single .js file for all of your .js files in your project by using the previously created .jsb3 file with following command:

C:\abc\ MyWebProject \WebContent >sencha build -p MyWebProject.jsb3 -d C:\abc\ MyWebProject \WebContent
        This command will create two .js files. 1) all-classes.js 2) app-all.js

8.       Go to your index.html file and replace ext-debug.js with ext.js and app.js with app-all.js

9.       The newly created app-all.js is in unminified format and it can be further minified by using yuicompressor and for this, yuicompressor-version.jar is needed. To Further minify it, following command should be fired:

C:\xyz\Newfolder>java -jar yuicompressor-2.4.2.jar C:\xyz\Newfolder\app-all.js -o C:\xyz\Newfolder\ap.js
 
       Now copy the minified code from ap.js file and paste it in app-all.js of your application.

Important Note: During performing all of the above steps, you should be sure that your webserver is running and you are using your app.js file. Because, .jsb3 file is created by reading your app.js file and it is done only when your webserver is running.