YUI 3 supports two inheritance patterns via object prototype and “class”. Let’s examine the differences and advantages of each pattern.

Prototypal Inheritance in YUI 3

Suggested by Douglas Crockford, prototypal inheritance pattern is to deal with objects, i.e. objects inherit from objects. YUI 3 supports prototypal inheritance from its core; it means you can utilize the pattern by including the seed file only:

<script type="text/javascript" 
    src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

Now, for example, we have an object named animal:

var animal = {
    name: "Animal",
    level: "top",
    say: function() {
        return "I am an " + this.name + " at " + this.level + " level.";
    }
};
 
alert(animal.say()); // I am an Animal at top level.

And you want to create an elephant object that is an inheritance of animal. It’s so easy to do:

var elephant = Y.Object(animal);

Of course, you’ll need to modify the newly-born creature to make it a true elephant by overriding its parent properties and adding some new ones:

// override an animal’s property
elephant.level = "second";
 
// add elephant’s own properties
elephant.trunk = 1;
elephant.tusks = 2;

However if you want the elephant to say more about its own belongings, you’ll have to redefine say method completely.

elephant.say = function(){
    return "I am an " + this.name + " at " + this.level + " level."
        + " I have " + this.trunk + " trunk and " + this.tusks + " tusks.";
};
 
alert(elephant.say()); // I am an Animal at second level. I have 1 trunk and 2 tusks.

I think this pattern is quite easy to understand but before going forward to the next one, here are what we learn from it:

1. We can create a new object that inherits all the properties and methods from an existing object.
2. We can customize the new object by overwriting some/all of the members or adding new ones.

3. The dark part is an overwritten property has no way to reference its parent’s property.

   Note: In this pattern, the child’s properties do not really overwrite its parent’s ones but they just take higher precedence. So if we delete a child’s method, the parent’s one will be back magically. For example:

   delete elephant.say;
   alert(elephant.say()); // I am an Animal at second level.

“Class” Inheritance in YUI 3

Yes, I know there are no true classes in JavaScript, however we can make constructor functions act like classes for OOP (you can read more from the book Object-Oriented JavaScript by Stoyan Stefanov).

Note: From now on, for easier to understand the pattern, I’ll call all constructor functions (that are capitalized in examples) classes; don’t be confused.

First, we’ll mimic above example by creating  Animal and Elephant classes as follows:

// parent class
function Animal(){
    this.name = "Animal";	
}
// parent’s properties
Animal.prototype.getName = function(){
    return this.name;
};
Animal.prototype.setName = function(name){
    this.name = name;
};
 
// child class
function Elephant(){}

YUI 3 supports class inheritance via oop module and because this is used widely by almost all other modules, you’ll rarely have to include it explicitly. However, for testing, just call Y.extend() method within oop’s scope (that let Elephant inherit Animal as you can guess):

