jQuery Workshop - John Resig at FOWA

My experience at FOWA Miami 2010 ended with an afternoon workshop by John Resig covering jQuery that went from the basics of jQuery for those unfamiliar into some more advanced techniques. John described jQuery as a library that is designed to simplify the interaction between HTML and JavaScript. Essentially its intended to "route around the craziness of the DOM." John wrote it back in 2005 when he was working on an application but was tired of dealing with cross-browser issues. The goal was that one day you could code your application in one browser and it would work in all browsers (it doesn't route around CSS issues but jQuery doesn't change that).

Why jQuery?
jQuery has grown immensely over the years in terms of the team and documentation but the codebase is kept small (23kb). There is a strong community and tons of plugins available. Everything works in the major browsers. Microsoft, Google, Mozilla, IBM and Amazon are some of the major companies using jQuery and it is in use on 27.6% of all sites (via builtwith.com). A lot of the growth in jQuery John attributes to its simple API. He emphasizes that they won't ship an API that won't work in all browsers nor one they don't feel proud of.

The Focus of jQuery
The focus is to find some elements (in the DOM) and do something to them. Everything is linked back to the jQuery object (i.e. $). jQuery will gracefully fail when it can't find anything to run against (i.e. if the selector returns nothing). However, before you can traverse and manipulate the page, you need to wait until the document is ready, so you need to use the ready event which typically fires before the page is displayed to the user (i.e. $(document).ready()).

For finding elements jQuery supports CSS 1-3 selectors as well as custom selectors. CSS selectors, he says, are ok for finding things but they have limitations. To get around this, jQuery also provides a number of traversal methods to walk the DOM. Finally you can chain methods together to continue to do operations on the jQuery set returned by each method call. There is no need to store extra values or do extra caching by properly utilizing chaining. For example, you can combine traversal and regular methods to perform complex transformations in a single line of code.

jQuery contains a whole bunch of functionality for manipulation, animation and much more. You can even enter HTML straight into the selector and it will convert it into DOM nodes that can be further manipulated. For instance, he creates an <a> tag and then inserts the href attribute and finally adds some inner HTML text. However the one tricky part in the example he notes is his use of the end() method which is intended to return "what we had previously in the stack of jQuery sets." Keep in mind that every method in jQuery returns a jQuery set and jQuery keeps track of all the prior sets as chaining progresses.

Next John discusses using events, showing that jQuery makes a large number of available to easily respond to. He discusses using the preventDefault() method to override standard browser behavior and override it with your own. This works the same as doing a return false in an event handler (say a click or submit handler). This is one of the keys to "unobtrusive scripting" which he strongly advocates.

Event delegation takes advantage of the browser's event bubbling and is an efficient way to watch for an event on a large number of elements. jQuery has two ways to handle event delegation, one being live(). The live() method will watch for an event on every matching element in the DOM as well as any matching element added to the DOM in the future.

jQuery also provides a bunch of Ajax methods for loading things like JSON and XML. You can use jQuery to load XML, grab values out of the XML and use those values on the page. Of course, the same can be done via JSON. If you specify a remote URL, jQuery will automatically try to use JSONP for accessing that remote data. Finally, you can grab the contents of a local or remote HTML file and parse and manipulate those as well.

John next does a live coding example of a simple "to-do list". He takes a simple form post based list that uses no jQuery.

Developing jQuery Plugins
After the break, John begins to discuss the "ridiculous number of plugins" that are available for jQuery. For instance, if you want an accordion plugin, you likely find at least 10. John says you need to see how often something is releasing to help you determine how active the plugin development is. Are the creators replying on the discussion groups (and are there discussion groups)? Is there a bug tracker and are bugs being resolved? By answering these questions you can determine the overall value of the library without even bothering to look at the code.

John shows a simple plugin example that combines a slideUp and a remove() which is defined as jQuery.fn.slideRemove (equal to the function you will run when called). When building a jQuery plugin, you need to use the "this" object, which is the jQuery set, rather than $. Also you always need to return the jQuery object so that you continue to support chaining. In addition to these sorts of plugins, you can also create custom selectors.

jQuery UI
The jQuery team has gone through the plugins and found some of the most useful ones and tried to build the best possible version of them. These plugins are what make up the jQuery UI project. He demonstrates the jQuery UI by converting a straight HTML "social networking site" (a simple example not a full-blown site) and adding rich functionality via jQuery and jQuery UI.

For the record, the live coding tutorials were great but I was a little distracted by some personal bad news (thus the lack of detail of those portions of the presentation in this post).