JavaScript code content assistance built in Eclipse WTP does very good job that I found even better than the same functionality in some commercial solutions, however, JQuery’s syntax is not supported (no surprise). That’s why jQueryWTP tool comes to help adding JQuery support to Eclipse WTP (and Eclipse PDT, MyEclipse which are based on WTP too.)

This is not an Eclipse plugin instead a tool to patch the existing plugin and inject JQuery’s syntax support into it. First download the tool from SourceForce; it’s a Java executable JAR so you can double-click to it or run it from command line:

java -jar jqueryWTP0.2forJQuery1.2.6.jar

Now browse to plugin file

org.eclipse.wst.javascript.ui_xxxxxxx.jar

and set output directory to generate the patch. Please backup the original file and set output directory different from source one.

Select “Generate” button to get the patched file then copy over original file. Start Eclipse and open a HTML or script file to see JQuery’s functions listed on code assistance like image below.

Find more info about JQueryWTP and donate for project here.

Comet is not really brand-new (Ajax) term today; however, with most of people how it works remains somewhat mysterious.

I have a little hand-on experience with Comet when creating a hobby game project with DWR Reverse Ajax sometime ago. It (DWR) was simple to start and really worked but required a Java web server (Tomcat, Jetty…) that I found rather expensive (in term of resources) for such small application. I want a small, dedicated and reliable server for Comet apps while don’t like to be deeply sunk in technical terms like “Bayeux” or “Continuation”.

After reviewing the Comet Maturity Guide from Comet Daily I decided to give Meteor Comet server a try for several reasons, especially because it’s built on Perl that can be easily deployed in any server with Perl installed (i.e. almost all Linux servers, no?) and it should be lightweight (up to my experience with Perl). Here is other info about Meteor server:

1. Server daemon will run on any platform for which Perl is available.
2. In live use typically 1,000 clients per node receiving 2 msgs (~400 bytes) per sec each. Tested up to 5,000 clients per node receiving 1 msg/sec each.
3. Nodes exist independently, supports broadcasting for message distribution. Cluster of three Meteor nodes runs FT Alphaville.
4. Transports are completely configurable within simple constraints.
5. Server supports client ‘catch-up’, allowing clients to regulate quality of service themselves.
6. Stable, in production use.
7. GPL v2. Free.

Install & Setup Meteor Server

You can find very good how-to guide for installing Meteor server from Meteorserver.org; actually it’s quite simple to follow. Just download, extract to default location (/usr/local/meteor) and configure daemon service as guided. One notice is on Fedora/Cent OS the start function in init scripts must be changed from:

sudo –u root ./meteord >/var/log/meteord 2>&1 &

to:

./meteord >/var/log/meteord 2>&1 &

After installed and run, the server will listen on 2 ports: 4670 and 4671 as default - the first port is “Subscriber port” and the second is “Controller port”. However, you typically want to serve your website on port 80 to avoid cross-site scripting restrictions, therefore, Meteor must also serve on the same port. Yes, the installation guide points out three possible ways to do that:

1. Set SubscriberPort to 80 and SubscriberIP to a specific IP, say X.X.X.1, in the Meteor config file. This will bind Meteor to a particular IP address on port 80 and leave Apache to bind to port 80 on a different IP. To make this work you will need to run Meteor as root, and configure Apache (or whatever web-server you’re using) to bind to port 80 on a different IP, say X.X.X.2.

2. Configure a firewall to redirect traffic on port 80 of one specific IP, to the Meteor Subscriber port (typically 4670). Then both Meteor and Apache can run in their default configurations, and Meteor can be run as a non-privileged user. So, if you’re using iptables you need the following commands:

1 2 3

iptables -t nat -I PREROUTING -p tcp --dport 80 --destination X.X.X.1 -j REDIRECT --to-port 4670 iptables -A INPUT -p tcp --dport 4670 -j ACCEPT /etc/init.d/iptables save

or if you’ve got a hardware firewall, set up an equivilent set of rules on that.

