Keynote talk given at the 2011 jQuery Conference in the SF Valley.

1. State of jQuery
Spring 2011
John Resig

2. State of the Project

5. Project

6. Spending Money
• All expenditures are handled via public
voting
• What have we spent money on?
• Team Meetings
• Conferences
• Developer time

7. Sponsored Projects
• jQuery UI
• Scott G
• jQuery Mobile
• Filament Group
• jQuery UI Grid
• Richard, Joern, and Scott

8. Spending Money
• What will we be spending money on?
• Getting more developer time to train and
mentor new developers
• Design work and jQuery Mobile
• More team meetings and conferences

9. New Team and Eboard
• Recently Joined:
• Adam Sontag
• Working with the UI and Bug Triage
teams
• Dan Heberden
• Working with Infrastructure and Bug
Triage team

10. jQuery Core
and Bug Triage Teams
• We’ve added a number of new committers
• Dave Methvin (dmethvin)
• Julian Aubourg (jaubourg)
• Anton Matzneller (jitter)
• Timmy Willison (timwillison)
• We also got a ton of help from Colin Snover
in organizing the team.

11. New Core
Development Process
• Weekly, public, team meetings
• Defined release dates and schedule
• Frequent discussion in #jquery-dev (IRC)
• Active participation of the committers
and the bug triage team

12. Weekly Meeting Notes

13. Bug Triage Team
• Responsible for processing all the bugs in
the bug tracker
• Make sure test cases are filed
• Work through pulls in the Github pull
request queue
• Make sure the test suite is passing

14. Bugs

15. Roadmap Decisions
• Put up a public form for people to submit
possible feature suggestions
• The team works through all the feature
suggestions and creates a list
• All of this is done in a publicly and
discussed in a public meeting

16. Roadmap

17. New Releases
• jQuery 1.4.4, 1.5, 1.5.1, 1.5.2, and 1.6!
• Official Plugins Status
• jQuery Mobile Alphas 2, 3, and 4

18. jQuery 1.6b1
• Whole bunch of improvements
• Rewrite of .attr()

19. .attr() Rewrite
• Provide a full series of .attr() hooks
• jQuery.attrHooks.selected = {
set: function( elem, value ) {
if ( value === false ) {
jQuery.removeAttr(elem, “selected”);
return value;
}
}
};

20. .prop()
• Split apart attr/prop:
• .attr(“selected”) -> “selected”
• .prop(“selectedIndex”) -> 1
• .prop(“selected”) -> true

21. .attr() Performance
• This rewrite also yields performance
increases of around 85%!

22. valHooks
• Similar to cssHooks and valHooks but
handles .val() as well
• Inputs tend to have different support
depending upon the platform
• Getting value is over 147% faster!

23. Better Support Tests
• Interesting technique:
• document.createElement(“body”)
• Do it before the DOM is ready!
• You can do visual DOM tests before
they’re displayed
• Prevents flash of unstyled content

24. :focus Selector
• Make sure :focus works on all platforms:
$(“input:focus”) -> Find the focused input

25. Faster Triggering and
Data
• Triggering performance has been improved
dramatically
• Which increases the performance
of .data() as a result!
• .data() is around 115% faster!

26. Convenient Methods
for Checking Elements
• .is( Element )
• Simpler way to check equality
• .filter( Element )
• Check if a set has an element
• .find( Element )
• Equivalent to .contains()

27. Synced Animations
• Make it possible to ensure that animations
run at the same time
• Yielding animations that are less “glitchy”
• Animations are all run at the same timer
cluster (timers tend to run every 15ms or
so, depending upon the browser)

28. requestAnimationFrame
• New feature provided by the browser
• Makes it easier to create high
performance, smoother, animations

29. $.map( Object )
• $.map( Array ) worked before
• Now $.map( Object ) can map properties
to other values
• $.map({ test: 1 }, function( name, value ) {
return value + 1;
});

30. Use Function.prototype.bind
• Use the method for jQuery.proxy()
• Utilize the browsers native binding
mechanism
• Force the `this` of a function to be a
particular object

31. Relative .css()
• Bringing the functionality back
from .animate():
• .css( “height”, “+=10” )
• Updates the height relative to the
current height

32. Official Plugins
• We’ve made a change in policy regarding
official plugins
• Official plugins will be maintained by the
jQuery team (UI, Core)
• Only plugins that fit into those teams will
be supported

33. Existing Plugins
• Into the jQuery Core team:
• Color, Mousewheel, Easing, CSS Hooks
• Into the jQuery UI team:
• jQuery Templates

34. jQuery Mobile

35. Response
• Response has been overwhelmingly positive
• We’re getting support from major mobile
browsers
• RIM, Nokia, IE Mobile
• And major companies:
• Microsoft, Adobe, Brightcove, BBC

38. Better Browser
Support
• Firefox Mobile
• Opera Mobile and Mini
• Windows Phone 7
• (and Internet Explorer itself!)

39. What’s Landed?
• Tons of bug fixes and enhancements
• Ajax form handling
• Unit Tests (!)
• Excellent keyboard and accessibility support
• Touch optimized datepicker
• Working great in PhoneGap

40. Rewrites
• Faster performance across the board
• All widgets using jQuery UI widget factory

41. Navigation Refactored
• Rewrite of core navigation model
• Including using the new pushState!
• history.pushState(stateObj, "page 2",
"bar.html");
• URL now becomes: /bar.html
• (but an actual page load isn’t done!)

42. Media Query Helpers
• New classes: .portrait, .landscape
• label.ui-input-text {
display: block;
}
.min-width-480px label.ui-input-text {
display: inline-block;
}

43. Namespaced data-
• jQuery Mobile is predominantly configured
through data- attributes
• <div data-role=”page”></div>
• You can now namespace the attributes, if
you wish.
• <div data-jqm-role=”page”></div>

44. “Fast Click”
• It’s surprisingly hard to make click, and
other mouse events, work as fast as
possible
• There are a number of assumptions in
place regarding touch events that make this
hard.
• We now fix this straight in jQuery Mobile.

45. Mobile Beta
• jQuery Mobile Beta 1 is the next upcoming
release!
• Even though it’s an alpha many people are
already deploying applications that work
great.

46. Enjoy the Conference!
• More information:
• http://blog.jquery.com/ (jQuery 1.6b1)
• http://jquerymobile.com/