jQuery Keynote - Spring 2011


Published on

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

No notes for slide

jQuery Keynote - Spring 2011

  1. 1. State of jQuery Spring 2011 John Resig
  2. 2. State of the Project
  3. 3. Project
  4. 4. Spending Money• All expenditures are handled via public voting• What have we spent money on? • Team Meetings • Conferences • Developer time
  5. 5. Sponsored Projects• jQuery UI • Scott G• jQuery Mobile • Filament Group• jQuery UI Grid • Richard, Joern, and Scott
  6. 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. 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. 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. 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. 10. Weekly Meeting Notes
  11. 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. 12. Bugs
  13. 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. 14. Roadmap
  15. 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. 16. jQuery 1.6b1• Whole bunch of improvements • Rewrite of .attr()
  17. 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. 18. .prop()• Split apart attr/prop: • .attr(“selected”) -> “selected” • .prop(“selectedIndex”) -> 1 • .prop(“selected”) -> true
  19. 19. .attr() Performance• This rewrite also yields performance increases of around 85%!
  20. 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. 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. 22. :focus Selector• Make sure :focus works on all platforms: $(“input:focus”) -> Find the focused input
  23. 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. 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. 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. 26. requestAnimationFrame• New feature provided by the browser• Makes it easier to create high performance, smoother, animations
  27. 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. 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. 29. Relative .css()• Bringing the functionality back from .animate(): • .css( “height”, “+=10” ) • Updates the height relative to the current height
  30. 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. 31. Existing Plugins• Into the jQuery Core team: • Color, Mousewheel, Easing, CSS Hooks• Into the jQuery UI team: • jQuery Templates
  32. 32. jQuery Mobile
  33. 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. 34. Better Browser Support• Firefox Mobile• Opera Mobile and Mini• Windows Phone 7 • (and Internet Explorer itself!)
  35. 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. 36. Rewrites• Faster performance across the board• All widgets using jQuery UI widget factory
  37. 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. 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. 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. 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. 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. 42. Enjoy the Conference!• More information: • http://blog.jquery.com/ (jQuery 1.6b1) • http://jquerymobile.com/