SlideShare a Scribd company logo
1 of 24
Download to read offline
jQuery 1.3 and
       jQuery UI
                  John Resig
http://ejohn.org/ - http://twitter.com/jeresig/
jQuery
✦   jQuery Plugins
✦   jQuery UI
    ✦ Themeroller

✦   jQuery 1.3:
    ✦ Selector Engine
    ✦ Manipulation
    ✦ Sniffing

✦   jQuery Testing
✦   jQuery Performance
Plugins
✦   Huge plugin ecosystem
✦   Managed by Plugin tracker
    http://plugins.jquery.com/
✦   Hundreds in the tracker - even more on
    the web
jQuery Plugins
✦   Extend the jQuery system
✦   Add on extra methods:
    jQuery(“div”).hideRemove();
✦   Trivial to implement:
    jQuery.fn.hideRemove = function(speed){
       return this.hide(speed, function(){
           jQuery(this).remove();
       });
    };
jQuery UI
✦   A complete set of themed, cross-browser,
    user interface components (plugins!).
✦   Drag, Drop, Sort, Select, Resize
✦   Accordion, Datepicker, Dialog, Slider, Tabs
✦   More info:
    http://ui.jquery.com/
✦   1.6 is almost ready
Accessibility
✦   Keyboard Accessible
✦   Screenreader Accessible
✦   Grant from Mozilla Foundation to
    implement ARIA
Support
✦   Full-time developer:
    ✦ Paul Bakaus

✦   Hired by LifeRay
Themeroller
✦   Customize the styling of any jQuery UI
    component
✦   Full CSS, images for all components
✦   Easy to customize and use
✦   http://themeroller.com/
Todo List
     http://jquery.com/files/todo/
http://jquery.com/files/todo/done.php
jQuery 1.3
✦   Selectors
✦   DOM Modification
✦   Browser Sniffing
Selectors
Code name “Sizzle”
✦   http://github.com/jeresig/sizzle/tree/master
✦   New Selector Engine for jQuery
✦   1.5 - 4x faster than other libraries
✦   4KB Compressed
✦   No dependencies, can be used by other
    libraries (MochiKit, Prototype, Dojo)
Manipulation
✦   Four common methods:
    append, prepend, before, after
✦   $(“<li>and this too!</li>”)
Injecting
✦   Loop through elems, cloneNode(true)
    each, insert into DOM
    ✦ 5 paragraphs
    ✦ 100 divs
    ✦ 2 method calls (insert, clone)
    ✦ 1000 method

✦   *Very* slow
✦   Simple plugin provides 10-15x speed-up:
    http://dev.jquery.com/~john/ticket/append/
Document Fragments
✦   Move the nodes into a Document
    Fragment
