Jaslabs: High performance Software

by Justin Silverton

For most web applications, there are a couple of different options available for storing data on the client (within the web browser).

Flash allows the storage of up to 100 KB/domain without any user security prompts. The data being stored is accessible across the user’s Flash Player instances, loading stored data into Internet Explorer, Firefox, or any other browser that supports it.

Cookies are another option. A cookie stores user data across multiple browsing sessions. They are limited to 4 KB of storage per domain and are a good way to store user data for convenience or tracking. Web browsers contain cookie and privacy management features to wipe away stored cookies and their stored data and therefore have limited utility for continued persistence. Cookies are sent along with every request on a given domain, adding onto every message exchanged between an end-user’s browser and your site, even if the cookie data is only occasionally used.

Firefox has the ability to store an unlimited amount of data using DOM storage (This may be limited in future versions greater than 2.X).

Here is an example of how use DOM storage:

<script type="text/javascript">

function removeItem(key) { //remove an item
storage.removeItem(key)
alert("Key:" +key +" was removed.");
}
</script>


Here are some other options that can be used with the globalStorage object:

• globalStorage[’developer.mozilla.org’] - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.
• globalStorage[’mozilla.org’] - All web pages with the mozilla.org domain can both read and write to this storage object.

by Justin Silverton

1) use a compressor

JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.

PHP version here

2) Minimize the number of .js files

Each .js file reference on a web page means another http request from a client’s browser. Although it may decrease the readability/maintainability of your code, it is faster to have one larger .js file than multiple smaller ones.

3) use profiler and timer tools

Firebug offers a suite of profiler and timing tools that allows you to see exactly how long your scripts take to execute and gives you the ability to tweak and optimize them.

4) asynchronize your code

Browsers run Javascript code synchronously. This means that when a <script> tag has been found, everything on the page stops until the end script tag has been found. If a script doesn’t finish executing within a certain amount of time, then the user gets a warning that says, “A script on this page is taking a long time to complete.”

example:

function testfunc()
{
var x1="test1";
var x2="test2";

testfunc(); //normal way to execute the function
window.setTimeout(testfunc,0); //asynchronous execution of testfunc()

The setTimeout function takes 2 parameters. The first is the name of the function that will be executed and the second is the number of milliseconds to wait until it is called. Since 0 is used for the second parameter, the function is called immediately (it will be forked in the background and the rest of your page will continue to load). This is useful for functions that take a long time to load.

5) cache DOM variables

Every binding in Javascript is late. This means each time you access a property, variable, or method a look-up is performed. Within the IE DOM, this could mean an extensive search of the element to find the same property over and over again, only to be returned to the JScript engine unchanged from the previous request.

Here is an example of a function that can be optimized:

function buildString()
{
var newElement = document.getElementById("myitem");
newElement.innerHTML = ""; // Clear out the previous
newElement.innerHTML += addHeader();
newElement.innerHTML += addBody();
}

function buildString()
{
var newText = addHeader() + addBody();
document.getElementById(”myitem”).innerHTML = newText;
}

By Justin Silverton

Many people don’t realize that there is a way to store up to 100K (1mb per domain) of data within Internet Explorer (supported by 5.5 and above).

These behaviors can be used to preserve information in the browser’s history, in favorites, in an XML store, or directly within a Web page saved to disk. When a user returns to a persisted page, the state of the page can be restored. By allowing information to safely reside on the client, fewer server transactions are required. Custom start pages and Web applications prosper because information can continue to exist without the paternal support of the server, or repeated server queries. A Web page can remain interactive to a degree, after the connection with the host has been severed, by persisting required information on the client.

Code Example

Below is an code example of how to use these behaviors. After typing some text into the box and clicking save, you will now be able to come back to this page and click load, and it will be loaded from the the IE internal persistence store.

