jQuery and Standards                  John Resig http://ejohn.org/ - http://twitter.com/jeresig
jQuery✦   A JavaScript library designed to hide    painful cross-browser compatibility issues    while presenting a solid,...
Simple API✦   $(“div > span”).addClass(“foo”);    ✦ “Find some elements”    ✦ “Do something with them”✦   Makes complex ma...
Space✦   Highly competitive space✦   Released Jan. 2006 - already a dominant    player: Prototype JavaScript Library✦   (B...
Specifications✦   A few specifications that matter to us:    ✦ DOM    ✦ HTML    ✦ CSS    ✦ ECMAScript✦   DOM more than anyth...
Concerns✦   Performance.✦   Performance.✦   Performance.✦   Usability.✦   Any standards/browser addition that gives    us ...
New Standards We’ve Used✦   Selectors API    ✦ querySelectorAll✦   Selectors API 2    ✦ matchesSelector✦   Animation Timin...
Selectors API✦   A bit of a failure✦   Didn’t listen to the needs of libraries✦   Missed a number of important features/  ...
Matches Selector✦   Selectors API 2 gave us matchesSelector✦   We petitioned browsers to implement this✦   They did, then ...
Smooth Animation✦   requestAnimationFrame was created✦   Scales animations based upon load✦   Unfortunately this broke use...
Needs
HTML string -> DOM support✦   No good way to do this now✦   Have to create a DOM element and use    innerHTML✦   Clunky an...
Access to event callbacks✦   We want to be able to remove individual    callbacks✦   We want to be able to clone callbacks...
An event for when stylesheets load✦   Right now we have an event for DOM    loaded✦   And an event for window loaded✦   Bu...
Will an element fire an event?✦   For example - if I have a <form> element I    want to be able to ask it:    ✦ “Will you e...
Unique ID for DOM nodes✦   We have to manage callbacks and data that    we attach to DOM nodes✦   To do this we have to as...
“Late Events”✦   There is no way to ask the browser:    ✦ “Did an event [foo] already fire on this      element?”✦   For ex...
Fast DOM mutation events✦   I know this is being worked on right now    (yay!)✦   A way to have fast DOM mutation events  ...
mouseenter/mouseleave✦   Internet Explorer provides these events✦   They’re terribly useful (make it so that you    don’t ...
getComputedStyle✦   A complete mess right now✦   There is no consensus over what results    should be returned and when✦  ...
isCSSAuto✦   There is no way of determining if a CSS    property is currently set to “auto”✦   This should be resolved, ma...
A way to sanely toggle visibility✦   If we’re given an element that is display:    none and we want to make it visible    ...
contains() method✦   We have compareDocumentPosition✦   This is OK but contains() is very easy to    use (in IE)✦   Easy e...
Better way of sorting nodes✦   We have to use    compareDocumentPosition now✦   This is very very slow✦   A numerical inde...
Is a node in an XML document✦   A number of behaviors change when you’re    in an XML document✦   (IDs no longer resolve, ...
Support Tests
Questions?✦   Questions?    ✦ jeresig@gmail.com    ✦ http://ejohn.org/    ✦ http://twitter.com/jeresig
jQuery and the W3C
jQuery and the W3C
Upcoming SlideShare
Loading in...5
×

jQuery and the W3C

5,451

Published on

A talk that I gave to the W3C in September 2011, talking about some of the needs that the project has.

Published in: Technology
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,451
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
46
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

jQuery and the W3C

  1. 1. jQuery and Standards John Resig http://ejohn.org/ - http://twitter.com/jeresig
  2. 2. jQuery✦ A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
  3. 3. Simple API✦ $(“div > span”).addClass(“foo”); ✦ “Find some elements” ✦ “Do something with them”✦ Makes complex manipulation of web pages simple
  4. 4. Space✦ Highly competitive space✦ Released Jan. 2006 - already a dominant player: Prototype JavaScript Library✦ (Bundled with Ruby on Rails, had some nice coattail growth.)✦ Other libraries: Dojo, Yahoo UI, MooTools
  5. 5. Specifications✦ A few specifications that matter to us: ✦ DOM ✦ HTML ✦ CSS ✦ ECMAScript✦ DOM more than anything else.
  6. 6. Concerns✦ Performance.✦ Performance.✦ Performance.✦ Usability.✦ Any standards/browser addition that gives us performance benefits we’ll leap on.
  7. 7. New Standards We’ve Used✦ Selectors API ✦ querySelectorAll✦ Selectors API 2 ✦ matchesSelector✦ Animation Timing ✦ requestAnimationFrame✦ ECMAScript ✦ bind
  8. 8. Selectors API✦ A bit of a failure✦ Didn’t listen to the needs of libraries✦ Missed a number of important features/ bug fixes: ✦ Contextual searching is messed up ✦ Error reporting is non-existent ✦ Implementations are inconsistent✦ But it’s very fast, so we use it.
  9. 9. Matches Selector✦ Selectors API 2 gave us matchesSelector✦ We petitioned browsers to implement this✦ They did, then it became a standard✦ Makes our event delegation much faster
  10. 10. Smooth Animation✦ requestAnimationFrame was created✦ Scales animations based upon load✦ Unfortunately this broke user expectations (expected certain frame rates)✦ We just backed it out, will have to try again later
  11. 11. Needs
  12. 12. HTML string -> DOM support✦ No good way to do this now✦ Have to create a DOM element and use innerHTML✦ Clunky and quite slow✦ We want: ✦ someMethod(“<b>stuff</b>”) -> ✦ [ <b> ]
  13. 13. Access to event callbacks✦ We want to be able to remove individual callbacks✦ We want to be able to clone callbacks✦ We want to be able to trigger specific callbacks✦ All of this requires access to callbacks
  14. 14. An event for when stylesheets load✦ Right now we have an event for DOM loaded✦ And an event for window loaded✦ But no event for when all the stylesheets load (important for looking at computed styles)
  15. 15. Will an element fire an event?✦ For example - if I have a <form> element I want to be able to ask it: ✦ “Will you ever, natively, trigger a submit event?” (true)✦ If I ask a <div> if it will trigger a submit event, it will return false.
  16. 16. Unique ID for DOM nodes✦ We have to manage callbacks and data that we attach to DOM nodes✦ To do this we have to assign the nodes a unique ID✦ It’d be much better to have a property that took care of this for us
  17. 17. “Late Events”✦ There is no way to ask the browser: ✦ “Did an event [foo] already fire on this element?”✦ For example: ✦ Did the load event already fire on window? ✦ Did the submit event already fire on this form? ✦ etc.
  18. 18. Fast DOM mutation events✦ I know this is being worked on right now (yay!)✦ A way to have fast DOM mutation events would be awesome✦ It could allow for some really slick restructuring of applications✦ And make it easier for us to possibly do caching
  19. 19. mouseenter/mouseleave✦ Internet Explorer provides these events✦ They’re terribly useful (make it so that you don’t have to deal with event bubbling weirdness)✦ Should be in browsers✦ Need to verify DOM 3 Events spec
  20. 20. getComputedStyle✦ A complete mess right now✦ There is no consensus over what results should be returned and when✦ There needs to be something declared here - probably a joint venture between the CSS and DOM working groups.✦ Test suite for getComputedStyle
  21. 21. isCSSAuto✦ There is no way of determining if a CSS property is currently set to “auto”✦ This should be resolved, makes it much easier to do some types of animations
  22. 22. A way to sanely toggle visibility✦ If we’re given an element that is display: none and we want to make it visible (display: block, perhaps)✦ It is very hard to determine what the right “visible” style should be✦ Especially if someone does: ✦ div { display: none; }✦ Hint: It involves nasty use of iframes
  23. 23. contains() method✦ We have compareDocumentPosition✦ This is OK but contains() is very easy to use (in IE)✦ Easy enough to implement, should be a standard
  24. 24. Better way of sorting nodes✦ We have to use compareDocumentPosition now✦ This is very very slow✦ A numerical index property on nodes would be very useful (like in IE)
  25. 25. Is a node in an XML document✦ A number of behaviors change when you’re in an XML document✦ (IDs no longer resolve, some properties may not exist - like innerHTML, etc.)✦ A way to determine if we’re working against an XML document would help
  26. 26. Support Tests
  27. 27. Questions?✦ Questions? ✦ jeresig@gmail.com ✦ http://ejohn.org/ ✦ http://twitter.com/jeresig
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×