State of jQuerySpring 2011

John Resig

State of the Project

Project

Spending Money

• All expenditures are handled via public voting

• What have we spent money on?

• Team Meetings

• Conferences

• Developer time

Sponsored Projects

• jQuery UI

• Scott G

• jQuery Mobile

• Filament Group

• jQuery UI Grid

• Richard, Joern, and Scott

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

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

jQuery Coreand 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.

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

Weekly Meeting Notes

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

Bugs

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

Roadmap

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

jQuery 1.6b1

• Whole bunch of improvements

• Rewrite of .attr()

.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; } }};

.prop()

• Split apart attr/prop:

• .attr(“selected”) -> “selected”

• .prop(“selectedIndex”) -> 1

• .prop(“selected”) -> true

.attr() Performance

• This rewrite also yields performance increases of around 85%!

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!

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

:focus Selector

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

Faster Triggering and Data

• Triggering performance has been improved dramatically

• Which increases the performance of .data() as a result!

• .data() is around 115% faster!

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()

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)

requestAnimationFrame

• New feature provided by the browser

• Makes it easier to create high performance, smoother, animations

$.map( Object )

• $.map( Array ) worked before

• Now $.map( Object ) can map properties to other values

• $.map({ test: 1 }, function( name, value ) { return value + 1;});

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

Relative .css()

• Bringing the functionality back from .animate():

• .css( “height”, “+=10” )

• Updates the height relative to the current height

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

Existing Plugins

• Into the jQuery Core team:

• Color, Mousewheel, Easing, CSS Hooks

• Into the jQuery UI team:

• jQuery Templates

jQuery Mobile

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

Better Browser Support

• Firefox Mobile

• Opera Mobile and Mini

• Windows Phone 7

• (and Internet Explorer itself!)

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

Rewrites

• Faster performance across the board

• All widgets using jQuery UI widget factory

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!)

Media Query Helpers

• New classes: .portrait, .landscape

• label.ui-input-text { display: block; }.min-width-480px label.ui-input-text { display: inline-block; }

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>

“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.

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.

Enjoy the Conference!

• More information:

• http://blog.jquery.com/ (jQuery 1.6b1)

• http://jquerymobile.com/