Error getting theme layout

Writing the Same Widget in Prototype and YUI

Posted @ 10:50 am by Adam Brill | Category: Technology, User Experience | 1 Comment

The Widget – AutoComplete

The widget I was writing was a user-friendly auto-complete widget similar to what Facebook uses. It was supposed to auto-complete as you type, with a pretty drop-down allowing the user to easily search the system and enter multiple items as seen above. You start with a standard text input box, but when the user begins typing it drops down with possible completions that the user could be trying to type. When the user selects one or enters a separator (comma), it adds a blue box to show that an entry has been added. The user can then remove the item by clicking the X next to it in the box. One obvious use for this would be usernames, which is in the example above, but we use this for some other things such as tags.

Writing the Widget in Prototype

I wrote the widget first in Prototype. I’m not much of a fan of the Prototype JavaScript library because I don’t like how it hacks the core of JavaScript in the browser. Prototype has some nice shortcuts, but the majority of them slow down the script and seem to be aiming at people who don’t have the experience necessary to write the code in standard JavaScript. I generally end up using Prototype for events, classes, extending, and selectors. As I began working on this widget, I felt like that is about all that Prototype had to offer me; Prototype has no built in widgets for me to use as a starting point and I very rarely use the loop shortcuts etc. that are built into Prototype. At least the basics are covered. I have been writing JavaScript with Prototype for years, though, and have become very efficient. The final solution was a widget with 19 methods and 294 lines of JavaScript (~9kb). Not too bad…

Writing the widget in YUI

I’m much newer to YUI, but from my experience so far I like it much better than Prototype. Not only is everything contained under the global YAHOO variable, but it also has a very good inheritance model for us to model our own widgets after. This was one of the first widgets I wrote in YUI, so it took me a bit longer, but it didn’t take long before I was catching on to how YUI works. YUI offered all the things that I used from Prototype (events, classes, extending, and selectors) and also gave me a great place to start: the YUI AutoComplete widget. My widget, YAHOO.SolutionSet.widget.AutoComplete, is an extension of the YAHOO.widget.Autocomplete widget. The YUI AutoComplete widget was good, but it did not allow you to select multiple items in the same input box. In order to update the widget to work as I wished, I had to extend 4 methods and create 4 new methods for a total of 131 lines (~4kb).


While I didn’t keep track of a time comparison on how long it took me to write the two widgets, it was more than likely quicker for me to write the widget in Prototype because I have much greater experience with Prototype. However, if I would have had equal experience between the two libraries, I feel fairly confident that YUI would have been faster considering that the widget already existed and I just needed to extend it and I only needed to modify a few methods. Also, the YUI widget was less than half the size, meaning it was that much less code that I needed to write.

One thought on “Writing the Same Widget in Prototype and YUI

  1. Damien Filiatrault says:

    Good article. I am looking forward to getting to know YUI more myself. How big was the Prototype JS library that you had to include on the page vs the YUI JS library you had to include?

Leave a reply

Error getting theme layout