rdworth.org

Someone asked on the jQuery UI Mailing list tonight about the difference between jQuery, jQuery UI, and Plugins. Here was my response.

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.”
http://jquery.com/

“jQuery offers a mechanism for adding in methods and functionality, bundled as plugins.”
http://docs.jquery.com/Plugins/Authoring

“jQuery UI provides abstractions for low-level interaction and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.”
http://ui.jquery.com/

jQuery ( http://jquery.com/ )

So jQuery is a concise and minimal javascript framework. It covers the basics – DOM Manipulation, Events, Ajax, Animations. It does so quite nicely, and is rather popular.

Plugins ( http://plugins.jquery.com/ )

jQuery is extensible. Anyone can write code that gives jQuery more than just the basics functionality. These are packaged as plugins. In addition to including

jquery.js

you might also include a plugin file (that you or someone else wrote), such as

jquery.foo.js

This would typically add a function .foo() which you could call on any jQuery object as if that were a built-in basic capability of jQuery. You can find a huge number of plugins on

http://plugins.jquery.com/

as well as elsewhere on the internet. People write and release jQuery plugins all the time, because they’re easy to write and share. They cover things such as menus, rich media (audio/video), data handling, cookies, browser detection, layout, form validation. Anything people want, really.

When a plugin becomes so ubiquitous that nearly everyone is including it on their page with jquery.js, it can be a candidate for inclusion in jQuery core. But only where it is in demand, makes sense, and still keeps the library lightweight, easy to use, etc. That said, jQuery core will never grow beyond it’s fundamentals (hence the name, core). Enter jQuery UI.

jQuery UI ( http://ui.jquery.com/ )

A couple years back there was a set of quite popular jQuery plugins bundled in a package called Interface, written by Stefan Petre. These offered really great interactions, like drag-and-drop, selecting, sorting, resizing; widgets like tooltips, autocomplete, accordion. The 1.2 release of jQuery had some API changes that would’ve required changes to Interface, for it to be compatible, but Interface was never updated.

jQuery UI (started by Paul Bakaus) picked up where Interface left off. Many people are interested in a complete package/library of jQuery plugins with a common/consistent API, complete documentation, testing in all major browsers, with which they can build rich web interfaces and/or RIAs (Rich Internet Applications). Oh yeah, and they should work well together, be easy to use, accessible, extensible, and themeable. Whew.

jQuery UI is a sister-project of jQuery. The 1.0 release of jQuery UI was September 2007. Version 1.5 was released in June 2008. You can get a pretty full history (including what went in to each release, and how it matured) on the jQuery Blog. The latest stable release is 1.5.2 and includes

Interactions
- Draggables (drag)
- Droppables (and drop)
- Resizables
- Selectables
- Sortables

Widgets
- Accordion
- Datepicker
- Dialog
- Slider
- Tabs

Effects
- blind, bounce, clip, drop down/up/left/right, explode, fold, highlight, pulsate, puff, scale, shake, slide down/up/left/right, transfer
- Color animations
- Class animations (addClass/removeClass/toggleClass w/Interval)

Some other notes:

There is documentation for all of jQuery UI, including how to theme each plugin

jQuery UI is hosted on google’s ajax libraries api

jQuery UI has full theming support for all plugins. The jQuery UI website even has an application for getting started building a theme, called ThemeRoller. It gives you a live preview of your theme applied to all the widgets as you create it.

The jQuery UI website has a Download Builder which allows you to pick and choose just the components you want, and wraps them up (with a bow, er min/pack compression options) in one file.

There are more plugins in the works such as:
- colorpicker
- autocomplete
- progressbar
- spinner
- menu
- toolbar
- panels
- splitters
- tree
- uploader
- grid
- tooltips

You can follow jQuery and jQuery UI on twitter and/or identica:

jQuery
http://twitter.com/jquery
http://identi.ca/jquery

jQuery UI
http://twitter.com/jqueryui
http://identi.ca/jqueryui

(both sites use jQuery )

Licensing

jQuery UI (like jQuery) is dual-licensed MIT and GPL. Meaning you can pick the one that suits you.

Support Groups / Mailing Lists

jQuery has two:

jQuery Main list, for people using jQuery: http://groups.google.com/group/jquery-en
jQuery Dev list, for the development of jQuery itself: http://groups.google.com/group/jquery-dev

and jQuery UI has two as well:

jQuery UI Main list, for people using jQuery UI: http://groups.google.com/group/jquery-ui
jQuery UI Dev list, for the development of jQuery UI itself: http://groups.google.com/group/jquery-ui-dev

September is full. I’m giving five talks next month on jQuery and jQuery UI. Here’s my schedule:

Rich Web Experience – East (Washington, D.C. Area) Tag: rwe2008
September 4-6, 2008
Talk 1: jQuery
Talk 2: jQuery UI: Rich Interactivity Simplified

Rich Web Experience – West (San Jose, CA) Tag: rwe2008
September 8-10, 2008
Talk 1: jQuery
Talk 2: jQuery UI: Rich Interactivity Simplified

Library of Congress (Washington, D.C.)
September 18, 2008
A team of developers has invited me to come speak with them. Apparently they’re fans of jQuery (no surprise there) and want to learn more. Awesome. Thanks Ed Summers.

jQuery Conference 2008 (Boston, MA) Tag: jquerycon2008
September 28, 2008
Last year we had a one-day jQuery Camp right after TAE. This year we’ve graduated to a full conference . I’ll be doing an introductory talk on jQuery UI.

The Ajax Experience 2008 (Boston, MA) Tag: tae2008
September 29-Oct 1, 2008
Talk: Rich Interactivity, Simplified, with jQuery U
This will be my second Ajax Experience. I had an absolutely awesome time last year meeting almost the entire jQuery Team and jQuery UI Team.

If you’ll be at any of these, I’d love to meet up with you. Contact me on identi.ca @rdworth.

Google announced recently that jQuery UI is the latest addition to their hosted AJAX Libraries API:

jQuery UI … is now hosted on our AJAX Libraries API! As usual, your users will get a performance boost when you use JQuery UI through our API, so get started by checking out the docs.

Now you can put one script tag on any page and benefit from cache, min, gzip, and google’s CDN:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>

and you’ve got all jQuery UI plugins and effects. Beauty.

jQuery UI 1.5

I’m pleased to say that the jQuery UI 1.5 release is out. Here’s the full blog post for all the info:

jQuery UI v1.5 Released, Focus on Consistent API and Effects

There’s a lot there, so I won’t repeat it all here. However, I do want to mention on of my favorite parts of this release:

ThemeRoller

Wow! Give a hand to Filament Group for creating ThemeRoller.com. Now you can create a custom jQuery UI theme including colors, textures, hover effects, to match any site or app. They’ve got an extensive writeup on their awesome work, and they’ve even got guidelines on how to write jQuery UI plugins so that they’re ThemeRoller-ready.

Thank You

Finally, thanks to all who helped with tests, demos, documentation, feedback, criticism, and encouragement. Keep it coming.

The jQuery UI sprint this last weekend was great. In all we had over 35 participants and got a lot of good stuff done.

We worked on demos to showcase all the UI plugins, opened and closed a bunch of tickets, reviewed and updated the documentation, and continued writing unit tests for each UI plugin. We also had some crucial discussions about API consistency, and simplified some of the code dependencies.

We’re not quite ready for the final 1.5 release, but this sprint was a great push toward that goal. I was pleased to see that we attracted some new contributers. They made a real contribution, and we were happy to have some fresh perspective on how we’re doing, and how we can do better. They key now is to keep this good momentum going.

Paul will be doing a more complete summary post on the jQuery blog later today. But I wanted to at least mention here: Thanks to all who made this sprint a success.

I announced the first jQuery UI Sprint on the jQuery blog last Friday. It will take place all day tomorrow and Saturday. Here’s a summary:

The jQuery UI Team is pleased to announce its first Worldwide Sprint, to take place next Friday and Saturday, March 14-15, 2008. Two full days of testing, fixes, documentation, and general getting-stuff-done. Our goal is to get the jQuery UI 1.5 release (alpha, beta) ready for final, and we invite any and all to help. Whether you have an hour, or an afternoon, come and run really fast with us.

I’m really excited about this event. We’ll have a few team members there to help facilitate, and a lot of new contributors as well. So far there are 22 people signed up to participate. If you want to give UI some love, add your name to the list, even if you can’t be there the whole time. We’ve got some exciting stuff planned. See you tomorrow.

We finally got the jQuery UI 1.5 alpha out, along with jQuery 1.2.3:

jQuery 1.2.3: AIR, Namespacing, and UI Alpha

jQuery UI 1.5 alpha
What a road for UI 1.5. Originally it started as 1.0.1 (just bug fixes) following the 1.0 release in September. Then it grew into 1.1 (a little added functionality, a couple API changes). Neither of these actually got released. The closest was a fairly quiet 1.0.1a. In the end, there were so many big changes, especially in the API, but also in a couple plugins that were entirely reworked, that it was promoted to 1.5. Here’s a couple I’ve been spending a bit of time on:

Selectables
The version of Selectables in the 1.0 release was not what some might call useful. I’m happy to say this is fixed in 1.5.

Dialog
Dialog has a few fixes (like with multiple dialogs, if you click on one it comes to the top), but the most requested feature (by far) didn’t quite make it into the alpha: modal option. This will be in the beta. Stay tuned.

I had my second jQuery UI Article published on DMXzone today:

Tutorial: Dialogs and Theming with jQuery UI

In this article I’ll introduce jQuery UI Dialogs. I’ll also introduce one of the premiere features of jQuery UI: themes, and will show how they can be used to make a consistent and attractive web application. As in my last article, Drag-and-Drop Shopping Cart with jQuery UI, I’ll assume a basic familiarity with jQuery (the base of jQuery UI). You should be comfortable with jQuery syntax and basic selectors.

See my earlier post, Drag-and-Drop Shopping Cart with jQuery UI, for more information on DMXzone Premium Content.

I had my first article published on DMXzone.com yesterday. I’m going to be writing a couple tutorials a month on there, as well as on DNzone.com. I’ll mostly be focused on writing jQuery UI tutorials. Check it out:

Tutorial: Drag-and-Drop Shopping Cart with jQuery UI

In this article, I’ll introduce jQuery UI Drag-and-Drop and show you how with just a few lines of code, you can make a richly interactive shopping cart that is functional and fun to use. To get right into it, I’m going to assume that you’re at least familiar with jQuery (the base of jQuery UI). You should have a working (latest) copy of jQuery installed and be comfortable with the jQuery syntax and basic selectors.

It’s published in the Premium Content section, which means it’s not free. You can either pay a few dollars, or if you like the whole site (lots of great content, as well as an online magazine), they’ve got annual subscription options for unlimited access.

I’ve got a few more articles in the works including: dialog, theming, selectables. Leave a comment if you’ve got other ideas for articles.

Woo hoo! I’m going to be attending The Ajax Experience in Boston next week. I’ll be providing coverage right here on my blog. If you’re going to be there, I look forward to meeting you. If you’re not able to make it, then read my blog and you’ll feel like you’re there, I’m sure.

So TAE is Tue through Fri. Then on Saturday is jQuery Camp 07. I am definitely excited about meeting almost the whole jQuery Team in person. As well as about 60 other people that are surely as into jQuery as I am. They’ve got to be – jQuery Rocks.

It’s gonna be an awesome week. I’m sure I’ll keep busy helping with the next release of jQuery UI, and hopefully squeezing in a few minutes to finish some effects I’ve been working on.