3. Run Meteor on a different physical server to the one running Apache. Then each server need only have one IP, and Apache can be run in its default configuration. Meteor must be set to use port 80 and be run as root.

Well, in brief, you’ll need either another dedicated (virtual) server or to obtain another IP. But if you don’t have another server and don’t want to buy extra IP just for testing, I can tell you the forth way to get Meteor server work in the same machine and the same IP. The answer is to configure “Reverse Proxy” to pass all requests from specific domain to Meteor. Fortunately, it’s very simple to do that with Apache’s mod proxy. Here are what I did.

1. Make sure Apache to load “mod proxy” by commenting out the following line in httpd.conf file.

1
2
3

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule proxy_http_module modules/mod_proxy_http.so

2. Add “reverse proxy” for the sub-domain (like data.yourdomain.com) that points to Meteor

1
2
3
4
5
6
7
8
9
10

NameVirtualHost *:80
# other virtual hosts
#...
<VirtualHost *:80>
    	ServerAdmin admin@localhost
    	ServerName data.yourdomain.com
 
 	    	ProxyPass  /  http://127.0.0.1:4670/
    	    	ProxyPassReverse  /  http://127.0.0.1:4670/
</VirtualHost>

Restart Apache and you’ll see the magic work!

The Chat Application

I often start with a Comet solution by building an online chat so that I can test how fast and reliable the solution is across different browsers. Also, it’s interesting to see messages coming in real-time manner.

Of course, there is no rocket science here; it looks simple like the demo below.

Web Chat on Meteor Comet Server

Essentially, you’ll have to include Meteor’s scripts from sub-domain, data.javascriptly.com in this demo. This script file comes from Meteor server we configured as above and enclose all functions to pull messages in (near) real time.

<script type="text/javascript" src="http://data.javascriptly.com/meteor.js" charset="utf-8"></script>

Then, setup Comet connection on page load:

1
2
3
4
5
6
7
8
9
10
11

// Set this to something unique to this client
Meteor.hostid = "1234567";
// Our Meteor server is on the data. subdomain
Meteor.host = "data." + location.hostname;
// Call the addMsg() function when data arrives
Meteor.registerEventCallback("process", addMsg);
// Join the chat channel and get last 10 events, then stream
Meteor.joinChannel("chat", 10);
Meteor.mode = 'stream';
// Start streaming!
Meteor.connect();

Every time a message arrives, the addMsg() function will be executed to add it to chat console, simple enough!

Now, when you click “Send” button the message you’ve typed in will be sent to Apache/PHP server (not the Meteor server) using an Ajax POST.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function sendMsg(){
	var msg = $('#message').val();
	if(msg.length == 0) 
		return;
 
	var user = $('#user').val();
	if(user.length == 0) user = "Guest";
 
	$.post('chat.php', {
		user: toCharRef(user), 
		message: toCharRef(msg)
	});
 
	$('#message').val("");
	$('#message').focus();
}

On receipt Apache/PHP will parse the message and write it to Meteor’s Controller which is listening on port 4671 like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

...
$ch = "chat";
$op = false;
// Open a controller channel to Meteor server
echo "Connecting to Meteor\n";
if (!($op = fsockopen("127.0.0.1", 4671, $errno, $errstr, 5))) {
	echo "Meteor not responding\n";
}
else{
	socket_set_blocking($op,false);
	echo "Connected\n";
	$haswritten = false;
	$buf = "";
	$out = "ADDMESSAGE ".$ch." <strong>".$user." ".$time."</strong> ".$message."\n";
	...
}

Meteor server, then, delivers added message to all clients subscribing to “chat” channel. That’s all.

The app works seamlessly on IE6/7/8, Firefox 3, Safari 3.1 while on Opera 9.2 and Google Chrome Meteor uses “simple forever IFRAME” technique for streaming which makes hourglass pointer display all the time. Hope Andrew Betts and team will find some workaround to avoid this issue in next version?

