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

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

Recently, CodeGear announced the latest addition to their product line called Delphi for PHP. It is a great new tool that allows developers to easily create php applications with a drag-and-drop GUI interface. What many people do not know is that a few of the components are actually based on open source projects. I feel that this is a a good thing, because many of these projects have been in use for awhile, thoroughly bug tested, and full of many great features.

Here is a list of the open source projects:

1) Qooxdoo framework

Qooxdoo is the basis for many of the VCL controls. And not all of the properties of the qooxdoo controls that are used are available to the IDE Object Inspector. Learning the API can help you discover the other properties that you can set using JavaScript.

information about the API can be found here

2) VCL4PHP

This project is a class library of PHP components which replicate VCL for Win32. VCL for PHP is PHP framework to develop web applications, it’s OpenSource and it’s licensed using LGPL. It is the basis for the majority of the libraries within Delphi for PHP.

Features

• Fully OO applications
• Complete MVC model
• Properties, Methods and Events>
• I18N functionality
• Template Engines
• Ajax abstraction
• Database abstraction and data-aware components
• Input filtering using objects
• Webservices integration

Project available here

3) walterzorn vector graphics library

This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage. Usage of this Vector Graphics library should be easy even if you don’t have JavaScript experience. Another goal during development of this JavaScript Draw Shapes Vector Graphics Library was to achieve optimized performance and cleanly arranged pixel stair-step patterns (pixel-optimization).

This library is available for download here

a nice animation example here

4) xajax - ajax library

The xajax PHP object generates JavaScript wrapper functions for the PHP functions you want to be able to call asynchronously from your application. When called, these wrapper functions use JavaScript’s XMLHttpRequest object to asynchronously communicate with the xajax object on the server which calls the corresponding PHP functions. Upon completion, an xajax XML response is returned from the PHP functions, which xajax passes back to the application. The XML response contains instructions and data that are parsed by xajax’s JavaScript message pump and used to update the content of your application.

Features

• xajax’s unique XML response / javascript message-pump system does the work for you, automatically handling the data returned from your functions and updating your content or state according to the instructions you return from your PHP functions. Because xajax does the work, you don’t have to write javascript callback handler functions.
• xajax is object oriented to maintain tighter relationships between the code and data, and to keep the xajax code separate from other code. Because it is object oriented, you can add your own custom functionality to xajax by extending the xajaxResponse class and using the addScript() method.
• xajax works in Firefox, Mozilla, probably other Mozilla based browsers, Internet Explorer, and Safari.
• In addition to updating element values and innerHTML, xajax can be used to update styles, css classes, checkbox and radio button selection, or nearly any other element attribute.
• xajax supports passing single and multidimensional arrays and associative arrays from javascript to PHP as parameters to your xajax functions. Additionally, if you pass a javascript object into an xajax function, the PHP function will receive an associative array representing the properties of the object.
• xajax provides easy asynchronous Form processing. By using the xajax.getFormValues() javascript method, you can easily submit an array representing the values in a form as a parameter to a xajax asynchronous function:

  xajax_processForm(xajax.getFormValues(’formId’);

  . It even works with complex input names like “checkbox[][]” and “name[first]” to produce multidimensional and associative arrays, just as if you had submitted the form and used the PHP $_GET array

Non-open source software worth mentioning

Qstudio

CodeGear partnered with qadram software to jointly develop Delphi for PHP. qadram software, the development team behind VCL for PHP, had been working on a pre-beta project called Qstudio that became the foundation of Delphi for PHP.Development of Delphi for PHP is being done by CodeGear and qadram software at CodeGear headquarters in Scotts Valley, CA.

Interested in Delphi for PHP? a free, 14-day trial (as opposed to the 1-day trial when it was first released) can be found here

By Justin Silverton

I came across this great open source project that allows you to convert your php scripts to a fast/cgi executable that can be executed by any web server that supports it (including apache and IIS).

From the site:

“Roadsend Compiler is an open source, native compiler for the PHP language. It compiles PHP source code to stand alone, native binaries which do not require an interpreter. Roadsend Compiler can build online web applications with Fast/CGI, offline web applications with an embedded web server (MicroServer), desktop GUI applications with PHP-GTK, and console applications. It is known to build on Linux, Windows (using mingw), and FreeBSD.”

Benefits of using the roadsend compiler

• Faster execution time, because your php script is now a native binary and does not have to be interpreted each time it is accessed.
• Better than a solution such as zend encoder or ion cube because it does not require the server to have any extra extensions (besides fast/cgi support installed). It also provides a good obfuscation solution.
• The ability to create stand-alone web applications. These applications include a built-in webserver that allows the execution of php scripts as if they were a local application.

Issues to consider

• Because this is an executable, it needs to be re-compiled for any operating system that you would like to support (freebsd, linux, windows, etc.)

more information can be found at the main roadsend website here