jQuery 1.9 will be cleaning up the library's API, but even so there are still features that should be used with care--or avoided completely.

1. jQuery Features to Avoid
Dave Methvin
President, jQuery Foundation
jQuery Core Team Lead

2. jQuery Is Evolving
● There are things in jQuery that ...
○ make code fragile in large projects
○ make code hard to understand
○ make code SLOW
● ... so you should avoid them!
But how did this happen?

3. The World of jQuery 1.0

4. The World of jQuery 1.0
● January 2006 browser market share
76% Internet Explorer 5.5 and 6.0
13% Firefox 1.x
11% Others (Netscape, AOL)
● State of web development in 2006
○ HTML4, EcmaScript 3 (IE5 lacked try-catch)
○ AJAX term just coined in February 2005
○ Nearly all pages were full-reload design
○ JavaScript was generally non-essential

6. It's Gotten Complicated
● Single page applications -- LEAKS!
● Massive amounts of JavaScript
● Script breaks? Page doesn't work.
● MORE browsers and screen sizes!
○ IE6-10, Firefox 3.6-15, Chrome 20-22, Safari
3-6, plus mobile browser variants (Android,
iPhone/iPod, BlackBerry) which are often
old and never updated! Bonus: IE9 on Xbox!

7. What Most Devs Want From jQuery

8. Temptation to over Simplify
Wouldn't it be cool if jQuery...
● ...automagically figured out what kind of
AJAX/JSONP request to make and did the
"right thing" with the response?
● It's wonderful when it works
● Hard to debug when it doesn't
● Crazy hard to document

9. Complex APIs Make You Grumpy

10. jQuery Adapts
● Version 1.9 will remove some features
○ There is a compat plugin (cough, crutch)
● Version 2.0 removes support for IE 6/7/8
● We will maintain both 1.9 and 2.0 and
the APIs will be compatible
Result?
● Smaller size
● Better performance
● Fewer "trip hazards"

11. Avoid Deprecated Things!
● http://api.jquery.com/category/deprecated/
● Ineffective, Inefficient, Inadvisable ...

12. $.browser
● Sniffs around navigator.userAgent string
● Easily fooled and fragile
● Not future-proof -- bug in this version of
Chrome or IE is no guarantee of bug in
future Chrome or IE!
● Usually you want to feature detect
● Modernizr!

13. .toggle(fn1, fn2, fn3 ...)
● Cool method, bro
● Not really "core" functionality
● Lots of caveats in the docs
○ http://api.jquery.com/toggle-event/
○ "Practically reads like a suicide note"

14. jQuery is not JavaScript!

15. jQuery is not JavaScript!

16. jQuery is not JavaScript!

17. Avoid using jQuery...
● ...when JavaScript or W3C APIs are
more appropriate and performant
● Remember: jQuery is a DOM library
● All of JavaScript is yours to command
● jQuery tries to avoid getting in your way

18. Typical Checkbox Handler
$("#sameAsBillTo").on("click",
function(){
if ( $(this).is(":checked") ) {
$("#shipTo").hide();
} else {
$("#shipTo").show();
}
}
);

19. Use this, not $(this)
Instead of $(this) … Use this!
$(this).is(“:checked”) this.checked
$(this).prop(“checked”) this.checked
$(this).is(“:disabled”) this.disabled
$(this).attr(“id”) this.id
$(this).attr(“class”) this.className

20. Use this, not $(this)
Instead of $(this) … Use this!
$(this).is(“:checked”) this.checked
$(this).prop(“checked”) this.checked
$(this).is(“:disabled”) this.disabled
$(this).attr(“id”) this.id
$(this).attr(“class”) this.className
Up to 100 times faster!

21. Better Checkbox Handler
$("#sameAsBillTo").on("click",
function(){
$("#shipTo").toggle(!this.checked);
}
);

22. Use W3C CSS Selectors
Selector extension Use this (W3C CSS)
:checkbox, :radio, : input[type=X]
text, :image, :file, :
reset
:button button, input[type=button]
:header h1, h2, h3, h4, h5
:first :first-child or .first()
:last :last-child or .last()

24. Even More Stuff To Avoid...
● Features we can't remove
● Too frequently and commonly used
● Sometimes cute, but they'll bite you
● Especially bad on large projects

25. How Every Project Starts

26. What Every Project Becomes

