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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
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) •