Advanced JavaScript - John Resig at FOWA Miami

Next up at FOWA Miami 2010 is John Resig, the creator of jQuery. John wanted to look at techniques such as:

• improve performance
• improve accessibility
• reduce complexity
• improve design

Event delegation is a technique that routs around the traditional technique of binding an event. For instance, you don't want to attach a click handler to every cell in a large table. This works by binding the event higher up the DOM tree and using event bubbling. In jQuery you would use .live() or .delegate() (which was added the other day). These beneficial because they continue to work with current and future elements on the page.

Next he covers caching HTML fragments. A document fragment is a lightweight container that can hold some DOM nodes. You can perform operations using a fragment and they are incredibly fast and you can cache the result.

Load your JavaScript library from a CDN (content delivery network). jQuery, Google and Microsoft, for instance, all host jQuery on their CDNs. The files are all automatically minified and gzipped. For instance with jQuery, it goes from 150KB to 20KB after being minified and gzipped.

He recommends using unobtrusive scripting. Take something that works already in a browser and layer on your own functionality. In jQuery, you might do this by encapsulating your code in the document ready event. This generally happens before the page is displayed to the user, so you can manipulate whatever you like. jQuery also provides an additional header in every single request, use the HTTP_X_REQUESTED_WITH to tailor your content depending on how its requested. For instance, you can grab and load chunks of an HTML document and inject it into your own page without touching the server.

Reducing complexity is done using things like, for instance, data storage. Using the data() method you can add data to any element on the page that is stored in centralized repository that is very fast. Additionally, jQuery also manages garbage collection when data is removed. Setting or getting a data value also triggers an event that you can capture and override in, for example, a plugin.

Custom events work identically to standard events in jQuery (they are not handled differently internally). There is also the concept of "event namespaces" which allows you to unbind all the events associated with a particular plugin.

jQuery also has a way of doing "special events" which are more complex than regular custom events. You can use special events to simulate other events. One plugin that makes use of this is called "Hotkeys" which allows you to combine key combinations on keydown.

jQuery UI allows you to simplify your design. They are designed to be easy to use and have a really good API as well as to be themeable and customizable. You can use the jQuery UI themeroller to choose from predefined themes and then customize them to your heart's content. There are also some other plugins not in jQuery UI that can be customized via the themeroller.

The jQuery team are working on the dynamic script loader and making it easier to write templating plugins. Importantly they are working on improving mobile support by testing against major mobile browsers on a number of devices.