State of jQuery
2011

adam j. sontag

ajpiano.com/stateofjquery-2011

It Was A Very Good Year

"When I was 1.7..."

Since the last jQuery Summit...

  • jQuery 1.5, 1.6, and 1.7
  • jQuery UI:
    • 10 1.8.x maintenance releases!
    • Major progress on 1.9 and Grid
  • jQuery Mobile - from alpha to RC!
  • Two conferences!
  • Breaking News: "jQuery Team" restructured!

Kind of a big deal

with ( gold < 1 && pager ){}

It Takes A Village...

A big shift in community-driven-ness over the past year has resulted in:

Wheeeeeeeee!
  • More rapid release cycles
  • Staying on top of bugs
  • Better discipline in separating major vs. minor (bugfix) releases
  • Open submission of new features, voted on by the core contributors
  • Weekly, public IRC meetings for jQuery Core, UI, and Mobile
  • Public updates on progress of various projects

...A Really Big Village

But we still need help!

There are a lot of ways to contribute to jQuery that don't (or do) involve writing JavaScript

Uncle Sam John
  • Bug Triage
  • Support
  • Content
  • Design
  • Infrastructure

jQuery 1.5

"Want to learn more about new Ajax features? Check out my presentation!" -Julian Aubourg
AJAX rewrite
Enhanced extensibility with prefilters, converters, and transports
Ajax methods return a jqXHR object
The jqXHR has a promise interface (is observable) and is an implementation of...
"Want to learn more about Deferreds? Check out my presentation! Or just listen to my talk about it in about two hours!" -Dan Heberden
Deferreds
Generic interface for working with asynchronous behaviour
$.when( somethingHappens() )
.then( doSomethingElse )
Based on, but not 100% compliant with, the CommonJS Promises/A spec

jQuery 1.6

"Want to learn more about the attributes rewrite? Check out my slides!" -Timmy Willison
.attr() rewrite
Splitting apart methods for handling attributes (the things in the HTML) from those for handling properties (of the corresponding DOM Element)
Performance improvements!
Previously, too much magic, too many weird edge cases
Caused some backwards-comaptibilty headaches, so we patched these cases in 1.6.1
Use .attr and .removeAttr for attributes
Use .prop and .removeProp for properties
Protip: Just use actual DOM element properties:
var select = $("#someSelect");
select.prop( "selectedIndex", 3 );
select[0].selectedIndex = 3;
Relative CSS
.css works like .animate
Change CSS properties relative to their current value
$("#wat").css("width", "+=100px")

jQuery 1.6, cont'd

A better $.map()
You can now $.map through a plain object to produce an array, instead of having to use $.each
var methodNames = $.map( {
  bar: $.noop,
  baz: $.noop
}, function(func, name) {
  return name;
}); // -> // [ "bar", "baz" ]
Effects Improvements
Groups of animations are synced and will finish at the same time
Animations implement Deferreds, have a promise interface
// Traditonal callback will fire for each element in the collection
var stuff = $(".stuff").fadeIn( function() { });

// Use the promise interface to wait for all animations to complete and fire a single callback
$.when( stuff ).done(function( elements ) { });
requestAnimationFrame
Added in 1.6, pulled in 1.6.3 because of bad results with out-of-focus tabs/windows
New Deferred Methods
.always: one callback to rule them all!
.pipe: filttering and chaining Deferreds

jQuery 1.7: Event Improvements

New.on and .off methods unify .bind, .delegate, and .live

  • $("selector").on( events, fn)
    // Emulates 1.6 .bind
    // Attaches a handler directly to all .foo currently on the page when code is executed
    $(".foo").on("click", function(e) {})
    
  • $("selector").on( events, selector, fn)
    // Emulates 1.6 .delegate
    // Attaches a handler to all '.foo' currently on page that will trigger when a '.bar' inside one is clicked
    $(".foo").on("click", ".bar", function(e) {})
    
  • $(document).on( events, selector, fn)
    // Emulates 1.6 live
    // Attaches a handler to the document that will trigger when a '.bar' anywhere in the document is clicked
    $(document).on("click", ".bar", function(e) {})
    

jQuery 1.7: Event Improvements

"Want to learn more about the events rewrite? Check out my slides!" -Dave Methvin
  • Approximately 50% performance improvement on delivery of delegated events, because we're actually faster than native matchesSelector
  • Optimized for most common selectors: Permutations of tag#id.class
  • Old APIs aren't being removed for the forseeable future
  • But now they're just shortcuts longcuts to .on and .off

Event Property Hooks

  • Improved extensibility and speed of the jQuery.Event object
  • Granularity in controlling which native event properties are available