<STYLE>
.storeuserData {behavior:url(#default#userData);}
</STYLE>
<SCRIPT>
function fnSaveInput(){
var oPersist=oPersistForm.oPersistInput;
oPersist.setAttribute("sPersist",oPersist.value);
oPersist.save("oXMLBranch");
}
function fnLoadInput(){
var oPersist=oPersistForm.oPersistInput;
oPersist.load("oXMLBranch");
oPersist.value=oPersist.getAttribute("sPersist");
}
</SCRIPT>
<FORM ID="oPersistForm">
<INPUT CLASS="storeuserData" TYPE="text" ID="oPersistInput">
<table>
<td><INPUT TYPE="button" VALUE="Load" onclick="fnLoadInput()"></td>
<td><INPUT TYPE="button" VALUE="Save" onclick="fnSaveInput()"></td>
</table>
</FORM>

By Justin Silverton

When creating and releasing a web application, testing is a very important step in the overall process. It can determine the success of an application and is many times a very time consuming process. There is an open source application called selenium that can help automate these steps and help reduce the risk of missing anything important while testing.

How it works

Selenium uses JavaScript and Iframes to embed a test automation engine in your browser. This technique should work with any JavaScript-enabled browser. Because different browsers handle JavaScript somewhat differently, we usually have to tweak the engine to support a wide range of browsers on Windows, Mac OS X and Linux. The beauty of this design is that it can also be used to test any web page or script (independent of the the back-end technology used to generate it).

Features

• Easy record and playback
• Intelligent field selection will use IDs, names, or XPath as needed
• Autocomplete for all common Selenium commands
• Walk through tests
• Debug and set breakpoints
• Save tests as HTML, Ruby scripts, or any other format
• Support for Selenium user-extensions.js file
• Option to automatically assert the title of every page

How to test your application

Testing comes in three flavors. The first is a simple GUI interface (either a firefox extension or through a back-end application for Internet Explorer) that allows the direct recording of any action in the browser. Below is a screenshot of this interface.

Test scripts can be created by the following steps:

1. Install the Firefox extension
2. Go to the website/page that you would like to start testing
3. Click the and go through all of the steps for the test
4. When you are finished, click the button from step 3 again to finish the test

You will notice some commands listed on the main screen. These are the commands that were recorded from above. These can also be added manually.

Another method for testing is using the selenium core. Selenium Core uses a unique mechanism which allows it to run on so many platforms. Written in pure JavaScript/DHTML, you copy Selenium Core tests directly into your your application webserver, allowing the tests to run in any supported browser on the client-side. It allows you to do the following:

• Browser compatibility testing. Test your application to see if it works correctly on different browsers and operating systems. The same script can run on any Selenium platform.
• System functional testing. Create regression tests to verify application functionality and user acceptance.

The third method for testing is through the Selenium Remote Control. Selenium Remote Control provides a Selenium Server, which can automatically start/stop/control any supported browser.

The Selenium Server communicates directly with the browser using AJAX (XmlHttpRequest). You can send commands directly to the Server using simple HTTP GET/POST requests; that means that you can use any programming language that can make HTTP requests to automate Selenium tests on the browser. Wrapper objects are also included for Java, .NET, Perl, Python, and Ruby.

Download

Selenium can be downloaded for free Here

By Justin Silverton

The following are the top 5 firefox extensions that every developer should be using.

5) Open source in tab

Opens the page’s source file in a new tab. Has a preference to either open source in a new tab or existing tab.

Download here

4) IE Tab

A great extension that allows you to run an instance of Internet Explorer in a firefox tab. This is great for testing a new site that may look different in each browser.

Features:

• Supports multiple languages
• Allows the switching of the rendering engines (IE and mozilla) with one click

Download here

3) Server Switcher

Server Switcher allows you to easily switch between sites on your development and live servers, so that you can immediately see the differences.

Features:

• You can create multiple development/live-server-pairs.
• Multiple keyboard shortcuts
• Support for ports other than 80
• supported by flock and firefox

Download here

2) Web Developer

The sheer number of options and developer tools that are available with this plugin make it a great option for a web 2.0 environment.

Features:

• Easily disable java, javascript, popup blocker, and referrers.
• View Advanced cookie information
• Advanced form debugging - (Show passwords,convert GET <=> POST,remove maximum length)
• Outline frames, headings, links, and tables
• Resize the current window
• Validate CSS,HTML,Links, and WAI

Download Here

1) Firebug

Any list involving firefox plugins and developers should have firebug near the top. This plugin is great for debugging javascript in realtime, which is a must for anyone developing a web application.

Features:

• Inspect and edit HTML live on any website.
• Measure all the offsets, margins, borders, padding, and sizes (great for CSS).
• Get a list of each individual javascript file that is being loaded and each load time.
• Pause javascript execution and set breakpoints.
• Advanced javascript, CSS, and XML error reports
• Edit DOM objects in real-time
• Javascript command-line for easy execution of code

Download Here