Chat message supports Unicode (the feature many developers ignore) so you can chat in any language you like: German, French, Chinese, Japanese and English of course. Please feel free to leave your comments/questions here.

• View solution online
• Download source code

Here are some quick and useful JQuery plugins from Jason Frame’s “JQuery Grab Bag“.

Auto-Grow TextArea

The technique is borrowed from Facebook that uses an off-screen <div> to calculate the required dimensions of the textarea to reveal all texts inside instead of to display vertical scrollbar. Run the following code line to enable auto-grow behavior to all textareas on page.

$('textarea').autogrow();

Online Demo

Input Hint

It’s not always necessary to attach label to every text field in web form, instead you can use hint to tell user what to type in the fields. This plugin will help keeping away from tedious codes to add hints to input boxes.

First, add hint attribute to input fields.

<input type="text" hint="Your first name" name="firstname" />
 
<input type="text" hint="Your last name" name="lastname" />

Then, simply get the functionality work on the fields.

$('*[@hint]').inputHint();

Online Demo

Text Resizing from Cookie

This is not a JQuery’s plugin but still depends on JQuery to allow user to select appropriate text size on reading. Of course, some modern browsers feature zoom functionality but not equally good. So, users still want to resize text on fly.

We’ll need to define some styles with different font sizes for body tag.

body.small { font-size: 10px; }
body.medium { font-size: 12px; }
body.large { font-size: 14px; }

And some links for size selection accordantly.

<div id='sizer'>
      <a href='#' class='small'>small</a>
      <a href='#' class='medium'>medium</a>
      <a href='#' class='large'>large</a>
</div>

Then call cookieResize() function on load. Done.

cookieResize('#sizer a', 'medium');

Online Demo

Download example codes

There are many examples on creating tabbed navigation with (or without) help of JavaScript frameworks like Prototype, MooTools or JQuery. However, I find that it’s much easier to create draggable tabbed navigation using Chain.js and its great extension: Interaction.js.

Riziq, creator of Chain.js & Interaction.js, already showed an example on how to utilize the libs to build tab interface in a few JS code lines. However, for its own purpose, the example is not SEO-friendly — disabling JavaScript in your browser will result in empty content and search engines will see nothing on your page consequently. Now say, you want to create a tabbed navigation for your blog to show/hide “Latest Posts”, “Latest Comments” etc. and you want the links can be seen no matter if JavaScript is enabled or not in reader’s browser — something looks like this:

Blog's tabbed navigation

Step 1: HTML & CSS

Just create a template in HTML and full links to latest posts, comments and most popular articles:

<div id="wrapper">
	<ul id="tabs">
		<li class="tab"><a href="#" class="title">Tab</a></li>
	</ul>
 
	<div class="content" id="latest_posts">
		<h2>Latest Posts</h2>
		<p>…</p>
	</div>
 
	<div class="content" id="latest_comments">
		<h2>Latest Comments</h2>
		<p>…</p>
	</div>
 
	<div class="content" id="most_pop">
		<h2>Most Popular</h2>
		<p>…</p>
	<div>
</div>

And here is the style sheet to get tabbed look:

#wrapper * {
    margin: 0;
    padding: 0;
}
 
#wrapper {
    background: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    padding-bottom: 1px;
    padding: 15px;
    width: 400px;
}
 
#wrapper ul {
    float: left;
    list-style: none;
}
 
#wrapper li {
    display: block;
    float: left;
    margin: 0 6px 0 0;
}
 
#wrapper li a{
	display: block;
    float: left;
    padding: 9px 15px;
    text-decoration: none;
}
 
#wrapper div {
    background: #fff;
    clear: left;
    height: 200px;
}
 
#wrapper .content{
	padding: 10px 15px;
}
 
#wrapper .content p{
    line-height: 1.6em;
    padding-top: 0.5em;
}
 
#wrapper .content a{
	color: #666;
}
 