// Tells jQuery to include the 'dataTransfer' property on the event object you receive in handlers,
// but only on 'drop' events
jQuery.event.fixHooks.drop = { props: [ "dataTransfer" ] };
$(document).bind("drop", function(e) {
  console.log(e.dataTransfer);
  // Get the actual native event
  console.log( e.originalEvent )
})

jQuery 1.7: HTML5

This works in all browsers now - even IE6!

(It didn't used to)
$("#foo").append("<aside>Hello There!</aside>");
$("<footer>").appendTo( document.body );
  • Uses a cached, shimmed documentFragment when creating new elements
  • Does not take care of HTML5 elements in a page's static markup
  • You still have to use an HTML5 Shim or Modernizr for that
  • Still pretty legit

jQuery 1.7: Animations

Animation state is tracked internally

"Want to learn more about effects in jQuery and jQuery UI? Check out my slides!" -Corey Frang

1.6 - BAD!

http://jsfiddle.net/ajpiano/gqZL5/64/

1.7 - GOOD!

http://jsfiddle.net/ajpiano/gqZL5/65/

jQuery 1.7: Etc.

"Guess what? I also have a presentation about jQuery.Callbacks!" -Julian Aubourg

jQuery.Callbacks

  • The new base for $.Deferred
  • A low level interface for managing sets of handlers
  • You probably still only need regular jQuery events and Deferreds

AMD Support

// Using RequireJS
require( ["jquery"], function($) {
  $("#foo").addClass("bar");
})

Coming Up Next: jQuery 1.8

  • Major focus on beginning to slim down file size and eliminating cruft
  • Refactoring effects for maintainability and extensibility (CSS3 stuff? Vendor prefix helpers? Who knows?!!?!)
  • We'll be announcing a public call for features shortly

jQuery UI: What the dilly?

jQuery UI: #realtalk

Ethos

  • Extensibility and composability
  • Learn from our mistakes
  • Preserve backwards-compatibility while moving forward

Headaches

  • Release Cycle
  • Contribution Process
  • Interactions Plugins
  • Documentation
  • Project Scope

jQuery Mobile

"Yo AJ, we got this! Check out the slides from our recent Mobile keynote!" -Todd Parker and Scott Jehl
  • Was still decidedly in alpha one year ago, third (and final) RC available two days ago!
  • Recent focus in RCs has been performance, better HTML5 support
  • New Mobile Themeroller was just released, and it's really ballin'

Where We At?

UI and Mobile sitting in a tree?

  • jQuery UI is a library that provides its various widgets and interactions as a base
  • jQuery Mobile is a framework built on top of jQuery UI that dictates exactly how to structure your markup to get its enhancements
  • Over time, these projects will coalesce as "library" features, e.g., touch event support, from Mobile are incorporated into UI
  • This is not happening tomorrow

Adorable Baby Penguins Want To Know

How can we get involved with the jQuery project?

I'm Not A JavaScript Ninja (Yet)

That's OK - There's still a lot you can do if you want to help - and you might just learn a bit in the process.

Support

  • There are a lot of jQuery users out there - a lot of them need help!
  • The easiest, fastest way to have an impact!
  • A great way to get exposure to a diverse set of problems, broaden your familiarity with the API.
  • Debug in advance! Learn the solutions to problems before you encounter them yourself.

Where?

Documentation and Learning

  • Help EVERYBODY at once!
  • Existing docs are constantly being improved.
  • New features need documentation - learn how they work first!
Karl Swedberg - jQuery API Subteam Lead

Where?

People Who Make Websites

  • Websites are more than Just JavaScript™
  • Plugins site, learning site, new ThemeRoller...the list goes on
  • JavaScript and jQuery *do not have* to be your main gig for you to make a big impact.
  • Designers, backend developers (PHP, Ruby), copy editors... we don't really turn people away!

Infrastructure

Dan Heberden - Infrastructure Team Lead
  • 600,000 visits per day!
  • Those pages don't just wake up in the morning and serve themselves!
  • No, but seriously...
  • If server administration is "your thing," we want you you to do your thing!

Testing Tools

Jörn Zaefferer - Testing Tools Team Lead

Bug Triage

  • Between jQuery and jQuery UI, we've seen nearly 20,000 bugs filed.
  • Some of them are critical release blockers...
  • Some of them are obscure edge cases...(some that we Won't Fix)
  • And some of them are better read aloud...

Bug Triage, cont'd

  • Separate the wheat from the chaff
  • Keep an ear to the ground
  • THE ULTIMATE way to force yourself into the guts of jQuery...
  • ...and then you can actually start WORKING ON JQUERY CORE!

Hot Spots!

return;

Any questions?

whats happening is this thing happened i guess