jQuery 1.3 and jQuery UI
Upcoming SlideShare
Loading in...5
×
 

jQuery 1.3 and jQuery UI

on

  • 16,833 views

A talk given at Mexico Web 2.0, November 2008.

A talk given at Mexico Web 2.0, November 2008.

Statistics

Views

Total Views
16,833
Views on SlideShare
16,578
Embed Views
255

Actions

Likes
30
Downloads
543
Comments
0

31 Embeds 255

http://knitinr.blogspot.com 57
http://www.sliversofmysoul.netsons.org 49
http://bhakthan.blogspot.com 31
http://www.techiegyan.com 28
http://www.slideshare.net 24
https://confluence.uk.jpmorgan.com 10
http://www.e-presentations.us 8
http://blog.sightworks.com 7
http://knitinr.blogspot.ae 5
http://lanyrd.com 4
http://knitinr.blogspot.ro 4
http://knitinr.blogspot.co.uk 3
http://knitinr.blogspot.in 3
http://knitinr.blogspot.de 2
http://e-presentations.us 2
http://static.slideshare.net 2
http://220.130.130.220 2
http://vizzwebsolutions.com 1
http://knitinr.blogspot.pt 1
http://knitinr.blogspot.co.at 1
http://knitinr.blogspot.be 1
http://knitinr.blogspot.ch 1
http://knitinr.blogspot.dk 1
http://knitinr.blogspot.tw 1
http://knitinr.blogspot.ie 1
http://knitinr.blogspot.com.au 1
http://knitinr.blogspot.jp 1
http://localhost 1
http://knitinr.blogspot.se 1
http://techlog.cz 1
http://confluence.uk.jpmorgan.com 1
More...

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 1.3 and jQuery UI jQuery 1.3 and jQuery UI Presentation Transcript

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