JavaScriptly

Prototype vs Class Inheritance in YUI 3

Jimmy Vu — Thu, 07 Jan 2010 11:27:02 +0000

As I mentioned in the post YUI 3.0 – Changes From the Root, YUI 3 is a radical evolvement of the framework. One of the most interesting features it provides with is about much better support for OOP.

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:

We can create a new object that inherits all the properties and methods from an existing object.
We can customize the new object by overwriting some/all of the members or adding new ones.
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:

YUI 3 allows us to implement inheritance at (pseudo) class level in JavaScript.

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

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.

Why Do We Need Google Closure?

Jimmy Vu — Tue, 05 Jan 2010 03:52:26 +0000

Why Google Closure?

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:

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.
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.
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):

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):

>
    >
         src="closure-library-read-only/closure/goog/base.js">>
         src="hello.js">>
    >
     onload="sayHi()">
    >
>

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:

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:

>
    >
         src="hello-compiled.js">>
    >
    >
    >
>

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

Best IE6 “PNG Alpha-Transparency” Fixes

Jimmy Vu — Mon, 28 Dec 2009 06:43:19 +0000

You are likely living in civilized society with Firefox, Safari, Chrome or Internet Explorer 7/8 installed in your computers. Yet, some are still in the dark with the older Microsoft browsers named Internet Explorer 6 (IE6) or, worse, older versions. One of the most painful facts about IE6 is that it does not natively support PNG alpha-channel transparency.

Microsoft probably thought that GIF transparency — where each pixel is either fully transparent or a solid color, not anything between — should be enough for the world. But it’s not! Just compare three “JavaScriptly” logos in transparent GIF, transparent PNG and semi-transparent PNG images on a web page, you’ll recognize the differences.

View Non-Fixed PNG Demo

Transparent PNG vs Transparent GIF

(1) The font edge of GIF logo has side-effect which can be only fixed by choosing “color matte” exactly like background color when exporting the image (but we can do nothing optimal if the background has multi-colors like a picture.)

(2) Only PNG can be semi-transparent like the last logo, GIF is out of luck.

Is IE6 dead yet?

So, transparent PNG is obviously a better choice except for the mentioned problem: IE6, which is still being used by at least one tenth of net citizens at the time I’m writing this blog post, does not like it. Well, if you care about that 10% (poor) audiences, here are some of the best hacks to fix the issue.

TwinHelix

TwinHelix’s fix is one of the most popular used solutions for IE6 PNG alpha-transparency issue. This uses CSS “behaviors” to execute fixing scripts which basically apply Microsoft’s proprietary filter called the AlphaImageLoader to the PNG images on the web page.

Installation

Download the fix here.
Extract, copy and paste iepngfix.htc and blank.gif into your website directory.

Add the following CSS:

JavaScriptly

Prototype vs Class Inheritance in YUI 3

Prototypal Inheritance in YUI 3

“Class” Inheritance in YUI 3

Conclusion

Related Posts:

Why Do We Need Google Closure?

Why Google Closure?

1. JavaScript

2. HTML

3. Deployment

Conclusion

Related Posts:

Best IE6 “PNG Alpha-Transparency” Fixes

TwinHelix

Installation