I ♥ jQuery (UI)

I had this grand plan for a blog post comparing the various JavaScript GUI libraries, which in the end ended up being this blog post stating how I like jQuery UI. If you don't care about reading a "love letter" to jQuery UI, then you can stop reading now.

Since I was planning on refreshing the old online UI for Oplop I figured this was as good a chance as any to see what the various libraries offered. I knew that I wanted a wizard-like interface for Oplop's pasword hash generation workflow where users couldn't skip steps (see the FAQ if you want to know how Oplop works). This led me to think that something like an iPhone or accordion interface would work best as long as I could easily control when the next step in the workflow was taken.

Since I already loved jQuery, I decided to start with jQuery UI. To get my wizard-like interface I decided to use their accordion. It was nice that the only two requirements placed upon my HTML to work with the accordion was that the tag representing the header must contain an anchor tag and that the body tag follows immediately after the header tag. Otherwise the header tag could be anything I wanted as could the tag containing the body of a section. This allowed me to use an h2 tag with an embedded anchor tag for the header, a div tag for the body, and contain both as a unit in section tags w/o any ill effects.

The biggest worry I had going into this was how to control the workflow. I needed to make sure people didn't skip steps. Plus I wanted a fixed order to the steps for unfounded, paranoid security reasons (didn't want someone leaving their password entered longer than necessary). Plus it limits me having to worry about the state of the web page at all times. Since the accordion widget from jQuery UI is designed to rely on clicks I was not sure if I was going to reasonably be able to turn off the ability to click on a section.

Turns out I worried for nothing. The accordion widget has an 'event' option that lets you set what kind of event triggers the section switch. I am sure this was mostly done to let people choose onclick or onmouseover, but I chose the empty string and that disabled the ability to perform a GUI interaction to switch.

At this point I had a working prototype of the UI. But since it took no time at all to get working I just kept working and managed to finish up the basic work in a night. In the end jQuery UI simply worked. I didn't have to learn any funky new way of creating widgets or nasty work-arounds to get my abnormal requirements met. Nor did I have to code my JavaScript or HTML in a way I didn't want to other than tossing in some anchor tags (which I could even programmatically insert if I felt like it). I simply was able to get my prototype up and fully functioning.

At that point I started to look at what other JavaScript GUI libraries to evaluate. I considered GWT but they had no clear way to disable clicking on their stack panel. I then thought about Dojo and its dijit.layout.StackContainer since I had to learn it for a research paper I am writing, but their lack of up-to-date documentation on their 1.3 API is a real turn-off to me; it seems Dojo does most of their documentation through SitePen's blog or DojoCampus.

And then it struck me: this was beginning to feel like a chore. I realized I was researching these other GUI libraries purely for this blog post, not because I want to. jQuery UI provided exactly what I wanted in a simple manner that tied into how I preferred to code JavaScript. And so I stopped looking for other solutions.

I am happy with how Oplop Online turned out. I got the workflow I want and a non-ugly fashion that didn't take me days to get working. Now I just need to write the unit tests, but that will have to wait until next month.