The document discusses the evolution of jQuery and highlights features developers should avoid to prevent fragile, hard-to-understand, and slow code in large projects. It emphasizes the importance of using native JavaScript or W3C APIs when appropriate, and advances in new jQuery versions aimed at improving performance and user experience, like removing support for older browsers and deprecated features. The document also raises awareness about potential pitfalls in using jQuery, particularly around AJAX operations and creating HTML, urging developers to validate input and stick to best practices.

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