jQuery Features to AvoidDave Methvin

President, jQuery FoundationjQuery Core Team Lead

● 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?

jQuery Is Evolving

The World of jQuery 1.0

● January 2006 browser market share76% Internet Explorer 5.5 and 6.013% Firefox 1.x11% 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

The World of jQuery 1.0

● 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!

It's Gotten Complicated

What Most Devs Want From jQuery

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

Temptation to over Simplify

Complex APIs Make You Grumpy

● 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 compatibleResult?

● Smaller size ● Better performance● Fewer "trip hazards"

jQuery Adapts

● http://api.jquery.com/category/deprecated/● Ineffective, Inefficient, Inadvisable ...

Avoid Deprecated Things!

● 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!

$.browser

● 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"

.toggle(fn1, fn2, fn3 ...)

jQuery is not JavaScript!

jQuery is not JavaScript!

jQuery is not JavaScript!

● ...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

Avoid using jQuery...

$("#sameAsBillTo").on("click",function(){ if ( $(this).is(":checked") ) {

$("#shipTo").hide();} else {

$("#shipTo").show(); }}

);

Typical Checkbox Handler

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

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!

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

Better Checkbox Handler

Use W3C CSS SelectorsSelector extension Use this (W3C CSS)

:checkbox, :radio, :

text, :image, :file, :

reset

input[type=X]

:button button, input[type=button]

:header h1, h2, h3, h4, h5

:first :first-child or .first()

:last :last-child or .last()

● Features we can't remove● Too frequently and commonly used● Sometimes cute, but they'll bite you● Especially bad on large projects

Even More Stuff To Avoid...

How Every Project Starts

What Every Project Becomes

● 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");

$(html, props)

● 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!

$(html, props) Pitfalls 1

● 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

$(html, props) Pitfalls 2

Action at a Distance

● Lets you change behavior of $.ajax()

● G L O B A L L Y● Including any third-party plugins● Most jQuery code expects the "normal"

defaults that are documented by the API

jQuery.ajaxOptions()

$.ajax({url: "file.txt",success: function(data){alert(data);

}});

What does this do?

$.ajaxSetup({type: "POST",dataType: "json",timeout: 500 // ms!

});

How I Hosed Your AJAX

Make your own $.ajax() wrapper:function jsonRequest(options){ return $.ajax( $.extend({

dataType: "json", ...

}, options) );}

Avoiding Ajax Annihilation

● 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

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

Using $() to create HTML

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

The "Looks Like HTML" Rule

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

-- Jamie Zawinski

● $() 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/

Cross site scripting (XSS)

● 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!

Rule Change for jQuery 1.9

1) "<p>Hello</p>" HTML2) "Hello<p>there</p> world!" HTML3) ".tip[title='Hello']" selector4) ".tip[title='<b>Hello</b>']" HTML5) "#footer .copyright" selector6) "#ONE <b>Redskins</b> fan!" HTML

Selector or HTML in 1.7?

1) "<p>Hello</p>" HTML2) "Hello<p>there</p> world!" selector3) ".tip[title='Hello']" selector4) ".tip[title='<b>Hello</b>']" selector5) "#footer .copyright" selector6) "#ONE <b>Redskins</b> fan!" selector

Note that many of these are NOT valid CSS selectors and will throw an error.

Selector or HTML in 1.9?

● 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!

Say what you want!

● 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/

jQuery's Not Perfect

Twitter: @davemethvin

Github: dmethvin

IRC #jquery-dev: DaveMethvin

Questions?