.tab a {
    background: url("off_tab.png") top left repeat-x;
    color: #f2f2f2;
}
 
.tab.selected a{
    background: url("active_tab.png") top left repeat-x;
    color: #000;
}

At this point, the page looks fairly good and search engines (Yahoo, Google…) will be surely happy with it.

Step 2 - Creating Tabs and Link Them to Contents

It’s very simple to create tabs with Chain.js. The following scripts will do the job (for those who are not familiar with Chain.js, please read my articles here and here).

1
2
3
4
5
6
7
8

$('#tabs')
	.items([
		{id: 'latest_posts', title:'Latest Posts'},
		{id: 'latest_comments', title:'Latest Comments'},
		{id: 'most_pop', title:'Most Popular'}
	])
	.selectable({required:true}) /* force the first tab selected */
	.chain();

Now, we need to link tabs with related contents in div tags specified by id field. On tab clicked, all other contents should be hidden but linked one; this function is to accomplish that.

1
2
3
4
5
6

function showContent(id){
	$('.content').each(function(i, el){
		$(el).hide(); // hide all tabs
	});
	$('#' + id).show(); // show selected tab
}

By customizing default chain() method, we can inject onclick event to each tab.

8
9
10
11
12
13

.chain(function(){
	var self = this;
	this.click(function(){
		showContent(self.item().id);
	});
}

All codes are as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$(document).ready(function(){
	$('#tabs')
		.items([
			{id: 'latest_posts', title:'Latest Posts'},
			{id: 'latest_comments', title:'Latest Comments'},
			{id: 'most_pop', title:'Most Popular'}
		])
		.selectable({required:true}) /* force the first tab selected */
		.chain(function(){
			var self = this;
			this.click(	function(){
				showContent(self.item().id);
			});
		});
 
	showContent('latest_posts');
});
 
function showContent(id){
	$('.content').each(function(i, el){
		$(el).hide(); // hide all tabs
	});
	$('#' + id).show(); // show selected tab
}

Step 3 - Enable Drag-n-Drop

Of course, in practice, there is almost no need to make tabs draggable for a blog’s tabbed navigation. But if required, it can be fulfilled by just adding 2 more functions, draggable() and  sortable(), before the chain() method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$('#tabs')
	.items([
		{id: 'latest_posts', title:'Latest Posts'},
		{id: 'latest_comments', title:'Latest Comments'},
		{id: 'most_pop', title:'Most Popular'}
	])
	.selectable({required:true}) /* force the first tab selected */
	.draggable({axis:'x'})  /* enable drag-n-drop */
	.sortable({align:'horizontal'})
	.chain(function(){
		var self = this;
		this.click(	function(){
			showContent(self.item().id);
		});
	});

So now we have a tabbed navigation with advanced functionality implemented in a few code lines which are completely separated from HTML. And like other examples here, you can see demo and download source codes from links below:

• View Online Demo
• Download example codes

Using DOM API versus innerHTML to create/change content on webpage has been in discussion for years. The pain (slow DOM manipulation speed) left by Internet Explorer causes a big concern over DOM API for serious use in practice because the browser is still holding big slice of market share today (about 80%).

We can guess that the browser war (re)started by Firefox and stirred up by Google Chrome lately will result in better IE versions, yet that bright day won’t come any time soon.

Recently, I had reviews on PURE and Chain.js as client-side template engines. Though both libraries take pure, unobtrusive JavaScript approach for implementation, PURE seems more eager about speed when using innerHTML to create elements while Chain.js depends on DOM API for more flexible and direct manipulation.

I cannot say what approach is better. PURE may have some advantage on page with huge number of DOM elements to be created/changed but I think most of projects will be happy with Chain.js for its power. It grows a question: any chance that we can achieve both flexibility and speed in these libs? Probably, LightningDOM donated by Peter Rust will be a right answer.

In the post, Peter places LightningDOM as “a layer between the raw HTML and your templating/data-mapping code, without the slowness of the DOM.” So how it works? Just see the example.

1
2
3
4

var strMarkup = document.getElementById('destination').innerHTML;
var dom = new LightningDOM(strMarkup);
dom.firstChild().innerText("I Love speed!");
document.getElementById('destination').innerHTML = dom.outerHTML();

Not too difficult to understand, right? You give all HTML markups to LightningDOM, do anything you want with familiar getters/setters like you can do with DOM API then assign the result back to real DOM’s innerHTML.

Peter tells more about internal implementation to get both speed and lightness in the library.

The LightningDOM parses the given HTML using Regexes. I have two different parse algorithms (but both using the same regex). IE is much faster at parsing the whole markup by doing a single regex replace to convert the markup into JSON and then to eval the JSON. FF (and I’m guessing Chrome & Opera) is much faster at looping through the markup with a global regex.

All the tags are parsed into a two-dimensional array (well, technically an array of arrays), which represents all the information in the tags. Here’s a pretty look at the internal data structure representing a chunk of HMTL (note that we use a simpler object model inspired by ElementTree to representing the inner-text as a “tail” of the previous tag, rather than a nested “Text Node”).

Array of Arrays (_aMarkup):

Of course, the decision to utilize LightningDOM for PURE or Chain.js depends on leaders of projects but it does not prevent you from taking advantage of the lib if you see true value from it. Personally, I think it’s a good solution though I’ll have more tests/benchmarks to evaluate its stability across browsers.

In previous post, I had a chance to introduce Chain.js with 3 examples and found a few issues due to both bugs in version 0.1 and my unawareness of implemented features. Now version 0.2 of Chain.js has just come out, I’d like to revise the examples to show better implementation we can do with the library in practice.

Basically, we don’t need to call chain() function every time we add or replace items instead just execute it once on DOM ready event, and we can utilize anchor property to define where items to be rendered within table tag.

Example 1: All codes to get it works are here.

1
2
3
4
5
6
7
8
9
10
11
12
13

function render(){
	$.getJSON('json.php', 'lang=' + $('#langList').val(), function(books){
		$('#table_book').items('replace', books);
	});
}
 
$(document).ready(function(){
	$('#table_book').chain({
		anchor: 'tbody' /* defines, where items will be rendered*/
	});
	$('#langList').change(render); 	// handle change event of drop-down list
	setTimeout(render, 100); 		// call render function on load
});

Example 2: Almost the same codes as example 1 plus add, remove and sort functions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function render(){
	$.getJSON('json.php', 'lang=' + $('#langList').val(), function(books){
		$('#table_book').items('replace', books);
	});
}
 
function addData(){
	var data = {title: $('#input_title').val(),
		publisher: $('#input_publisher').val(),
		price: $('#input_price').val()};
 
	$('#table_book').items('add', data);
}
 
function sortBy(col){
	$('#table_book').items('sort', col, {toggle:true});
}
 
$(document).ready(function(){
	$('#table_book').chain({
		anchor: 'tbody', /* defines, where items will be rendered*/
		bind: function(){ /* bind event */
			this.dblclick(function(){
				$(this).item('remove');
			});
		}
	});
 
	$('#langList').change(render); 	// handle change event of drop-down list
	setTimeout(render, 100); 		// call render function on load
});

Example 3: Custom data binding looks much easier now.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function render(){
	$.getJSON('json.php', 'lang=' + $('#langList').val(), function(books){
		$('#table_book').items('replace', books);
	});
}
 
$(document).ready(function(){
	/* Custom data binding */
	$('#table_book').chain({
		anchor : 'tbody', /* defines, where items will be rendered*/
		'.price' : {
			style: 'text-align: right',
			content: '${price.toFixed(2)}'
		},
		'.order .order-link': {
			style: 'color: red;',
			href: '{orderLink}',
			target: '_blank',
			content: 'Order Now!'
		}
	});
 
	$('#langList').change(render); 	// handle change event of drop-down list
	setTimeout(render, 100); 		// call render function on load
});

Thanks Rizqi Ahmad for kind support to complete these examples.

Download updated example codes

Probably the biggest change in Zend Framework (ZF) 1.6 is about Ajax support with integration of famous Dojo JavaScript toolkit. ZF 1.6 comes with several new helpers, elements and components that help to display/interact with Dojo widgets as announced on Zend’s official site.

• A dojo() placeholder view helper to facilitate Dojo integration in your views, including setting up the required script and style tags, dojo.require statements, and more. In essence, this supports and enhances Dojo’s modularity at the application level.
• Zend_View helpers and Zend_Form elements and decorators that utilize Dijit, Dojo’s layout and widget platform. This simplifies creation of Zend_Form elements that can be rendered as Dijits. For instance, highly interactive widgets such as calendar choosers, time selectors, and combo-boxes are provided.
• Zend_Dojo_Data, a component for creating dojo.data-compatible response payloads. dojo.data defines a standard storage interface; services providing data in this format can then be consumed by a variety of Dojo facilities to provide highly flexible and dynamic content for your user interfaces.
• A JSON-RPC server component: Zend_Json_Server. JSON-RPC is a lightweight remote procedure call protocol, utilizing JSON for its serialization format; it is useful for sites that require a high volume of interaction between the user interface and server-side data stores, as it allows exposing your server-side APIs in a format directly accessible via your client. Dojo has native JSON-RPC capabilities, and Zend Framework provides a JSON-RPC implementation that is both compatible with Dojo and the published specifications.

In order to help developer track JavaScript bugs, ZF 1.6 also provides native support for FirePHP, a Firebug extension for PHP-Ajax development. Using ZF 1.6 now you can log to Firebug Console via FirePHP instantly, no need to download the FirePHPCore library.

Two primary components are available — Zend_Log_Writer_Firebug and Zend_Db_Profiler_Firebug - providing functionality to log (any info you want) and profile database queries to Firebug console. Read more how to utilize FirePHP in ZF 1.6 here.

The negative side of having a new (and promisingly become popular) browser, no matter how good it can be, is you’ll have to test your web apps with it among many others.

Probably, the first step is to detect the browser from JavaScript code by parsing browser’s user agent, and here is what of Google Chrome.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US)
AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