✦   Husk DOM container
✦   Whole container can be cloned
✦   and whole container can be injected
✦   Saves a ton of repetition
Sniffing
✦   All major JS libraries use browser sniffing
✦   Look at the user agent and make guesses
    ✦ navigator.userAgent is bad! :-(

✦   We can get rid of this!
✦   Makes our code more resilient to change
Detection
✦   Object Detection
    ✦ if ( document.getElementsByTagName )

✦   Feature Simulation
    ✦ var div = document.createElement(“div”);
      div.innerHTML = “<!--test-->”;
      var a = div.getElementsByTagName(“*”);
      if ( a.length > 0 ) {
        // Why did we match a comment?
      }
Testing
JavaScript Test Suite
✦   qUnit (jQuery Test Suite)
    http://docs.jquery.com/QUnit
✦   By Joern Zaefferer
qUnit Usage
✦   test(quot;a basic test examplequot;, function() {
      ok( true, quot;this test is finequot; );
      var value = quot;helloquot;;
      equals( quot;helloquot;, value, quot;We expect value to be helloquot; );
    });

    module(quot;Module Aquot;);
    test(quot;first test within modulequot;, function() {
      ok( true, quot;all passquot; );
    });
    test(quot;second test within modulequot;, function() {
      ok( true, quot;all passquot; );
    });

    module(quot;Module Bquot;);
    test(quot;some other testquot;, function() {
      expect(1);
      ok( true, quot;wellquot; );
    });
qUnit Output
Performance Analysis
Profiling
✦   Deep Profiling Plugin
✦   Watch all method calls and events
✦   http://ejohn.org/blog/deep-profiling-
    jquery-apps/
✦   http://dev.jquery.com/~john/plugins/profile/
    github.com.html
✦   javascript:jQuery.displayProfile();
Thank You!
✦   John Resig
✦   http://ejohn.org/
✦   http://twitter.com/jeresig/

More Related Content

What's hot

Esta Radio Es Autostart Para Tu Blog
Esta Radio Es Autostart Para Tu BlogEsta Radio Es Autostart Para Tu Blog
Esta Radio Es Autostart Para Tu Blog
guest3845ab
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
偉格 高
 

What's hot (20)

RequireJS
RequireJSRequireJS
RequireJS
 
Esta Radio Es Autostart Para Tu Blog
Esta Radio Es Autostart Para Tu BlogEsta Radio Es Autostart Para Tu Blog
Esta Radio Es Autostart Para Tu Blog
 
Javascript Test Automation Workshop (21.08.2014)
Javascript Test Automation Workshop (21.08.2014)Javascript Test Automation Workshop (21.08.2014)
Javascript Test Automation Workshop (21.08.2014)
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
 
OUTDATED (Encore)
OUTDATED (Encore)OUTDATED (Encore)
OUTDATED (Encore)
 
React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈React.js触ってみた 吉澤和香奈
React.js触ってみた 吉澤和香奈
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
 
Modern frontend development with VueJs
Modern frontend development with VueJsModern frontend development with VueJs
Modern frontend development with VueJs
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQuery
 
Requirejs
RequirejsRequirejs
Requirejs
 
One step in the future: CSS variables
One step in the future: CSS variablesOne step in the future: CSS variables
One step in the future: CSS variables
 
DrupalCon Dublin 2016 - Automated browser testing with Nightwatch.js
DrupalCon Dublin 2016 - Automated browser testing with Nightwatch.jsDrupalCon Dublin 2016 - Automated browser testing with Nightwatch.js
DrupalCon Dublin 2016 - Automated browser testing with Nightwatch.js
 
An Introduction To Testing In AngularJS Applications
An Introduction To Testing In AngularJS Applications An Introduction To Testing In AngularJS Applications
An Introduction To Testing In AngularJS Applications
 
ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!
 
JavaScript Dependencies, Modules & Browserify
JavaScript Dependencies, Modules & BrowserifyJavaScript Dependencies, Modules & Browserify
JavaScript Dependencies, Modules & Browserify
 
Webpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JSWebpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JS
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
 
Thomas Fuchs Presentation
Thomas Fuchs PresentationThomas Fuchs Presentation
Thomas Fuchs Presentation
 
Обзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScriptОбзор автоматизации тестирования на JavaScript
Обзор автоматизации тестирования на JavaScript
 
Hack tutorial
Hack tutorialHack tutorial
Hack tutorial
 

Viewers also liked

jQuery Plugin Creation
jQuery Plugin CreationjQuery Plugin Creation
jQuery Plugin Creation
benalman
 

Viewers also liked (17)

Developing jQuery Plugins with Ease
Developing jQuery Plugins with EaseDeveloping jQuery Plugins with Ease
Developing jQuery Plugins with Ease
 
Building Robust jQuery Plugins
Building Robust jQuery PluginsBuilding Robust jQuery Plugins
Building Robust jQuery Plugins
 
jQuery - Tips And Tricks
jQuery - Tips And TricksjQuery - Tips And Tricks
jQuery - Tips And Tricks
 
An in-depth look at jQuery
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQuery
 
An in-depth look at jQuery UI
An in-depth look at jQuery UIAn in-depth look at jQuery UI
An in-depth look at jQuery UI
 
VBA on Main - Member Center
VBA on Main - Member CenterVBA on Main - Member Center
VBA on Main - Member Center
 
jQuery plugins & JSON
jQuery plugins & JSONjQuery plugins & JSON
jQuery plugins & JSON
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
Excel macro
Excel macroExcel macro
Excel macro
 
jQuery Plugin Creation
jQuery Plugin CreationjQuery Plugin Creation
jQuery Plugin Creation
 
Transforming Power Point Show with VBA
Transforming Power Point Show with VBATransforming Power Point Show with VBA
Transforming Power Point Show with VBA
 
Excel Macro Magic
Excel Macro MagicExcel Macro Magic
Excel Macro Magic
 
CSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsCSS/SVG Matrix Transforms
CSS/SVG Matrix Transforms
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
Ignore the DOM (German)
Ignore the DOM (German)Ignore the DOM (German)
Ignore the DOM (German)
 
Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)
 

Similar to jQuery 1.3 and jQuery UI

Performance Improvements In Browsers
Performance Improvements In BrowsersPerformance Improvements In Browsers
Performance Improvements In Browsers
GoogleTecTalks
 
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
Fred Sauer
 
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yetServer Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Tom Croucher
 

Similar to jQuery 1.3 and jQuery UI (20)

Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
 
jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)
 
jQuery - Boston IxDA
jQuery - Boston IxDAjQuery - Boston IxDA
jQuery - Boston IxDA
 
Performance Improvements In Browsers
Performance Improvements In BrowsersPerformance Improvements In Browsers
Performance Improvements In Browsers
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
 
jQuery Internals + Cool Stuff
jQuery Internals + Cool StuffjQuery Internals + Cool Stuff
jQuery Internals + Cool Stuff
 
jQuery (MeshU)
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)
 
Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScript
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
 
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
 
YUI 3
YUI 3YUI 3
YUI 3
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
 
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yetServer Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
 
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
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS Fundamentals
 
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
 