YUI().use('oop', function(Y){
    Y.extend(Elephant, Animal);
 
    // test code here
    // ...
}

Next we’ll do some tests:

// create an object of Elephant
var jumbo = new Elephant();
 
alert(typeof(jumbo.name)); // undefined
alert(typeof(jumbo.getName)); // function
 
// set name for the Elephant object			
jumbo.setName("Jumbo");
alert(jumbo.getName()); // Jumbo

You can see from the example, jumbo object which is an instance of Elephant class only inherit members of the prototype, not “private” members from parent’s class and it is considered a good practice to leave all instance-specific properties as private properties and to add all the public functionality to the prototype.

Interestingly we can add some new properties with default values to child class via arguments of Y.extend(), for example, to add trunk and tusks to Elephant class:

// create an object of Elephant “class”
var jumbo = new Elephant();
 
alert(typeof(jumbo.name)); // undefined
alert(typeof(jumbo.getName)); // function
 
// set name for the elephant				
jumbo.setName("Jumbo");
alert(jumbo.getName()); // Jumbo

Last but not least, class inheritance has very powerful feature: superclass access. To see how it works, we’ll add a method to Animal class to let it say something.

// parent class
function Animal(){}
 
// parent’s method
Animal.prototype.say = function(){
    return "I am an animal.";
};

Then, we’ll overwrite say method in Elephant class, yet still be able to keep what Animal can say about.

Y.extend(Elephant, Animal, {trunk: 1, tusks: 2});
 
Elephant.prototype.say = function(){
    	  return Elephant.superclass.say() + 
		" I have " + this.trunk + " trunk and " + this.tusks + " tusks.";
};
 
// test
jumbo = new Elephant();
alert(jumbo.say()); // I am an animal. I have 1 trunk and 2 tusks.

In summary, “class” inheritance pattern in YUI 3 is more powerful than prototypal counterpart though harder to get it full, here are some important points:

1. YUI 3 allows us to implement inheritance at (pseudo) class level in JavaScript.
2. Inherited classes cannot directly access to parent’s own members, children only inherit prototype members by default.

   Note: Well, it is possible to inherit parent’s own properties by initializing the parent constructor from the child (but it is not always a good OOP practice). See example:

   // parent class
   function Animal(){
       this.name = "Animal";	
   }
   // child class
   function Elephant() {
       // initialize the parent using the child as "this"
       Elephant.superclass.constructor.apply(this, arguments);
   }
    
   Y.extend(Elephant, Animal);
    
   // test
   jumbo = new Elephant();
   alert(jumbo.name); // Animal

3. You can gain access to the parent’s overridden methods via superclass.

Conclusion

Code reuse is considered as the most confusing part of JavaScript for it lacks robust OOP features that many modern programming languages provide by default. YUI 3 with the two inheritance patterns we’ve gone through is trying to fill the gap.

Prototypal inheritance is easier to understand but limit in object inheritance only. To get full OO support in YUI 3, it is advisable to study “class” inheritance pattern provided by the framework.

When a new JavaScript library arrives, a question is often raised reasonably: “Why does the world need another library?” while we’ve already had too many good ones like jQuery, Prototype, Mootools, YUI… you name it.

To find the right answer, just have a look at the package offered by Google under the name of Closure project. We’ll find there three sub-projects:

1. Closure Compiler: a JavaScript optimizer. This is not a “yet another JavaScript compressor”, it can do more: Besides compressing your codes it can analyze your code and remove “dead” parts, correct wrong syntax, check variable references/types, warn about common pitfalls. The really good news is it comes with a Firebug extension, called Closure Inspector, that allows us to debug compressed code by linking obfuscated lines to original ones.
2. Closure Library: a JavaScript library (as we expect) intended for use with  Closure Compiler. Basically it can do all the common tasks like other libs such as DOM manipulation, server communication, animation/effect and encloses a large set of reusable UI widgets and controls.
3. Closure Templates: is not just a client-side JavaScript template engine like Pure but can be used in server-side with Java.

Closure Library is a big library with more than 400 JavaScript files well organized into Java-like directory structure. We’ll find there something like packages, classes/sub-classes with Java-doc syntax description (in fact, you know, there are no true packages/classes in JavaScript.)

Google don’t boast the library in term of better speed or DOM manipulation techniques, the advantages of Closure lie in application deployment. Powered by Closure Compiler, application using Closure Library can be highly object-oriented in development while can be compact, fast and safe in production. An example is worth a thousand words, so let’s see official “Hello World” application in development and deployment.

1. JavaScript

+ Get and put the lib into a directory called closure-library-read-only

+ Create a JavaScript file (hello.js):

1
2
3
4
5

goog.require('goog.dom');
function sayHi() {
    var newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'}, 'Hello world!');
    goog.dom.appendChild(document.body, newHeader);
}

The most notable line is the first line that dynamically includes goog.dom for DOM manipulation (which is defined in dom/dom.js file). All other “packages” can be included in the same way.

2. HTML

Now, create a HTML to display the result (hello.html):

<html>
    <head>
        <script src="closure-library-read-only/closure/goog/base.js"></script>
        <script src="hello.js"></script>
    </head>
    <body onload="sayHi()">
    </body>
</html>

We’ll need to add base.js which is a bootstrap file to load other JavaScript files required and of course the hello.js file we’ve just created.

3. Deployment

The above example works as long as you don’t mind to deploy 400+ files and let the application load all necessary JavaScript files (12 files weighted 356KB as captured image from Firebug below).

However, thinking of an application with hundreds of JavaScript files required, usability would be a nightmare for this approach and that’s why Google provides a tool named Dependency Calculation Script to relief the pain. The tool, as its name implies, can calculate dependencies for application and create a single JavaScript file. Using the tool in conjunction with Closure Compiler to remove redundant code you will end up with perfect result: all-in-one, small, fast and safe JavaScript file.

Here is how to create the final script:

closure-library-read-only/closure/bin/calcdeps.py -i hello.js \
  -p closure-library-read-only -o compiled \
  -c compiler.jar \
  -f "--compilation_level=ADVANCED_OPTIMIZATIONS" \
  > hello-compiled.js

Note: Because the advanced optimization functionality of Closure Compiler is to include only code portions that are called in file, before running above compilation command you’ll need to modify script hello.js slightly to execute onload function as follows:

1
2
3
4
5
6
7
8
9

goog.require('goog.dom');
function sayHi() {
    var newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'}, 'Hello world!');
    goog.dom.appendChild(document.body, newHeader);
}
 
window.onload = function(){
    sayHi();
};

And don’t forget to remove onload call from HTML:

<html>
    <head>
        <script src="hello-compiled.js"></script>
    </head>
    <body>
    </body>
</html>

Now, look at the final result: a 3KB JavaScript file loaded in 64ms vs 356KB in 414ms respectively of un-optimized version that interprets to more than one hundred times better in size and seven times better in loading speed. (FYI, gzipping output, we’ll have less than 1KB file load only).

Conclusion

I neither see Closure Library as yet-another-JS-lib nor see Closure Compiler as yet-another-JS-compressor. They together provide a complete solution to create and deploy sophisticated web apps with confidence.

It would not be a surprise that Google developers are using similar tools internally to create great web apps like GMail, Wave so it makes sense that we can utilize Closure to build a web application with the same level of efficiency, completion and beauty.

• Download Example Code

Now it is time for Christmas and if you want to add some snows to a picture like the below example, a cool jQuery plugin — created by Jason Brown — can come to help.

• View Live Demo
• Download Plugin

Just include the plugin along with the latest version of jQuery (1.3.2 currently) and initiate it as the following code

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
	$('#snow_window').snowfall({
		flakeCount : 50,
		flakeColor : '#ffffff',
		flakeIndex: 999999,
		minSize : 1,
		maxSize : 4,
		minSpeed : 2,
		maxSpeed : 5
	});
</script>

where “snow_window” is the ID of target DIV in which snowflakes will fly. You can define number of snowflakes, their color, min/max sizes (just do not set too big sizes or they would look unnatural) and falling speed as parameters (flakeCount, flakeColor etc) in the initializing code.

Of course, you can set the snowfall effect to the whole web page with

$(document).snowfall();

Tip: It won’t work properly with fixed positioning and you must explicitly set the target DIV with “position: relative” or you’ll see snow falling on top corner of the page instead.

I hope you enjoy this Christmas and can surprise your friends with the snowfall effect.

corMVC stands for “client-only-required” Model-View-Controller and that means it does not depend on specific server-side technology. In case you want to demo something, it would be perfect if everything can be done on client side. Of course, you can save changes or load data from server (via Model) as the general illustration below.

corMVC Overview

Not like other JavaScript MVC solutions, corMVC is very simple and has very small footprint. It also does not require you to build the application using scaffolding or any other command-line utilities.

The whole framework is actually a 19KB JavaScript file (not minified yet) named Application.js, you’ll have to define models, views and controllers by yourself following the guidelines. It’s not hard especially for those who are familiar with modern MVC frameworks like Rails, Django or CakePHP.

Running application built on corMVC, you’ll have almost the same impression of running a server-side MVC application for the URIs (after the hash, however) are changed based on actions. The following diagram is about how the framework detects URL changes and handles events accordingly.

To get an overview of how the framework works and the interaction of model-view-controller we are going to examine the demo application called “Contacts” provided by Ben Nadel — the author of corMVC. The app, as its name tells, is a contact manager that has all basic functionalities like Search, View, Add and Delete contact info on a single web page.

MVC Contacts application

Let’s look at definition of a “contact” model in “contact.js” file.

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

// Add model to the application.
window.application.addModel((function( $, application ){
 
	// I am the contact class.
	function Contact( id, name, phone, email ){
		this.id = (id || 0);
		this.name = (name || "");
		this.phone = (phone || "");
		this.email = (email || "");
	};
 
	// I validate the contact instance.
	Contact.prototype.validate = function(){
		// For now, we are just goint to validate TRUE on the client and let
		// the full validation happen on the model peristence.
		return( [] );
	};
 
 
	// ----------------------------------------------------------------------- //
	// ----------------------------------------------------------------------- //
 
	// Return a new model class.
	return( Contact );
 
})( jQuery, window.application ));

The code define a contact class with a few properties like ID, Name, Phone# and E-mail address and return the class as a model that will be used by Controllers/Views.

The controller is more interesting and it’s not too difficult to understand though.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

// Add a controller to the application.
window.application.addController((function( $, application ){
 
	// I am the controller class.
	function Controller(){
		// Route URL events to the controller's event handlers.
		this.route( "/", this.index );
		this.route( "/contacts/", this.index );
		this.route( "/contacts/add/", this.addContact );
		this.route( "/contacts/edit/:id", this.editContact );
		this.route( "/contacts/delete/:id", this.deleteContact );
 
		// Set default properties.
		this.currentView = null;
		this.contactListView = null;
		this.contactFormView = null;
	};
 
	// Extend the core application controller (required).
	Controller.prototype = new application.Controller();
 
 
	// I initialize the controller. I get called once the application starts
	// running. At that point, the DOM is available and all the other model
	// and view classes will have been added to the system.
	Controller.prototype.init = function(){
		this.contactListView = application.getView( "ContactList" );
		this.contactFormView = application.getView( "ContactForm" );
	};
 
 
	// I am the add event for this controller.
	Controller.prototype.addContact = function( event ){
		// Show the form view.
		this.showView( this.contactFormView, event );
	};
 
 
	// I am the edit event for this controller.
	Controller.prototype.editContact = function( event, id ){
		// Show the form view.
		this.showView( this.contactFormView, event );
	};
 
 
	// I am the delete event for this controller.
	Controller.prototype.deleteContact = function( event, id ){
		// Delete the contact.
		application.getModel( "ContactService" ).deleteContact(
			id,
			function(){
				application.relocateTo( "contacts" );
			}
		);
	};
 
 
	// I am the default event for this controller.
	Controller.prototype.index = function( event ){
		// Show the list view.
		this.showView( this.contactListView, event );
	};
 
 
	// I show the given view; but first, I hide any existing view.
	Controller.prototype.showView = function( view, event ){
		// Check to see if there is a current view. If so, then hide it.
		if (this.currentView && this.currentView.hideView){
			this.currentView.hideView();
		}
 
		// Show the given view.
		view.showView( event.parameters );
 
		// Store the given view as the current view.
		this.currentView = view;
	};
 
 
	// ----------------------------------------------------------------------- //
	// ----------------------------------------------------------------------- //
 
	// Return a new contoller instance.
	return( new Controller() );
 
})( jQuery, window.application ));

Basically, the controller defines routes for events associated with handlers like addContact, editContact, deleteContact. In most of cases, the handlers are to show appropriated views or to send events to model for updates.

There are a number of views required by the app such as “Contact List“, “Contact Form” and a simple view for progress notification. Here are excerpt codes from “Contact List” view that mostly to interact with user and send events to controller if necessary.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

 
// Add view to the application.
window.application.addView((function( $, application ){
 
	// I am the contact list view class.
	function ContactList(){
		this.layout = null;
		this.searchForm = null;
		this.searchCriteria = null;
		this.addLink = null;
		this.contactList = null;
		this.contactTemplate = null;
	};
 
 
	// I initialize the view. I get called once the application starts
	// running. At that point, the DOM is available and all the other model
	// and view classes will have been added to the system.
	ContactList.prototype.init = function(){
		var self = this;
 
		// Initialize properties.
		this.layout = $( "#contact-list-layout" );
		this.searchForm = $( "#contact-list-header form" );
		this.searchCriteria = this.searchForm.find( "input" );
		this.addLink = $( "#contact-list-header a" );
		this.contactList = $( "#contact-list" );
		this.contactTemplate = $( "#contact-list-item-template" );
 
		// Bind the search form submit.
		this.searchForm.submit(
			function( event ){
				// Hand of to the search form handler.
				self.searchFormHandler();
 
				// Cancel the default event.
				return( false );
			}
		);
 
		// Bind the keypress event on the search criteria.
		this.searchCriteria.keyup(
			function( event ){
				// Filter the contact list.
				self.filterList( this.value );
			}
		);
 
		// Bind the keypress event to the search criteria so we can track 
		// the use of the special keys presses.
		this.searchCriteria.keypress(
			function( event ){
				// Store the SHIFT and ALT key status of the current click.
				self.searchCriteria.data( "shift", event.shiftKey );
				self.searchCriteria.data( "alt", event.altKey );
			}
		);
 
		// Bind the list-level clicking (to avoid setting to many 
		// event handlers).
		this.contactList.click(
			function( event ){
				var target = $( event.target );
 
				// Check to see if the target is the "more" link.
				if (target.is( "a.more" )){
 
					// Toggle the list item details.
					self.toggleDetails( target.parents( "li" ) );
 
					// Blur the current link.
					target.blur();
 
					// Prevent default event.
					return( false );
 
				// Check to see if the target is a the "delete" link.
				} else if (target.is( "a.delete" )){
 
					// Blur the current link.
					target.blur();
 
					// Confirm that the user wants to delete the contact.
					if (confirm( "Delete this contact?" )){
 
						// This is a *hack* that we have to do since jQuery click() 
						// event won't trigger the default action of the link.
						application.setLocation( target.attr( "href" ) );
 
					}
 
					// Return false to cancel default event.
					return( false );		
 
				}
			}
		);
	};
 
	....
 
	// Return a new view class.
	return( new ContactList() );
 
})( jQuery, window.application ));

Up till now, you may have had the overall knowledge of the framework and how to create a pure JavaScript MVC application. Yet, to get full understanding of corMVC, please see this great video presentation in which Ben Nadel explains why he came to the framework, how the JavaScript/jQuery were used, step-by-step application building etc. (this is a multiple-part video and a bit lengthy but I’m sure it’ll pay off.)

• Download Demo Application Code

FireQuery is an extension of Firebug created by BinaryAge to help developers to keep track with jQuery expressions, data and collections as expressed on tool website:

• Query expressions are intelligently presented in Firebug Console and DOM inspector
• attached jQuery data are first class citizens
• elements in jQuery collections are highlighted on hover
• jQuerify: enables you to inject jQuery into any web page

You can install the tool from official Mozilla add-on page (it requires Firebug 1.3+ already existed.) One note: You may have to find an older version (v0.3) to make it work with current official Firebug release (v1.4) as my experience on Windows.

In Action

After installing the add-on and restarting Firefox, just go to the test page to see how FireQuery tracks embedded jQuery data on FireBug’s “HTML” tab. The image below illustrates the data embedded in accordance with the jQuery codes to inject them to the page.

FireQuery shows embedded data by jQuery

Now, we’ll dig into cooler features. One of them is the ability to “jQuerify” any web page without jQuery support like Google.com for example. This can be done simply by clicking “jQuerify” button on FireBug’s “Console” tab.

jQuerify Google.com with FireQuery

Wow, now you can execute any jQuery codes in the Google home page. Normally, there is nothing happen when you click on Google logo but you just want it to say hello instead. Paste the following code snippet to Firebug command window and run it.

$('#logo').bind('click', function(){
    alert("Hello, I'm Google!");
    return false;
});

Running jQuery snippet on Google.com

Now, click on Google’s logo and you’ll see the alert dialog appears to say hello to you (no surprise) and the FireBug’s console also shows the jQuery command executed.

Google.com to say hello

Conclusion

FireQuery is a great tool for those who commit to jQuery as main JavaScript library or is going to write a jQuery plug-in. Also, It’s especially useful for developers, theme designers to see the jQuery’s data and effects in action without loading the library and writing codes in the templates.

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.

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.

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.

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.

Response to a post on Ajaxian, shypht commented:

Hate to say it, but image is everything. If I was trying to sell my manager on using jQuery, Prototype, Mootools or Dojo, and sent them to those sites, I think based on look alone jQuery would be at a disadvantage. “Write less, do more” is a great slogan, “Be a Javascript Rockstar”, not so much.

Strikes me as being an amateur, and more focused on flashy effects than functionality. I love jQuery, it’s helped me loads on my most recent project, but that header just makes me cringe a bit on the inside when I see it.

While Glen Lipka described his feeling in more colorful words on his blog post:

Truthfully, I feel alienated by it.  It doesn’t resonate with me.  It makes me feel old and lame.  My hair is not long and flowing. The rockstar isn’t me.  jQuery is me.  It’s different.

Obviously John Resig & team did listen to the community and decided to kill the “JavaScript RockStar” on JQuery site.

Apart from the new glossy UI, the best of JQuey site’s new design is to organize documentation for the library itself separately from hundreds of plugins and extentions. The new search functionality allows user to fine tune query to specific documents or keywords.

Well, however, please keep in mind that nobody want to be a JavaScript rocktar!