I guess old JavaScript codes can mistakenly tell it Safari like when running the code snippet below using JQuery’s browser utility.

1
2
3
4

$.each($.browser, function(i, val) {
	 $("<div>" + i + " : <span>" + val + "</span></div>")
		.appendTo(document.body);
});

It may be no problem until you find something wrong when your apps running on Chrome only. So, here is the code line to detect Chrome generally:

1

var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );

We’ll have to change the JQuery browser utility to support Chrome detection as follows:

1
2
3
4
5
6
7
8
9
10
11

var userAgent = navigator.userAgent.toLowerCase();
 
// Figure out what browser is being used
jQuery.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
	chrome: /chrome/.test( userAgent ),
	safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

Now, correct result shows on test screen:

Just one notice: Current version of JQuery (1.2.6) is treating Chrome as if it was Safari and basically no serious problem has been found yet. Modifying browser detection can cause the lib render pages/elements incorrectly for it has no knowledge of Chrome’s rendering engine. To keep compatibility, you can change line 7 back to:

7

	safari: /webkit/.test( userAgent ),

But in this case the browser will be detected as both Chrome and Safari — not nice solution, I accept.

Anyway, it’s very likely that JQuery and other JavaScript frameworks will include Chrome to browser list for detection in next versions.

In modern web development, some JavaScript frameworks have made their names like Prototype, Mootools, YUI, JQuery. But if you find them not wholly suitable to your next project there are some other good frameworks out there.

