SlideShare a Scribd company logo
1 of 86
Download to read offline
THE MYSTERIES OF
  JAVASCRIPT-FU
 Dan Webb (dan@danwebb.net)
A peasant’s language
Web 2.0 has forced
‘real’ programmers to
        master it
JavaScript-Fu is not easy
       to master
The web is awash with
 bad examples and
  worse resources
Developers forced into
refuge behind libraries
    and frameworks
THE ANCIENT MANUALS
      OF JAVASCRIPT-FU
    The Tao Of The Event Handler!
❖

    5 Methods Of DOM Fist!
❖

    Lightning Script Style!
❖

    The 36 Chambers Of Shaolin!
❖
TRANSLATED...

    Working with events
❖

    Working with DOM elements
❖

    Optimisation
❖

    Testing and debugging
❖
THE TAO OF THE
EVENT HANDLER
The essence of browser
 scripting is defining
      behaviour
Big differences in both
browser implementation
      and opinion
The main battle has
always been in one
      area...
INLINE VS SCRIPTED
INLINE EVENT HANDLERS
INLINE EVENT HANDLERS




Applied as soon as the browser
loads the HTML
INLINE EVENT HANDLERS




But what happens when there
is more than one....
Bad JavaScript-fu
SCRIPT-BASED
       EVENT HANDLERS
Attached after element
      has loaded
Very DRY
Separate JavaScript out
in a similar way to CSS
Large numbers of event
handlers choke browsers
WHICH WAY?
    Use script-based event handling by
❖
    default
    If the page is large and this method
❖
    results in unresponsiveness try event
    delegation
    If all else fails go for inline event
❖
    handling
EVENT BUBBLING

 <body>     handler


 <div>

 <p>

 <a>         click
EVENT DELEGATION
BETTER INLINE HANDLERS
BETTER INLINE HANDLERS
5 METHODS OF
  DOM FIST
There are 5 methods for
    updating HTML
3 official methods
       (W3C)
$('kungfu').appendChild(node);
$('kungfu').insertBefore(node, child);
$('kungfu').replaceChild(node, child);
1 non-standard method
(you guessed it, from IE)
DOM VS innerHTML
DOM METHODS
Insert elements with
      precision
But you need to create
   the nodes first...
ARGH!
LOWPRO’S DOM BUILDER
INNERHTML
Can shift large amount
  of HTML quickly...
...but you don't get
    much control
Incredibly simple
 to use with Ajax
WHICH WAY?

    No clear winner
❖

    DOM is good for more surgical
❖
    manipulation
    innerHTML is good for replacing large
❖
    amounts of content or simple jobs
and the final method...
THE BASTARD SON
LIGHTNING
SCRIPT STYLE
~134KB
5 HTTP
requests
Takes time to download
  and evaluate script
The less JavaScript
    the better
Browsers normally only
try to load 2 resources
      concurrently
Combine .js files
Use GZIP compression
over JS based minification
Make sure everything
    is cachable
FASTER LOOPS
FASTER LOOPS
BE CAREFUL WITH
            SELECTORS
Use a just-in-time
   approach
THE 36 CHAMBERS
   OF SHAOLIN
You're going to need
    a few tools...
Buy a Mac
Parallels Workstation

    PARALLELS
   WORKSTATION
Get Firebug
What about the other
    browsers?
And then there's
   testing...
SELENIUM

    Written by ThoughtWorks
❖

    Implemented in HTML/CSS
❖

    Test cases define a series of user
❖
    actions (using HTML)
    Assertions check the correct results
❖
LEARNING MORE
LEARNING MORE
    Dan Webb: http://www.danwebb.net
❖

    Low Pro: http://www.danwebb.net/lowpro
❖

    Parallels: http://parallels.com
❖

    Firebug: http://getfirebug.com
❖

    Selenium: http://www.openqa.org/
❖
    selenium/
QUESTIONS?

More Related Content

What's hot

Understanding XHProf: Pinpointing Why Your Site is Slow and How to Fix it - S...
Understanding XHProf: Pinpointing Why Your Site is Slow and How to Fix it - S...Understanding XHProf: Pinpointing Why Your Site is Slow and How to Fix it - S...
Understanding XHProf: Pinpointing Why Your Site is Slow and How to Fix it - S...
Ezra Gildesgame
 

What's hot (20)

Why postgres SQL deserve noSQL fan respect - Riga dev day 2016
Why postgres SQL deserve noSQL fan respect - Riga dev day 2016Why postgres SQL deserve noSQL fan respect - Riga dev day 2016
Why postgres SQL deserve noSQL fan respect - Riga dev day 2016
 
JavaScript development methodology
JavaScript development methodologyJavaScript development methodology
JavaScript development methodology
 
