Performance test on JavaScript frameworks

1.Motivation

The main objective of this deliverable was to conduct different performance tests on the various JavaScript frameworks to decide on the framework to be used to build the GUI of the web-based IDE. To build the most effective GUI we need to pick up the framework with the best features. Some of the best features are it should be fast, compact with concise library, easy for building dynamic web applications, user needs to write less code, easy to use, uses less memory and compatible with all browsers. Some of the most famous JavaScript frameworks include
jQuery - This is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
MooTools - This is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
Prototype - This is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is turning into the code-base of choice for web application developers everywhere.
Dojo Toolkit - This is an Open Source DHTML toolkit written in JavaScript. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development.
script.aculo.us - This provides user with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications on fly.
YUI Library - This is the most robust framework which is proven, consistent, reliable which also contains the testing framework. Even with the heavy libraries, it only provides a very few utility or helper functions.
To get to know how to develop using different frameworks JavaScript frameworks the deliverable scope is extended to create a simple web pages in the selected four frameworks namely, jQuery, YUI, DOJO and Prototype.

2.Goal

The goal of conducting the performance test on the four frameworks mentioned above is to get a flavor of using them. This was achieved by building simple web pages which have functionalities like animations, drags and drops. So I built the same HTML page in all the four frameworks and conducted the speed test, weight test and memory test.

3.Implementation

The HTML page that was built to conduct the speed test and the weight test was an animated post card and to conduct the memory test is a HTML page with simple demonstration of drag and drop. The libraries needed to develop the above pages include the JavaScript files of jQuery, YUI library, Prototype and zip file of DOJO tool kit. To conduct the performance tests YSlow plug-in is needed and also Slickspeed tool.

According to the speed and weight test results of the frameworks jQuery proves to be the best one and YUI and prototype are the ones with poor performance.

Slickspeed tool conducts another performance test where every framework runs in its own iFrame, to avoid conflicts. Tests are run selector by selector, with an interval to prevent the browser from freezing. Tests are run in a neutral environment, with no inclusion of any library or framework.

All the users can add the books to their carts by clicking on the link Add to cart and also view the book in the carts by clicking the link Go to cart. The user can then finally logout from the website by clicking on the link logout.

Even in this test Prototype and YUI are the ones with poor performance and jQuery and DOJO are the ones with the best performance. Memory test was conducted on the pages with simple drag and drops with the help of the Windows Task Manager. The memory usage of Firefox is noted down by opening each page in several tabs. Even in this test jQuery was successful enough to be the best framework. When it comes to Compatibility issues with different browsers DOJO is not supported in the IE 8, and also has a poor performance in Safari and Opera.

4.Remarks

The results that were obtained after conducting various performance tests made me decide to choose jQuery as my JavaScript framework for the IDE. Moreover it is the mostly widely used framework, has powerful and short code and is highly compatible with all the browsers. This deliverable also helped me get a taste of all the famous frameworks and also in choosing the right framework for the project.

5.Code