Jacob Gube has given out a nice introduction of “10 alternative and capable JavaScript frameworks/libraries to explore” going over the good of them. Here they are:

1. SproutCore
2. Spry
3. JavaScriptMVC
4. qooxdoo
5. midori
6. Archetype JavaScript Framework
7. June Framework
8. UIZE
9. SimpleJS
10. Fleegix.js

Some of them provide comprehensive solutions that allow you to build a (complicated) desktop-like application with ready-made components (SproutCore, Spry, qooxdoo, UIZE), other focus on DOM selector and effects with minimal weight and, specifically, framework JavaScriptMVC presents the Model-View-Controller (MVC) architectural pattern to JavaScript.

Find your own JavaScript framework (archetypejs.org)

Of course, no framework is perfect and it costs some time to get acquaintance with new one. However, you may find one is better than others for specific requirements so it’s good to have alternatives.

I’ll have more reviews on each framework with hand-on experiences and examples from time to time (hopefully).

How well JavaScript works is what I highly concern about Google Chrome — the browser on headlines of all tech news today.

The JavaScript engine embedded in Chrome, named V8, is developed by Google which implements ECMAScript 3 and can run standalone as stated on project website.

• V8 is Google’s open source JavaScript engine.
• V8 is written in C++ and is used in Google Chrome, the open source browser from Google.
• V8 implements ECMAScript as specified in ECMA-262, 3rd edition, and runs on Windows XP and Vista, Mac OS X 10.5 (Leopard), and Linux systems that use IA-32 or ARM processors.
• V8 can run standalone, or can be embedded into any C++ application.

