jQuery 1.3 and jQuery UI

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 ✦ Sniﬃng ✦ 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/ﬁles/todo/ http://jquery.com/ﬁles/todo/done.php

jQuery 1.3 ✦ Selectors ✦ DOM Modiﬁcation ✦ Browser Sniﬃng

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

Sniﬃng ✦ All major JS libraries use browser sniﬃng ✦ 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 = “”; 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 Zaeﬀerer

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/

http://www.sliversofmysoul.netsons.org	49
http://knitinr.blogspot.com	42
http://www.techiegyan.com	27
http://www.slideshare.net	24
http://blog.sightworks.com	7
http://www.e-presentations.us	7
https://confluence.uk.jpmorgan.com	4
http://static.slideshare.net	2
http://knitinr.blogspot.in	2
http://220.130.130.220	2
http://knitinr.blogspot.se	1
http://e-presentations.us	1
http://knitinr.blogspot.de	1
http://localhost	1
http://bhakthan.blogspot.com	1
http://techlog.cz	1
http://knitinr.blogspot.co.uk	1

jQuery 1.3 and jQuery UI

by jeresig on Dec 07, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

17 Embeds 173

Statistics

jQuery 1.3 and jQuery UI — Presentation Transcript