jQuery 1.3 First Impressions  January 14th, 2009

jQuery 1.3 is out! I'm excited because I really enjoy writing code using it. In fact, with jQuery in the picture, I have a hard time deciding if my favorite language is Ruby or JavaScript.

So I see this update by John Resig on twitter and I get up early the next morning to check it out. The release notes (linked above) are quite an interesting read, if you're into that sort of thing. With the insane performance improvements all over the place, I didn't want to waste any time upgrading my little corner of the web to the newest version. Here's what I found.

Good Things

Browser Detection is Deprecated

While I agree that $.browser is smelly it isn't always practical to limit yourself to feature/bug detection. For example, this site gets somewhere in the vicinity of 5% IE users. If some slidey effect is being insane in IE, I can just 'comment' out that effect for IE and everyone is happy. There's no 'feature' or 'bug' I'm really working around. It's just that this combination of markup, style and animation don't mix well in IE, so why fight it?

Of course, since it's only deprecated and not removed, I can continue using it for now where it makes sense (and in flot, where it's used all over the place). I could also eventually pull out the relevant code from jQuery 1.2.6 and include it plugin-style. No harm done.

It's Pretty Fast!

Benchmarks aside, I can't really put my finger on what's faster, it just... it has that certain something that makes it feel snappier. Flot is a good place to get that feel — the onmouseover code makes the browser feel a lot less sluggish.

Certainly one of the biggest improvements is in CSS selectors. The new engine is a real step in the right direction and you can feel the difference, especially for 'common' selections. I did a very unscientific test, here are the results:

Selecting All p Elements
  jQuery 1.2.6 jQuery 1.3.0 prototype 1.6.0.3
Code $('p') $('p') $$('p')
Time 0.411 ms 0.271 ms 1.162 ms
Calls 17 17 46
Screenshot

Compatibility

Speaking of flot, all of the examples worked fine after simply changing the page to include 1.3. That's really handy. All of my simpler code used on this site also worked without needing a single change (you're using it right now!).

Problems

Animations

I was able to find one thing in the new version that required a change to my code... and that's pre-built animations like slideDown. If you've ever written any jQuery and tried to collapse and expand elements you'll probably be familiar with the issue of padding and margin properties instantly collapsing/expanding at the end/beginning of animations.

This is because the height attribute is the only one that is getting decremented. Once it gets to 0px high, jQuery calls hide() on the element. If there are still some paddings and such on the element at that time it sort of just snaps closed, quite jarringly.

So normally you'd have to consider this while building your markup and put the paddings and margins on elements inside the element you'd be animating closed. Well, in jQuery 1.3 that is not the case. Now, padding and margin attributes are animated in the same way as height is! Joy.

But wait...

Yep. My jQuery 1.2.x mindset caused me to account for this animation issue in my markup, causing 1.3 to make it look funny. Fortunately it's as simple as changing the code from using a pre-built animator to the 'primitive' animate function directly instead. This is what you should do if you've already built the markup to handle the situation.

Conclusions

jQuery 1.3 is certainly an improvement, and not just an incremental one. The performance aspect is the most interesting to me. But also interesting is the growing controversy over the new selector engine (Sizzle). The MooTools guys have been doing their usual ranting on the subject. It will be interesting to see if perhaps the new engine can get into other prominent frameworks. Personally I'd love to see jQuery style selectors make it into prototype. Partially because prototype is so freakin' slow, but also just because I like the jQuery style better. What is with $('some_id') instead of just $('#some_id')? We could get rid of the $$ awkwardness! But this is an entirely different discussion for another day :)

Some social stuff: