jquery recommendations to the w3c (2011)
TRANSCRIPT
jQuery and StandardsJohn Resig
http://ejohn.org/ - http://twitter.com/jeresig
jQuery✦ A JavaScript library designed to hide
painful cross-browser compatibility issues while presenting a solid, usable, API.
Simple API✦ $(“div > span”).addClass(“foo”);
✦ “Find some elements”✦ “Do something with them”
✦ Makes complex manipulation of web pages simple
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
Specifications✦ A few specifications that matter to us:
✦ DOM✦ HTML✦ CSS✦ ECMAScript
✦ DOM more than anything else.
Concerns✦ Performance.✦ Performance.✦ Performance.✦ Usability.✦ Any standards/browser addition that gives
us performance benefits we’ll leap on.
New Standards We’ve Used✦ Selectors API
✦ querySelectorAll✦ Selectors API 2
✦ matchesSelector✦ Animation Timing
✦ requestAnimationFrame✦ ECMAScript
✦ bind
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.
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
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
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> ]
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
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)
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.
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
“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.
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
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
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
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
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
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
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)
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
Questions?✦ Questions?
✦ [email protected]✦ http://ejohn.org/✦ http://twitter.com/jeresig