Of course, we’ll have to mention the tests given out by Google itself that show JavaScript speed in Chrome  many times faster than in all other major browsers: IE, Firefox and Safari.

Google Chrome Benchmarks

Anyway, they are tests guided by Google and I suspect that they seem be optimized toward the best of V8. So, the better way to see how good V8 perform in action is to run tests with popular JavaScript libraries like JQuery, Prototype, Dojo, Mootools, YUI which are being used in most of web applications in real world.

In a typical web application, JavaScript is mainly used for DOM selection/ manipulation rather than for heavy calculation. That’s why all libraries try to optimize DOM selection speed for (said) faster application.

To have practical view, I decided to run Mootools’ SlickSpeed tests on Google Chrome 0.2 in comparison with Firefox 3.0.1, Safari 3.1 (Windows), IE6, Opera 9.5 and especially on the nightly build of Firefox 3.1b1pre with Tracemonkey — Mozilla’s recent effort to integrate Tamarin tracing into the existing SpiderMonkey JavaScript engine — enabled and disabled. Here are the results:

Chart: Mootools SlickSpeed Test Results

SlickSpeed Benchmarks in details

(All tests were run 10 times for each browser on Windows XP SP3, AMD x64 4400+ with 2GB RAM machine)

It turns out that Google Chrome reached 6th place ahead the poor IE6 only, 49% slower than the fastest browser: Opera 9.5. Firefox 3.1 has not proved faster than the previous version in the tests, even enabling JIT engine made the results worse. (I acknowledge that it’s just pre-release beta version and Tracemonkey is not designed for optimizing DOM manipulation).

Some other conclusions we can get out from the above results (ruling out IE6 which falls far behind others in all tests) are:

• MooTools, Prototype and Dojo get the worst performance in Chrome and surprisingly JQuery enjoys the second best result.
• JQuery’s selector performs best while YUI 2.5 provides the worst results across browsers (295% slower than JQuery) and Prototype is just slightly better than the worst (269% slower).
• JQuery’s performance is quite browser-neutral while Dojo’s defers a lot from browser to browser, yet both are well optimized for speed.
• Dojo’s selector does not play well in Firefox 3.1 currently causing several errors in tests.

Though DOM selector test does not tell everything about how fast a JavaScript engine is in real-world browsers, it brings out another aspect you may want to consider over what Google is advertising about V8 and Chrome.

I recognize that Google Chrome is really good at rendering web pages (which contributes a lot to overall performance of an application) but I’ll stick with Firefox in most of cases for I cannot find a dozen of plugins/extensions I love in Chrome yet.