The jQuery Conference 2011
Highlights

ben sparks

Thanks for coming!

jQuery Conference Highlights is an HTML5 presentation.

Use the left and right arrow keys or your mouse wheel to navigate.

superiorcode.com/jqcon

Hot Topics

  • jQuery 1.6
  • jQuery UI 1.9
  • jQuery Mobile
  • MVC
  • Testing
  • Ajax Update (jQuery 1.5)
  • Deferreds
  • Mobile Performance

Tips & Tricks

Some other general stuff that I learned about.

  • webpagetest.org
  • Twitter is huge.
  • Don't use javascript:void(0) use javascript://
  • This presentation from html5rocks (Google)

What's coming in jQuery 1.6

jQuery usage is up to 44%, we need to know about it

 
                $("#el").css("height", "+=10");
                // same as:
                var height = $("#el").height();
                height += 10;
                $("#el").css("height", height);
            

.prop() is added and separated from .attr() (selectedIndex) consequently .attr() is over 100% faster.

.map() will take objects as well as arrays.

.is(), .filter(), and .find() will take elements.

valHooks are added to allow override the get/set behavior of .val()

lots of other cool stuff, check the changelog for beta 1

jQuery UI 1.9

Several new controls on the horizon:

  • Tooltip
  • Menu
  • Spinner
  • Grid

Deferreds

They are super awesome functions that store state. They fire callbacks when they are completed, successful or failed.

                var myDeferred = $.Deferred();
                
                // now bind some functions
                myDeferred.done(function() {
                    $("#dResults").html("sweet!");
                });
                myDeferred.fail(function() {
                    $("#dResults").html("oh noes!");
                });
            

More Interesting

So what's the point? It's more likely that you want to do something that you'd like to wait until it's been completed.

 
                var doSomethingLong = function() {
                    var deferred = $.Deferred();
                    
                    // maybe you're calling a series of animations
                    setTimeout(function() {
                        deferred.resolve("awesome!");
                    }, 2000);
                    
                    return deferred.promise();
                };
            

So now if we were calling this:

                doSomethingLong().done(function(status) { $("#dResults2").html(status); });
            

Some More?

You can call .then(doneFn, failFn) to add one of each handler.

You can call $.when(fn, fn, fn, n, ...) to automatically create a master deferred object out of several deferreds. So for example:

                $.when(doSomethingLong(), doSomethingLonger())
                    .done(function(d1, d2) { console.log("both items were resolved!"); })
                    .fail(function(d1, d2) { console.log("as soon as one fails, this will fire"); });
            

Remember once the state of a deferred is set further handlers added will fire immediately (a good thing!)

There are a few other options, read the docs.

The Ajax Rewrite

Now $.ajax() is a Deferred Object! You can still use success and error but they are just aliases to .done() and .fail(). Why does that matter?

For example you might have an RSS widget that makes an ajax call to get the feed data as soon as the page is loaded. Then you have a second widget on the screen that needs to pull the top 5 articles out of the main RSS widget and display them in a highlighted fashion. Obviously you dont want to do that until the first one is done. Now you can simply attach another done handler onto the deferred and whenever it is resolved it will be executed. Whether the call is already complete or not.

                var ns = {};
                $(document).ready(function() {
                    ns.rss = $.ajax({
                        url: "somefeed",
                        success: function(results) { // do something with the rss feeds }
                    });
                });
                // later... when loading widget #2
                ns.rss.done(function(results) { widget2.getTopFive(); });
            

Prefilters

Prefilters let you handle custom options for all or specific data types.

                $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
                    if(options.log) {
                        console.log("starting request: ", options.url);
                        jqXHR.success(function() { console.log("request successful"); });
                        jqXHR.error(function() { console.log("request error!"); });
                    }
                });
            
                $.ajax({
                    url: "get/some/data",
                    log: true
                });
            

Check the docs for more info.

Converters

Default Converters
                // List of data converters
                // 1) key format is "source_type destination_type"
                //    (single space in-between)
                // 2) the catchall symbol "*" can be used for source_type
                converters: {
                    // Convert anything to text
                    "* text": window.String,
             
                    // Text to html (true = no transformation)
                    "text html": true,
             
                    // Evaluate text as a json expression
                    "text json": jQuery.parseJSON,
             
                    // Parse text as xml
                    "text xml": jQuery.parseXML
                    
                    // Execute a script
                    "text script": function( text ) {
                        jQuery.globalEval( text );
                        return text;
                    }
                }
            

Converter Possibilities

Here we can convert our raw JSON data into an object.

                $.ajaxSetup({
                    converters: {
                        "json contact": function(json) {
                            return $.map(json, function(item) {
                                return new Contact(item);
                            }
                        ))
                    }
                });
            

Transports

Transports are used internally to retrieve the underlying datatype.

                $.ajaxTransport("fixture", function( options, originalOptions, jqXHR ) {
                    options.dataTypes.shift();
                    var originalType = options.dataTypes[0],
                        timer;
                    return {
                        send: function(headers, callback) {
                            timer = setTimeout(function() {
                                var data = options.fixture(originalSettings);
                                var response = {};
                                response[originalType] = data;
                                callback(200, "success", response, {});
                            }, 1000);
                        },
                        abort: function() {
                            clearTimeout(timer);
                        }
                    };
                });
            

Thanks for listening...