SlideShare a Scribd company logo
jQuery Features to Avoid
                          Dave Methvin
          President, jQuery Foundation
                jQuery Core Team Lead
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?
The World of jQuery 1.0
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
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!
What Most Devs Want From jQuery
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
Complex APIs Make You Grumpy
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"
Avoid Deprecated Things!
● http://api.jquery.com/category/deprecated/
● Ineffective, Inefficient, Inadvisable ...
$.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!
.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"
jQuery is not JavaScript!
jQuery is not JavaScript!
jQuery is not JavaScript!
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
Typical Checkbox Handler
$("#sameAsBillTo").on("click",
   function(){
     if ( $(this).is(":checked") ) {
       $("#shipTo").hide();
     } else {
       $("#shipTo").show();
     }
   }
);
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!
Better Checkbox Handler

$("#sameAsBillTo").on("click",
 function(){
   $("#shipTo").toggle(!this.checked);
 }
);
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()
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
How Every Project Starts
What Every Project Becomes
$(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");
$(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!
$(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
Action at a Distance
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
What does this do?
   $.ajax({
     url: "file.txt",
     success: function(data){
       alert(data);
     }
   });
How I Hosed Your AJAX
  $.ajaxSetup({
    type: "POST",
    dataType: "json",
    timeout: 500 // ms!
  });
Avoiding Ajax Annihilation
Make your own $.ajax() wrapper:
  function jsonRequest(options)
  {
    return $.ajax(
       $.extend({
          dataType: "json",
          ...
       }, options)
    );
  }
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
● 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
The "Looks Like HTML" Rule
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
Some people, when confronted
with a problem, think "I know,
I'll use regular expressions."
Now they have two problems.

            -- Jamie Zawinski
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/
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!
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
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.
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!
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/
Questions?
 Twitter:
  @davemethvin

 Github:
  dmethvin

 IRC #jquery-dev:
   DaveMethvin

More Related Content

What's hot

jQuery
jQueryjQuery
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
Marc Grabanski
 
jQuery
jQueryjQuery
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
NexThoughts Technologies
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
Rod Johnson
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
Mark Rackley
 
Getting the Most Out of jQuery Widgets
Getting the Most Out of jQuery WidgetsGetting the Most Out of jQuery Widgets
Getting the Most Out of jQuery Widgets
velveeta_512
 
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and Bling
Doug Neiner
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
manugoel2003
 
The jQuery Library
The  jQuery LibraryThe  jQuery Library
The jQuery Library
LearnNowOnline
 
jQuery
jQueryjQuery
jQuery
Vishwa Mohan
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
Arwid Bancewicz
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Zeeshan Khan
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Gunjan Kumar
 
FuncUnit
FuncUnitFuncUnit
FuncUnit
Brian Moschel
 
D3.js and SVG
D3.js and SVGD3.js and SVG
D3.js and SVG
Karol Depka Pradzinski
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
Simon Willison
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
Remy Sharp
 

What's hot (20)

jQuery
jQueryjQuery
jQuery
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
jQuery
jQueryjQuery
jQuery
 
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
SharePoint and jQuery Essentials
SharePoint and jQuery EssentialsSharePoint and jQuery Essentials
SharePoint and jQuery Essentials
 
Getting the Most Out of jQuery Widgets
Getting the Most Out of jQuery WidgetsGetting the Most Out of jQuery Widgets
Getting the Most Out of jQuery Widgets
 
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and Bling
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
The jQuery Library
The  jQuery LibraryThe  jQuery Library
The jQuery Library
 
jQuery
jQueryjQuery
jQuery
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
FuncUnit
FuncUnitFuncUnit
FuncUnit
 
D3.js and SVG
D3.js and SVGD3.js and SVG
D3.js and SVG
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
 

Similar to jQuery Features to Avoid

The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
colinbdclark
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
Salvatore Fazio
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
Simon Willison
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
DanWooster1
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsSharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
jeresig
 
jQuery for web development
jQuery for web developmentjQuery for web development
jQuery for web development
iFour Institute - Sustainable Learning
 
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
jeresig
 
JavaScript Libraries (@Media)
JavaScript Libraries (@Media)JavaScript Libraries (@Media)
JavaScript Libraries (@Media)
jeresig
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4
alexsaves
 
jQuery
jQueryjQuery
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK
 
Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology
PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK
 
JS class slides (2016)
JS class slides (2016)JS class slides (2016)
JS class slides (2016)
Yves-Emmanuel Jutard
 
JS Class 2016
JS Class 2016JS Class 2016
JS Class 2016
Yves-Emmanuel Jutard
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
Stijn Van Minnebruggen
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
Dave Artz
 
前端概述
前端概述前端概述
前端概述
Ethan Zhang
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
BlackCatWeb
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Nagaraju Sangam
 

Similar to jQuery Features to Avoid (20)

The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsSharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
 
jQuery for web development
jQuery for web developmentjQuery for web development
jQuery for web development
 
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
 
JavaScript Libraries (@Media)
JavaScript Libraries (@Media)JavaScript Libraries (@Media)
JavaScript Libraries (@Media)
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4
 
jQuery
jQueryjQuery
jQuery
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
 
Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology
 
JS class slides (2016)
JS class slides (2016)JS class slides (2016)
JS class slides (2016)
 
JS Class 2016
JS Class 2016JS Class 2016
JS Class 2016
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
 
前端概述
前端概述前端概述
前端概述
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 

More from dmethvin

HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015
dmethvin
 
jQuery Foot-Gun Features
jQuery Foot-Gun FeaturesjQuery Foot-Gun Features
jQuery Foot-Gun Features
dmethvin
 
jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014
dmethvin
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
dmethvin
 
jQuery Conference Toronto
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
dmethvin
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
dmethvin
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
dmethvin
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
dmethvin
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
dmethvin
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
dmethvin
 
jQuery 1.7 Events
jQuery 1.7 EventsjQuery 1.7 Events
jQuery 1.7 Events
dmethvin
 

More from dmethvin (12)

HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015
 
jQuery Foot-Gun Features
jQuery Foot-Gun FeaturesjQuery Foot-Gun Features
jQuery Foot-Gun Features
 
jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
 
jQuery Conference Toronto
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
 
jQuery 1.7 Events
jQuery 1.7 EventsjQuery 1.7 Events
jQuery 1.7 Events
 

Recently uploaded

"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
christinelarrosa
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
DianaGray10
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
DanBrown980551
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
FilipTomaszewski5
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
UiPathCommunity
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
ScyllaDB
 

Recently uploaded (20)

"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
 

jQuery Features to Avoid

  • 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.
  • 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()
  • 23.
  • 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
  • 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