Look Up Mobile Javascript
Look Up Mobile JavascriptLook Up Mobile Javascript
Look Up Mobile Javascript
 
Untangling spring week9
Untangling spring week9Untangling spring week9
Untangling spring week9
 
Intro to react_v2
Intro to react_v2Intro to react_v2
Intro to react_v2
 
CoffeeScript the Awesome
CoffeeScript the AwesomeCoffeeScript the Awesome
CoffeeScript the Awesome
 
Automated Testing with Google Chrome - WebDriver- ChromeDriver
Automated Testing with Google Chrome - WebDriver- ChromeDriverAutomated Testing with Google Chrome - WebDriver- ChromeDriver
Automated Testing with Google Chrome - WebDriver- ChromeDriver
 
Drupalcon 2009 Flash and Drupal
Drupalcon 2009 Flash and DrupalDrupalcon 2009 Flash and Drupal
Drupalcon 2009 Flash and Drupal
 
Overcoming Command Line Allergies
Overcoming Command Line AllergiesOvercoming Command Line Allergies
Overcoming Command Line Allergies
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Understanding XHProf: Pinpointing Why Your Site is Slow and How to Fix it - S...
Understanding XHProf: Pinpointing Why Your Site is Slow and How to Fix it - S...Understanding XHProf: Pinpointing Why Your Site is Slow and How to Fix it - S...
Understanding XHProf: Pinpointing Why Your Site is Slow and How to Fix it - S...
 
Dotscale2013 : How to scale ?
Dotscale2013 : How to scale ?Dotscale2013 : How to scale ?
Dotscale2013 : How to scale ?
 
Headless approach and acquia - case study | Codesushi
Headless approach and acquia  - case study | CodesushiHeadless approach and acquia  - case study | Codesushi
Headless approach and acquia - case study | Codesushi
 
I Promise You
I Promise YouI Promise You
I Promise You
 
Untangling the web9
Untangling the web9Untangling the web9
Untangling the web9
 
Build the mobile web you want
Build the mobile web you wantBuild the mobile web you want
Build the mobile web you want
 
Untangling7
Untangling7Untangling7
Untangling7
 
PHP Aberdeen Quick optimisation of PHP with Webgrind
PHP Aberdeen Quick optimisation of PHP with WebgrindPHP Aberdeen Quick optimisation of PHP with Webgrind
PHP Aberdeen Quick optimisation of PHP with Webgrind
 
Hudson and Drupal
Hudson and DrupalHudson and Drupal
Hudson and Drupal
 
Untangling the web11
Untangling the web11Untangling the web11
Untangling the web11
 

Viewers also liked

Attacker Ghost Stories (CarolinaCon / Area41 / RVASec)
Attacker Ghost Stories (CarolinaCon / Area41 / RVASec)Attacker Ghost Stories (CarolinaCon / Area41 / RVASec)
Attacker Ghost Stories (CarolinaCon / Area41 / RVASec)
Rob Fuller
 

Viewers also liked (15)

How to own the world, one desktop at a time
How to own the world, one desktop at a timeHow to own the world, one desktop at a time
How to own the world, one desktop at a time
 
Raspberry pi
Raspberry piRaspberry pi
Raspberry pi
 
Hot potato Privilege Escalation
Hot potato Privilege EscalationHot potato Privilege Escalation
Hot potato Privilege Escalation
 
Attack on Sony
Attack on SonyAttack on Sony
Attack on Sony
 
Fundamentals of Linux Privilege Escalation
Fundamentals of Linux Privilege EscalationFundamentals of Linux Privilege Escalation
Fundamentals of Linux Privilege Escalation
 
Hack.LU - The Infosec Crossroads
Hack.LU - The Infosec CrossroadsHack.LU - The Infosec Crossroads
Hack.LU - The Infosec Crossroads
 
Intro To Privilege Elevation
Intro To Privilege ElevationIntro To Privilege Elevation
Intro To Privilege Elevation
 
Prepare Yourself to Become Infosec Professional
Prepare Yourself to Become Infosec ProfessionalPrepare Yourself to Become Infosec Professional
Prepare Yourself to Become Infosec Professional
 
My pwk & oscp journey
My pwk & oscp journeyMy pwk & oscp journey
My pwk & oscp journey
 
Windows privilege escalation by Dhruv Shah
Windows privilege escalation by Dhruv ShahWindows privilege escalation by Dhruv Shah
Windows privilege escalation by Dhruv Shah
 
Attacker Ghost Stories (CarolinaCon / Area41 / RVASec)
Attacker Ghost Stories (CarolinaCon / Area41 / RVASec)Attacker Ghost Stories (CarolinaCon / Area41 / RVASec)
Attacker Ghost Stories (CarolinaCon / Area41 / RVASec)
 
