Archive

Archive for March, 2009

Debouncing Javascript Methods

March 20th, 2009

Back in 2006, I was the lead front-end architect for a mission-critical Web 2.0 application. Yah-yah, aren’t they all mission-critical? Yes, but this one really was critical since it was one of those make-or-break moments for the product. What made this project really interesting were the unrealistic expectations the product managers had of web apps.

Sometimes, pressure like this can lead to creativity and innovation. On this occasion, it helped me reach back in to my electrical engineering coursework to apply a hardware concept to software programming.
Read more…

dojo, Event Handling, Javascript

Hi-performance Javascript Tips #2 «Revisited»

March 19th, 2009

In a previous post, we recreated a simple version of Java’s StringBuilder:

var StringBuilder = function (str) {
    var _stack = str ? [str] : []; // str == initial string to start, if any
 
    // append can take one or more strings as arguments
    this.append = function () {
        _stack.push.apply(_stack, arguments);
        return this;
    }
 
    this.toString = function (separator) {
        return _stack.join(separator || '');
    }
}

Unlke Java’s implementation, we’ve added a separator parameter to the toString() method. This would be very helpful in creating HTML or CSV using our object.

I was thinking it would be fun to add a few more features of Java’s StringBuilder onto our decidedly simple example. Here’s how we could add a separator property and a length property (with setter and getter):
Read more…

Javascript, performance

Hi-performance Javascript Tips #2

March 19th, 2009

Create your own version of Java’s StringBuilder:

var StringBuilder = function (str) {
    var _stack = str ? [str] : []; // str == initial string to start, if any
 
    // append can take one or more strings as arguments
    this.append = function () {
        _stack.push.apply(_stack, arguments);
        return this;
    }
 
    this.toString = function (separator) {
        return _stack.join(separator || '');
    }
}

This routine runs up to 8x faster in IE6 than normal string concatenation using the + and += operators! In IE7, I’ve clocked a 4x improvement.

Firefox 3.0 gets about a 20% speed boost. Safari 4 and Chrome get less than a 10% speed boost.

It would be an easy exercise to modify the StringBuilder class’ append method and constructor to take an existing StringBuilder object instead of a string.

Javascript, performance

Hi-performance Javascript Tips #1 [Updated 2009-03-19]

March 19th, 2009

The arguments property of the Function object looks a lot like an array, but it’s really not. We say it’s array-like since it has a length property and properties whose names are whole numbers.

Similary, DOM properties, such as Element.childNodes, return a NodeList, which is also array-like.

If you’ve ever been frustrated that you can’t use array methods on these array-like collections, then the following function is your new friend:
Read more…

Javascript, performance

Why the new Facebook facelift is so lame

March 14th, 2009
Comments Off on Why the new Facebook facelift is so lame

If you’ve logged into Facebook lately, you couldn’t have missed the new design. This design brings some much needed features. I especially appreciate the ability to filter my News Feed by friend group. Since I already keep my friends in separate groups (a painstaking process), this was a freebie for me.

But overall, Facebook disappoints for several reasons.

Non-programming

Javascript inheritance explained 2

March 10th, 2009
Comments Off on Javascript inheritance explained 2

Wow. It’s been almost 2 years since I’ve finished a technical blog post! I’ve started plenty, but have just never quite finished any. I figure it’s either because I try to tackle too much in a single post and/or because I am way too picky about the topic. Anyways, here’s a new blog post to prove I didn’t actually fall off the face of the Earth!

In my previous post, I laid out the basic Javascript inheritance mechanism, prototype chaining. In this post, I’ll elaborate on it a bit more by showing how I took this basic concept and created something workable for some very bright, but prototype-phobic programmers: Oracle Life Sciences division’s Java developers! (Java and Javascript couldn’t be more different in almost every regard, especially concerning inheritance.)
Read more…

Inheritance, Javascript, prototype.js