Advanced JavaScript - John Resig at FOWA Miami
Posted on Feb 23, 2010
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.
Comments
There are currently no comments for this entry...be the first!