Windows Attacks AT is the new black
Windows Attacks   AT is the new blackWindows Attacks   AT is the new black
Windows Attacks AT is the new black
 
The Dirty Little Secrets They Didn’t Teach You In Pentesting Class
The Dirty Little Secrets They Didn’t Teach You In Pentesting ClassThe Dirty Little Secrets They Didn’t Teach You In Pentesting Class
The Dirty Little Secrets They Didn’t Teach You In Pentesting Class
 
Writing malware while the blue team is staring at you
Writing malware while the blue team is staring at youWriting malware while the blue team is staring at you
Writing malware while the blue team is staring at you
 
TEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkTEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of Work
 

Similar to The Mysteries Of JavaScript-Fu (@media Europe Edition)

Flu3nt highlights
Flu3nt highlightsFlu3nt highlights
Flu3nt highlights
dswork
 
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsIn Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
Spike Brehm
 
Smarr Oscon 2007
Smarr Oscon 2007Smarr Oscon 2007
Smarr Oscon 2007
briandemant
 

Similar to The Mysteries Of JavaScript-Fu (@media Europe Edition) (20)

All of Javascript
All of JavascriptAll of Javascript
All of Javascript
 
Fast Cordova applications
Fast Cordova applicationsFast Cordova applications
Fast Cordova applications
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
Flu3nt highlights
Flu3nt highlightsFlu3nt highlights
Flu3nt highlights
 
Performance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedPerformance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For Speed
 
Drupal Performance : DrupalCamp North
Drupal Performance : DrupalCamp NorthDrupal Performance : DrupalCamp North
Drupal Performance : DrupalCamp North
 
Speeding up mobile web apps
Speeding up mobile web appsSpeeding up mobile web apps
Speeding up mobile web apps
 
Agile JavaScript Testing
Agile JavaScript TestingAgile JavaScript Testing
Agile JavaScript Testing
 
A rough guide to JavaScript Performance
A rough guide to JavaScript PerformanceA rough guide to JavaScript Performance
A rough guide to JavaScript Performance
 
Madison PHP 2015 - DevOps For Small Teams
Madison PHP 2015 - DevOps For Small TeamsMadison PHP 2015 - DevOps For Small Teams
Madison PHP 2015 - DevOps For Small Teams
 
ZendCon 2015 - DevOps for Small Teams
ZendCon 2015 - DevOps for Small TeamsZendCon 2015 - DevOps for Small Teams
ZendCon 2015 - DevOps for Small Teams
 
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsIn Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
 
Os Smarr
Os SmarrOs Smarr
Os Smarr
 
Smarr Oscon 2007
Smarr Oscon 2007Smarr Oscon 2007
Smarr Oscon 2007
 
Web Optimisation
Web OptimisationWeb Optimisation
Web Optimisation
 
Zero to tested
Zero to testedZero to tested
Zero to tested
 
Serverless in production, an experience report
Serverless in production, an experience reportServerless in production, an experience report
Serverless in production, an experience report
 
2019 StartIT - Boosting your performance with Blackfire
2019 StartIT - Boosting your performance with Blackfire2019 StartIT - Boosting your performance with Blackfire
2019 StartIT - Boosting your performance with Blackfire
 
Serverless in production, an experience report (FullStack 2018)
Serverless in production, an experience report (FullStack 2018)Serverless in production, an experience report (FullStack 2018)
Serverless in production, an experience report (FullStack 2018)
 
Serverless in Production, an experience report (AWS UG South Wales)
Serverless in Production, an experience report (AWS UG South Wales)Serverless in Production, an experience report (AWS UG South Wales)
Serverless in Production, an experience report (AWS UG South Wales)
 

More from danwrong (7)

Building Non-shit APIs with JavaScript
Building Non-shit APIs with JavaScriptBuilding Non-shit APIs with JavaScript
Building Non-shit APIs with JavaScript
 
Loadrunner
LoadrunnerLoadrunner
Loadrunner
 
Bringing the Same-Origin Policy to its Knees
Bringing the Same-Origin Policy to its KneesBringing the Same-Origin Policy to its Knees
Bringing the Same-Origin Policy to its Knees
 
Building @Anywhere (for TXJS)
Building @Anywhere (for TXJS)Building @Anywhere (for TXJS)
Building @Anywhere (for TXJS)
 
8 Minutes On Rack
8 Minutes On Rack8 Minutes On Rack
8 Minutes On Rack
 
Taming The Beast
Taming The BeastTaming The Beast
Taming The Beast
 
Metaprogramming JavaScript
Metaprogramming  JavaScriptMetaprogramming  JavaScript
Metaprogramming JavaScript
 

Recently uploaded

Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 

Recently uploaded (20)

Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
 

The Mysteries Of JavaScript-Fu (@media Europe Edition)