The JavaScript Library World Cup

[ArticleBot]

This is an article discussion thread for discussing the SitePoint article, "The JavaScript Library World Cup"

[rossbruniges]

none of them will make a cup of tea though will they!!!

personally I am going for prototype at the moment, but am interested at looking into YUI as having the big guns of Yahoo! behind it I feel will lead to some really cool developments (Yahoo! won't want to be associated with a poor product will they!?!?)

[peach]

since AJAX is a major player in this game I would have called it the Champions League rather then the World Cup.. oh well.




..if you don't know what Im talking about: http://www.ajax.nl/

I was kind of disturbed to see jQuery referred to as an 'add-on' for Prototype. This is not the case at all. It is a complete, standalone, Javascript library that is fully documented and supports everything (if not more) than some of the other libraries mentioned here. Additionally, its size is minuscule in comparison, coming in at just over 10k. It should, definitely, be given a second chance in this 'World Cup'.

[Bob Carologees]

Very intruiging article. I've never really touched any JS frameworks but am very tempted by Mojo Kit - it seems more geared towards object orientation and good structuring and I like what it can do with JSON etc. so may give this a whirl sometime this year.

jQuery (jQuery.com) is not just an addition to Prototype.js, but is a complete alternative. quote from the website:

"jQuery is a new type of Javascript library. It is not a huge, bloated, framework promising the best in AJAX - nor is just a set of needlessly complex enhancements - jQuery is designed to change the way that you write Javascript."

[Kaystarmaker]

where is Jquery? it looks pretty interesting as well.

[creole]

http://www.jquery.com

It appears that the article has some HTML on page two that is not closed properly. Beginning just before the "Highs and Lows" of the Mochikit package and continuing to the end of the article, the text is red and quite large. Looks like one of your styles is running rampant on the page.

[Bob Carologees]

Is JQuery any good? I like the fact it seems very lightweight.

[Caged]

Nice write up Dan. There is a lot to love about all of these libraries including JQuery (which isn't a Prototype add-on as suggested in the article).

I don't particularly agree that Prototype is under-designed compared to MochiKit or the others, I believe it was designed differently. Everything in Ruby is an Object, and Prototype sticks to this premise as much as possible so I doubt we'll ever see many functions floating around in the global namespace.

In regards to the event handling. I believe what Mochikit uses is called the signals and slots method. I've only recently become familiar with it. It's a really powerful way to monitor events because the events don't have to be tightly coupled with the implementation. If someone wanted to trigger a callback when a method was called on a particular object, the object wouldn't have to check for this event inside the implementation.

Someone has worked on this style of event handling for Prototype you might want to check out: http://tetlaw.id.au/view/blog/signals-and-slots-for-prototype-easy-custom-javascript-events/

[chris_fuel]

I was looking at Yahoo UI library at one point. It was nice to use, however I noticed there was a drawback in extending the code. For a lot of the core code, Yahoo utilizes basic code protection, which basically nails down to removing all whitespace, and shoving everything on one line, using cryptic variable names. This makes it well near impossible to customize the functionality in any way.

[mattymcg]

Originally Posted by creole

It appears that the article has some HTML on page two that is not closed properly.

Thanks creole. The effect that I was seeing in my browser was much subtler than you've described, so slipped through. It's now been corrected.

Originally Posted by John Resig

I was kind of disturbed to see jQuery referred to as an 'add-on' for Prototype.

Of course, like others have pointed out, you are correct. I've removed jQuery from the Prototype bench to avoid any confusion (it was getting crowded in that team anyway).

[Etnu]

That's not true. You get both the compressed versions and the "development" versions in the package that you download from the ydn site.

You're supposed to make modifications to the development versions and then run them through a compressor to keep the code size down.

Additionally, you should probably concatenate libraries together rather than using them all as separate js files, because that'll just kill your performance.

"This would provide ready access to a certain package if you planned on using a lot of methods from it, although I'm not sure how easily it could be incorporated."

You can achieve this using the with statement in JavaScript. A little example:
function foo() {this.bar = function() {alert("foo.bar");};}
function bar() {alert("bar");}
var foobj = new foo();
bar();
with(foobj) {bar();};

[wickedman]

Thanks, Dan!

This is a really neat article.

[polvero]

Wow Dan, this was a really good and in depth analysis over the various languages. Although from one perspective you've barely touched the surface on YUI - You have indeed captured just the right amount from every library conveying the pros and cons.

I like the fact that you did not declare a winner because indeed I do not think it's about finding a winner but rather choosing what's best for either yourself or a team. To me it's not worth having a conversation with Jonathan Snook on why he should switch from Prototype to Mochikit in all his personal development projects when he is already quite proficient with Prototype.

The namespacing argument seems to be something that always comes back to the YUI folks, but rarely seems worth actually addressing. It's better to spend time solving real problems than figuring out a way to shorten up the spaces. I always create my own private short-cuts within the scope of my applications/widgets/whatever.

One thing I've personally been wanting to do for quite a while is see what drives the Dojo event system. I keep hearing about this vudu magic that does amazing things so it might be worth taking a peak into some of that.

John Resig brought up a good point a few weeks ago after another library debate/discussion on what folks are actually looking for - weighing in the factors of developer usability, readability, tasks, shortcuts, simplicity, verbosity, and even ease of implmentation vs versatility of the library you're using. All valid and important factors when choosing the right library for your development projects.

[creole]

The jquery library looks really nice, and it's pretty small. Does it require the prototype library to function though? Because that would sort of defeat the purpose of it being so small.

[mattymcg]

Originally Posted by creole

The jquery library looks really nice, and it's pretty small. Does it require the prototype library to function though? Because that would sort of defeat the purpose of it being so small.

creole jQuery is quite separate (see the earlier comments) although both libraries use the $() notation, implemented differently. Like you say, it is tiny in comparison but provides some great functionality, and it's not out of the question that you might have a project that utilizes both libraries on the same page.

Well worth considering in addition to the four big players in the article.

[creole]

Wonderful. Thanks for clarifying.

[itpastorn]

One question I never can seem to find an answer to: Is there a toolkit out there that works with application/xhtml+xml headers?

Prototype makes heavy use of innerHTML just because it is the fastest method to modify the DOM. Things like createElement and getElementsByTagName make your webapp slow

[MikeFoss18]

The last line of the article, "JavaScript's capabilities will probably surprise you...", should probably be "Mochikit's capabilities will probably surprise you..."

[Dionysis]

www.jquery.com

The griping about YUI and Dojo's long-winded namespaces is really unnecessary. Just assign your own shortcuts and away you go:

var connectEvent = dojo.event.connect;
var $ = dojo.byId;
var listen = YAHOO.util.event.addListener;

..and so on. Convenience is very subjective and best left to the user (developer) to choose what to put in their own namespace. The library itself should present itself in an unambiguous well organized structure (IMO)

Tom Jun: Yes, that's correct. That's why I said it took a very pragmatic approach. Being the fastest in the current implementations of the browsers is not the only thing to consider though. There are other issues to consider that are covered elsewhere on the web. I didn't want to get into that area in the article.

Mike: You are right. I've mailed the editors to get this corrected. It seems a few things have gotten garbled in the edit.