jQuery Features to Avoid
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery Features to Avoid

on

  • 1,128 views

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.

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.

Statistics

Views

Total Views
1,128
Views on SlideShare
1,128
Embed Views
0

Actions

Likes
1
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Features to Avoid Presentation Transcript

  • 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
  • 5. Its Gotten Complicated● Single page applications -- LEAKS!● Massive amounts of JavaScript● Script breaks? Page doesnt 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!
  • 6. What Most Devs Want From jQuery
  • 7. Temptation to over SimplifyWouldnt it be cool if jQuery...● ...automagically figured out what kind of AJAX/JSONP request to make and did the "right thing" with the response?● Its wonderful when it works● Hard to debug when it doesnt● Crazy hard to document
  • 8. Complex APIs Make You Grumpy
  • 9. 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"
  • 10. Avoid Deprecated Things!● http://api.jquery.com/category/deprecated/● Ineffective, Inefficient, Inadvisable ...
  • 11. $.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!
  • 12. .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"
  • 13. jQuery is not JavaScript!
  • 14. jQuery is not JavaScript!
  • 15. jQuery is not JavaScript!
  • 16. 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
  • 17. Typical Checkbox Handler$("#sameAsBillTo").on("click", function(){ if ( $(this).is(":checked") ) { $("#shipTo").hide(); } else { $("#shipTo").show(); } });
  • 18. 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
  • 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 Up to 100 times faster!
  • 20. Better Checkbox Handler$("#sameAsBillTo").on("click", function(){ $("#shipTo").toggle(!this.checked); });
  • 21. Use W3C CSS SelectorsSelector 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()
  • 22. Even More Stuff To Avoid...● Features we cant remove● Too frequently and commonly used● Sometimes cute, but theyll bite you● Especially bad on large projects
  • 23. How Every Project Starts
  • 24. What Every Project Becomes
  • 25. $(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");
  • 26. $(html, props) Pitfalls 1● If the name is a method, its 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!
  • 27. $(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
  • 28. Action at a Distance
  • 29. 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
  • 30. What does this do? $.ajax({ url: "file.txt", success: function(data){ alert(data); } });
  • 31. How I Hosed Your AJAX $.ajaxSetup({ type: "POST", dataType: "json", timeout: 500 // ms! });
  • 32. Avoiding Ajax AnnihilationMake your own $.ajax() wrapper: function jsonRequest(options) { return $.ajax( $.extend({ dataType: "json", ... }, options) ); }
  • 33. 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
  • 34. 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
  • 35. The "Looks Like HTML" Rule
  • 36. The "Looks Like HTML" Rule"If a string is passed as the parameter to$(), jQuery examines the string to see if itlooks like HTML (i.e., it has <tag...>somewhere within the string). If not, thestring is interpreted as a selectorexpression ..." -- http://api.jquery.com/jQuery/#jQuery2
  • 37. Some people, when confrontedwith a problem, think "I know,Ill use regular expressions."Now they have two problems. -- Jamie Zawinski
  • 38. 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/
  • 39. 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!
  • 40. Selector or HTML in 1.7?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
  • 41. Selector or HTML in 1.9?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.
  • 42. 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!
  • 43. jQuerys Not Perfect● Use the good parts● Avoid the bad parts● Youll be happier with jQuery● Your co-workers will thank you! You can find this presentation at: http://slideshare.net/
  • 44. Questions? Twitter: @davemethvin Github: dmethvin IRC #jquery-dev: DaveMethvin