Java EE 6 & GlassFish V3 - Alexis Moussine-Pouchkine - May 2010
Java EE 6 & GlassFish V3 - Alexis Moussine-Pouchkine - May 2010Java EE 6 & GlassFish V3 - Alexis Moussine-Pouchkine - May 2010
Java EE 6 & GlassFish V3 - Alexis Moussine-Pouchkine - May 2010
 

More from jeresig

JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
jeresig
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
jeresig
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
jeresig
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
jeresig
 

More from jeresig (20)

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art History
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
 

Recently uploaded

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdf
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 

jQuery 1.3 and jQuery UI

  • 1. jQuery 1.3 and jQuery UI John Resig http://ejohn.org/ - http://twitter.com/jeresig/
  • 2. jQuery ✦ jQuery Plugins ✦ jQuery UI ✦ Themeroller ✦ jQuery 1.3: ✦ Selector Engine ✦ Manipulation ✦ Sniffing ✦ jQuery Testing ✦ jQuery Performance
  • 3. Plugins ✦ Huge plugin ecosystem ✦ Managed by Plugin tracker http://plugins.jquery.com/ ✦ Hundreds in the tracker - even more on the web
  • 4. jQuery Plugins ✦ Extend the jQuery system ✦ Add on extra methods: jQuery(“div”).hideRemove(); ✦ Trivial to implement: jQuery.fn.hideRemove = function(speed){ return this.hide(speed, function(){ jQuery(this).remove(); }); };
  • 5. jQuery UI ✦ A complete set of themed, cross-browser, user interface components (plugins!). ✦ Drag, Drop, Sort, Select, Resize ✦ Accordion, Datepicker, Dialog, Slider, Tabs ✦ More info: http://ui.jquery.com/ ✦ 1.6 is almost ready
  • 6. Accessibility ✦ Keyboard Accessible ✦ Screenreader Accessible ✦ Grant from Mozilla Foundation to implement ARIA
  • 7. Support ✦ Full-time developer: ✦ Paul Bakaus ✦ Hired by LifeRay
  • 8. Themeroller ✦ Customize the styling of any jQuery UI component ✦ Full CSS, images for all components ✦ Easy to customize and use ✦ http://themeroller.com/
  • 9. Todo List http://jquery.com/files/todo/ http://jquery.com/files/todo/done.php
  • 10. jQuery 1.3 ✦ Selectors ✦ DOM Modification ✦ Browser Sniffing
  • 12. Code name “Sizzle” ✦ http://github.com/jeresig/sizzle/tree/master ✦ New Selector Engine for jQuery ✦ 1.5 - 4x faster than other libraries ✦ 4KB Compressed ✦ No dependencies, can be used by other libraries (MochiKit, Prototype, Dojo)
  • 13. Manipulation ✦ Four common methods: append, prepend, before, after ✦ $(“<li>and this too!</li>”)
  • 14. Injecting ✦ Loop through elems, cloneNode(true) each, insert into DOM ✦ 5 paragraphs ✦ 100 divs ✦ 2 method calls (insert, clone) ✦ 1000 method ✦ *Very* slow ✦ Simple plugin provides 10-15x speed-up: http://dev.jquery.com/~john/ticket/append/
  • 15. Document Fragments ✦ Move the nodes into a Document Fragment ✦ Husk DOM container ✦ Whole container can be cloned ✦ and whole container can be injected ✦ Saves a ton of repetition
  • 16. Sniffing ✦ All major JS libraries use browser sniffing ✦ Look at the user agent and make guesses ✦ navigator.userAgent is bad! :-( ✦ We can get rid of this! ✦ Makes our code more resilient to change
  • 17. Detection ✦ Object Detection ✦ if ( document.getElementsByTagName ) ✦ Feature Simulation ✦ var div = document.createElement(“div”); div.innerHTML = “<!--test-->”; var a = div.getElementsByTagName(“*”); if ( a.length > 0 ) { // Why did we match a comment? }
  • 19. JavaScript Test Suite ✦ qUnit (jQuery Test Suite) http://docs.jquery.com/QUnit ✦ By Joern Zaefferer
  • 20. qUnit Usage ✦ test(quot;a basic test examplequot;, function() { ok( true, quot;this test is finequot; ); var value = quot;helloquot;; equals( quot;helloquot;, value, quot;We expect value to be helloquot; ); }); module(quot;Module Aquot;); test(quot;first test within modulequot;, function() { ok( true, quot;all passquot; ); }); test(quot;second test within modulequot;, function() { ok( true, quot;all passquot; ); }); module(quot;Module Bquot;); test(quot;some other testquot;, function() { expect(1); ok( true, quot;wellquot; ); });
  • 23. Profiling ✦ Deep Profiling Plugin ✦ Watch all method calls and events ✦ http://ejohn.org/blog/deep-profiling- jquery-apps/ ✦ http://dev.jquery.com/~john/plugins/profile/ github.com.html ✦ javascript:jQuery.displayProfile();
  • 24. Thank You! ✦ John Resig ✦ http://ejohn.org/ ✦ http://twitter.com/jeresig/