5 Reasons to Use jQuery UI (and 3 Reasons to Avoid It)
Yesterday, the jQuery team released their jQuery UI library which brings much needed UI components to an already stellar AJAX framework. Many developers love jQuery because of it’s simplicity and ability to get shit done quickly. It’s not an overly bloated library (read: Dojo 0.4) and it’s wick fast. So why would you want to use jQuery UI over say other frameworks like Ext JS or script.aculo.us? Well here’s my top 5 reasons to use this new framework, plus 3 reasons to avoid it.
5 Reasons to Use jQuery UI
- Stick with One Library
The obvious reason for using jQuery UI is that you’re already using jQuery. Now you won’t have to bring in another library to satisfy your UI needs. You can take advantage of all the widgets and interaction tools that jQuery UI supports without having to maintain and learn another library. Not that mixing libraries is a bad thing, you can definitely use multiple libraries in one project and cherry picking the best components out of each. - Excellent Documentation
I’ve always liked jQuery for the excellent documentation they provide. Not only is it up to date but it’s also cleanly organized. Each function/component has a full explanation and an example + source code. The most frustrating thing when using a library is not being able to find information. The whole point to use a library is to make development easier and good documentation definitely helps.Just compare the jQuery docs to Dojo docs (which is actually down as of this writing) to script.aculo.us docs to mootools to mochikit. (Don’t look at YUI or Ext JS, their docs are great!)
- Magnifier
Not a new effect, but definitely the easiest way to get this effect on your page. See the example here. In one line of javascript you have your very own OS X dock widget! - Selectables
I haven’t used them all, but I’ve seen very few libraries that have a component that lets you select items like this in javascript. Check out the demo here. Draw a box around the list items to select them. Now more impressively hit control and select items while skipping others. Awesome. - Themes
One part of AJAX is beautifying the web and with the upcoming themes competition for jQuery, there should be plenty of themes available. My one knock against most libraries is that there’s not enough variation in the way the widgets look so one Dojo or Ext JS site starts looks like every other. Redoing themes requires a lot of resources (and talents that AJAX developers usually do not have) so most developers end up picking one of the existing themes.
3 Reasons to Avoid jQuery UI
- Doesn’t Support All Browsers Yet
Granted this is a brand new project and they warn you ahead of time in their launch announcement, but so far I’ve tested Safari, IE6, IE7, and Konquerer. There are various bug in each and on different components. For example the gallery demo doesn’t render properly in Safari or Konquerer.The Shadow demo fails in IE6. There have been reported issues with the tablesorter in IE7. The point of using an AJAX library is to abstract the browser layer, but if certain components don’t work on certain browsers, there’s a problem.
- Missing Widgets,
Ranged Calendar Date Picker
I know I’m being picky, but the calendar widget doesn’t do date ranges. You can get around this, but at first glance I don’t see an option where I can set a min/max date. Compared to the YUI calendar widget, the options are sparse here. If you’ve ever done any decent amount of web work, you’ll know that a good calendaring widget is essential.Update: Okay, I missed the plethora of options available in the Calendaring widget. Thanks to Marc Grabanski, calendaring widget developer, for pointing me to a more robust demo which shows that it’s configurable than I had first thought. It definitely does do date ranges.
My original point was that jQuery is still missing a few UI widgets; common ones such as a tree widget and a menu widget and lesser used ones such as a WYSIWYG or autocomplete. I don’t doubt that these things will come as the library matures but they’re not in the current release.
- Inconsistency in the API
jQuery was done by a team of contributors, each doing their own components and it shows. For example, the accordion control is essentially the same thing functionally to the tab control. Yet the activate a tab programmatically the call is tabsClick() while the accordion control is activate(). The tab control also has many more hooks such as disable, remove, add, etc… the accordion control has none of this functionality.
The jQuery UI library definitely has some high points, but I think it was launched a bit too early. The depth of existing AJAX frameworks simply outshines it. However, as it matures, I’m positive the team will keep up the high quality that has made jQuery massively popular.
… #3. (in)Consistency in the API …
Interesting, I had not noticed this, and John specifically talked about NOT doing what you describe in one of his video presentations.
http://ejohn.org/blog/building-a-javascript-library/
slide 14
i really hope we are not starting to see jQuery slip away here.
Not fair! 🙁
You’re talking about the old 1.11 documentation compared to the other frameworks’ documentation. I’d to hear your opinion on our new documentation system when we release 1.2.0. The release for 1.2.0 is still a while from now, but at least you can take a look at the new documentation and its new syntax inside the trunk at: http://dev.mootools.net/browser/trunk/Source
We’re about done with the documentation, but if you have any suggestions please let me/us know.
Hi Wayne,
both tabs and accordion started as stand-alone plugins and got moved to jQuery UI. The missing consistency is really bad and needs a lot of improvements. The good point is that both components are very stable and evolved for about a year.
The browser compability is a very important point. If it doesn’t work cross-browser, its worthless. Your help on bugtracking is welcome, just use jQuery’s bugtracker if you find something.
Olmo, I admittedly only based my opinions on the released version of mootools, not the dev branch. But to be fair, all developers would use mootools 1.11 and 1.11 docs 🙂
However, I compared some of the docs between 1.11 and 1.20 and it’s definitely a big improvement!
For example the 1.20 version of Slide.js:
http://dev.mootools.net/browser/trunk/Source/Effects/Fx.Slide.js
and 1.11 version:
http://dev.mootools.net/browser/tags/1-11/Effects/Fx.Slide.js
You’ve included example syntax, full explanation of the arguments, and options. A step in the right direction. I know you don’t have full html docs up yet, but providing a multitude of examples with commented source is the next step. YUI does this beautifully, each component has many examples where I can instantly see code and results.
The calendar doesn’t do date ranges? Try clicking the tab, “Date Range”.
http://marcgrabanski.com/code/jquery-calendar/
I believe the feature you are actually referring to is under “Restricting – Limited dates”. Please refer to the API which has 25+ customizable options. The demo on ui.jquery.com only shows its most basic implementation.
Thanks Wayne. We’re definitely trying to faciliate our users/developers. Aaron had mentioned YUI’s Patterns as a reference in our last meeting and we’re going to see what the big buzz is about. You should probably expect, though, that those kinds of changes won’t happen until the next blue moon ;). We have other goals in mind for 1.3.0. 😀
I think jQuery UI documentation is really bad. That’s how I ended up in this site, searching for jQuery UI resizables examples. In the official documentation there’s a lot of “missing parts”. You see the example and looks great and when you view the source:
$(“#example”).resizable();
…just that? Didn’t worked for me… I believe there’s some option I have to define, but it isn’t in documentation. Same with other functions.
You can find a ton of jQuery plugins (calendar for example) at http://www.ajaxrain.com Cool site for latest AJAX prototypes across all libraries.
The magnifier demo doesn’t work in IE6, IE7, FF2 nor in Safari. So that leaves 4 reasons to use it, but I haven’t gotten it to work at all yet…
I’m building a website fully in jquery-ui and i’ve tested in ie 6, ie 7, ie 8, opera 8, opera 9, chrome 1.0, chrome 2.0 beta, safari 4 and no bugs or erros
JqueryUI rocks !
[…] » 5 Reasons to Use jQuery UI (and 3 Reasons to Avoid It) / Wayne Pan’s Blog – tech | js | ui … […]
It also works for me in all major browsers
Hey.
This piece of software really sucks.
I’ve seen a lot of frameworks like script.acolo.us, mootools, prototype starting from the first versions.
But – THIS – Plugin is another proof that open source only exists because there are programmers out there who are so bad that they dont find a job and work for free.
Bad documentation
Bad examples
Bad API consistence
Bad functionality
The main thing is that they have a template engine..WTF?
JQueryUI is beautiful. My only problem is it sets the bar so high – when you have to write your own widget its very time consuming to match the standard achieved in JQueryUI, so you end up with mis-matched UI component styling and behaviour.
Reason #4 to avoid jQuery UI: You only need one or two UI components and don’t want to pull in a really heavy UI framework to make them work.
Oops, sorry. I didn’t notice how old this post was 🙂