jQuery and the W3C

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, 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

Speciﬁcations
✦ A few speciﬁcations 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 beneﬁts 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 ﬁxes:
✦ 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>stuﬀ</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 speciﬁc
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 ﬁre 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?
✦ jeresig@gmail.com
✦ http://ejohn.org/
✦ http://twitter.com/jeresig

jQuery and the W3C

More Related Content

What's hot (20)

Similar to jQuery and the W3C (20)

More from jeresig (20)

Recently uploaded (20)

jQuery and the W3C