jQuery 1.3 and jQuery UI

78,965 views

Published on

A talk given at Mexico Web 2.0, November 2008.

Published in: Technology
1 Comment
33 Likes
Statistics
Notes
No Downloads
Views
Total views
78,965
On SlideShare
0
From Embeds
0
Number of Embeds
262
Actions
Shares
0
Downloads
553
Comments
1
Likes
33
Embeds 0
No embeds

No notes for slide

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
  11. Selectors
  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? }
  18. Testing
  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; ); });
  21. qUnit Output
  22. Performance Analysis
  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/

×