27. $(html, props)
● You can say:
$("<p />")
.attr("class", "active")
.click(myClickHandler)
.text("Hello world")
.appendTo("body");
● Or, using $(html, props):
$("<p />", {
"class": "active",
click: myClickHandler,
text: "Hello world"
}).appendTo("body");

28. $(html, props) Pitfalls 1
● If the name is a method, it's called with
the (single) argument you provide:
$("<input />", {
type: "checkbox",
prop: { checked: true }
}).appendTo("body");
● No method with that name? It will be set
as an attribute!

29. $(html, props) Pitfalls 2
● Methods can collide with attributes!
$("<input />", {
type: "text",
size: "15" // uh-oh! $.fn.size()
attr: { size: 15 } // works
}).appendTo("body");
● This can happen with plugins someone
adds to the project at a later time

30. Action at a Distance

31. jQuery.ajaxOptions()
● Lets you change behavior of $.ajax()
● GLOBALLY
● Including any third-party plugins
● Most jQuery code expects the "normal"
defaults that are documented by the API

32. What does this do?
$.ajax({
url: "file.txt",
success: function(data){
alert(data);
}
});

33. How I Hosed Your AJAX
$.ajaxSetup({
type: "POST",
dataType: "json",
timeout: 500 // ms!
});

34. Avoiding Ajax Annihilation
Make your own $.ajax() wrapper:
function jsonRequest(options)
{
return $.ajax(
$.extend({
dataType: "json",
...
}, options)
);
}

35. Using $() to create HTML
● jQuery(), aka $(), accepts anything!
○ function (for document ready)
○ DOM element
○ Array of DOM elements
○ A plain JavaScript object
○ HTML element string and props (as we saw)
○ Arbitrary HTML string
○ Selector string and context

36. Using $() to create HTML
● jQuery(), aka $(), accepts anything!
○ function (for document ready)
○ DOM element
○ Array of DOM elements
○ A plain JavaScript object
○ HTML element string and props (as we saw)
○ Arbitrary HTML string
○ Selector string and context

37. The "Looks Like HTML" Rule

38. The "Looks Like HTML" Rule
"If a string is passed as the parameter to
$(), jQuery examines the string to see if it
looks like HTML (i.e., it has <tag...>
somewhere within the string). If not, the
string is interpreted as a selector
expression ..."
-- http://api.jquery.com/jQuery/#jQuery2

39. Some people, when confronted
with a problem, think "I know,
I'll use regular expressions."
Now they have two problems.
-- Jamie Zawinski

40. Cross site scripting (XSS)
● $() can run <script>s in HTML
● $() can set HTML inline event handlers
● Many sites use unvalidated input to $()
○ "http://mysite.com/page.html#someid"
○ $(window.location.hash) // #someid
○ Uh oh!
■ http://jsfiddle.net/dmethvin/uKYUP/

41. Rule Change for jQuery 1.9
● A string will only "look like HTML" if it
starts with a "<" character!
● Leading whitespace allowed? Maybe.
● Helps to prevent inadvertent script
interpretation in HTML
● Developers still must validate input!

42. Selector or HTML in 1.7?
1) "<p>Hello</p>" HTML
2) "Hello<p>there</p> world!" HTML
3) ".tip[title='Hello']" selector
4) ".tip[title='<b>Hello</b>']" HTML
5) "#footer .copyright" selector
6) "#ONE <b>Redskins</b> fan!" HTML

43. Selector or HTML in 1.9?
1) "<p>Hello</p>" HTML
2) "Hello<p>there</p> world!" selector
3) ".tip[title='Hello']" selector
4) ".tip[title='<b>Hello</b>']" selector
5) "#footer .copyright" selector
6) "#ONE <b>Redskins</b> fan!" selector
Note that many of these are NOT valid
CSS selectors and will throw an error.

44. Say what you want!
● In jQuery 1.8:
○ $.parseHTML(html, runScripts)
■ html is a string of arbitrary HTML
■ runScripts is a Boolean that says whether to
run inline or external scripts in the HTML;
defaults to false.
● Not a panacea for all XSS problems
○ http://jsfiddle.net/dmethvin/VNBDF/
● Needs documentation...sorry!

45. jQuery's Not Perfect
● Use the good parts
● Avoid the bad parts
● You'll be happier with jQuery
● Your co-workers will thank you!
You can find this presentation at:
http://slideshare.net/

46. Questions?
Twitter:
@davemethvin
Github:
dmethvin
IRC #jquery-dev:
DaveMethvin