Your SlideShare is downloading. ×
jQuery Keynote - Spring 2011
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

jQuery Keynote - Spring 2011


Published on

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

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

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. State of jQuery Spring 2011 John Resig
  • 2. State of the Project
  • 3. Project
  • 4. Spending Money• All expenditures are handled via public voting• What have we spent money on? • Team Meetings • Conferences • Developer time
  • 5. Sponsored Projects• jQuery UI • Scott G• jQuery Mobile • Filament Group• jQuery UI Grid • Richard, Joern, and Scott
  • 6. 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
  • 7. 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
  • 8. 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.
  • 9. New CoreDevelopment 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
  • 10. Weekly Meeting Notes
  • 11. 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
  • 12. Bugs
  • 13. 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
  • 14. Roadmap
  • 15. 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
  • 16. jQuery 1.6b1• Whole bunch of improvements • Rewrite of .attr()
  • 17. .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; } } };
  • 18. .prop()• Split apart attr/prop: • .attr(“selected”) -> “selected” • .prop(“selectedIndex”) -> 1 • .prop(“selected”) -> true
  • 19. .attr() Performance• This rewrite also yields performance increases of around 85%!
  • 20. 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!
  • 21. 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
  • 22. :focus Selector• Make sure :focus works on all platforms: $(“input:focus”) -> Find the focused input
  • 23. Faster Triggering and Data• Triggering performance has been improved dramatically • Which increases the performance of .data() as a result!• .data() is around 115% faster!
  • 24. Convenient Methodsfor Checking Elements• .is( Element ) • Simpler way to check equality• .filter( Element ) • Check if a set has an element• .find( Element ) • Equivalent to .contains()
  • 25. 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)
  • 26. requestAnimationFrame• New feature provided by the browser• Makes it easier to create high performance, smoother, animations
  • 27. $.map( Object )• $.map( Array ) worked before• Now $.map( Object ) can map properties to other values• $.map({ test: 1 }, function( name, value ) { return value + 1; });
  • 28. 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
  • 29. Relative .css()• Bringing the functionality back from .animate(): • .css( “height”, “+=10” ) • Updates the height relative to the current height
  • 30. 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
  • 31. Existing Plugins• Into the jQuery Core team: • Color, Mousewheel, Easing, CSS Hooks• Into the jQuery UI team: • jQuery Templates
  • 32. jQuery Mobile
  • 33. 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
  • 34. Better Browser Support• Firefox Mobile• Opera Mobile and Mini• Windows Phone 7 • (and Internet Explorer itself!)
  • 35. 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
  • 36. Rewrites• Faster performance across the board• All widgets using jQuery UI widget factory
  • 37. 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!)
  • 38. Media Query Helpers• New classes: .portrait, .landscape• label.ui-input-text { display: block; } .min-width-480px label.ui-input-text { display: inline-block; }
  • 39. 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>
  • 40. “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.
  • 41. 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.
  • 42. Enjoy the Conference!• More information: • (jQuery 1.6b1) •