0
March 2008 - John Resig
We missed you!✦   We’ve been busy:    ✦ jQuery 1.1    ✦ jQuery 1.1.1    ✦ jQuery 1.1.2    ✦ jQuery 1.1.3    ✦ jQuery 1.1.4...
Major Releases✦   More info:    ✦ jQuery 1.1:        http://jquery.com/blog/2007/01/14/jquery-birthday-11-new-site-new-doc...
Refinement✦   API is highly refined    ✦ Major focus on speed improvements    ✦ Removing un-used functionality✦   Most impro...
Existing API✦   A pure psuedo-language for the DOM✦   $(“#items”)       .find(“ul”)          .addClass(“inner”)       .end(...
Plugins API✦   Dead simple scheme for adding new    jQuery methods:✦   jQuery.fn.fadeRemove = function(speed){       retur...
Keep Lean✦   We want to keep the core as tight as    possible✦   Keep file size and bloat to a minimum    ✦ No larger than ...
Keep Clean✦   jQuery can be rename ‘$’:    var $jq = jQuery.noConflict();    $jq(“div”).hide();✦   jQuery can even rename ‘...
Keep Lean✦   How can we keep jQuery lean?    ✦ Provide more hooks for plugins✦   Hooks:    ✦ Animations    ✦ Special Event...
Animations✦   Full Animation plugin (in jQuery 1.2):✦   jQuery.fx.step.corner = function(fx) {      fx.elem.style.top = fx...
Special Events✦   Added in jQuery 1.2.2✦   Can create whole shadow event system✦   New events: mouseenter, mouseleave,    ...
Namespaced Events✦   Added in jQuery 1.2✦   Targeted adding and removal of events✦   $(“div”).bind(“click.foo”, function()...
Element Data✦   Added in jQuery 1.2✦   Attaching data to elements can be    hazardous✦   Store data:    jQuery.data(elem, ...
Element Data (cont.)✦   Added in jQuery 1.2.3✦   Can handle namespacing    $(”div”).data(”test”, “original”);    $(”div”)....
Plugins✦   Huge plugin ecosystem✦   Managed by Plugin tracker - built with    Drupal!    http://plugins.jquery.com/✦   Hun...
jQuery UI✦   A complete set of themed, cross-browser,    user interface components.✦   Drag, Drop, Sort, Select, Resize✦  ...
Accessibility✦   Keyboard Accessible✦   Screenreader Accessible✦   Grant from Mozilla Foundation to    implement ARIA
Support✦   Liferay (Java CMS) hired Paul Bakaus,    jQuery UI lead to work on it full time.✦   More support on the way!
jQuery Enchant✦   Color Animations✦   Advanced Queue Control✦   Advanced Animations, made simple:    $(’#fx’).show(’blind’...
Books
Questions?✦   jeresig@gmail.com✦   http://ejohn.org/
Upcoming SlideShare
Loading in...5
×

State of jQuery and Drupal

760

Published on

Talk I gave at DrupalCon Boston 2008.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
760
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "State of jQuery and Drupal"

  1. 1. March 2008 - John Resig
  2. 2. We missed you!✦ We’ve been busy: ✦ jQuery 1.1 ✦ jQuery 1.1.1 ✦ jQuery 1.1.2 ✦ jQuery 1.1.3 ✦ jQuery 1.1.4 ✦ jQuery 1.2 ✦ jQuery 1.2.1 ✦ jQuery 1.2.2 ✦ jQuery 1.2.3✦ ... since the last Drupal release
  3. 3. Major Releases✦ More info: ✦ jQuery 1.1: http://jquery.com/blog/2007/01/14/jquery-birthday-11-new-site-new-docs/ ✦ jQuery 1.1.3: http://jquery.com/blog/2007/07/01/jquery-113-800-faster-still-20kb/ ✦ jQuery 1.1.4: http://jquery.com/blog/2007/08/24/jquery-114-faster-more-tests-ready- for-12/ ✦ jQuery 1.2: http://docs.jquery.com/Release:jQuery_1.2 ✦ jQuery 1.2.2: http://docs.jquery.com/Release:jQuery_1.2.2 ✦ jQuery 1.2.3: http://docs.jquery.com/Release:jQuery_1.2.3 ✦ All: http://docs.jquery.com/Downloading_jQuery
  4. 4. Refinement✦ API is highly refined ✦ Major focus on speed improvements ✦ Removing un-used functionality✦ Most improvements come from plugins
  5. 5. Existing API✦ A pure psuedo-language for the DOM✦ $(“#items”) .find(“ul”) .addClass(“inner”) .end() .find(“li”) .andSelf() .hover(over, off) .end() .end() .show();
  6. 6. Plugins API✦ Dead simple scheme for adding new jQuery methods:✦ jQuery.fn.fadeRemove = function(speed){ return this.fadeOut(speed, function(){ jQuery(this).remove(); }); };✦ $(“div.foo”).fadeRemove();
  7. 7. Keep Lean✦ We want to keep the core as tight as possible✦ Keep file size and bloat to a minimum ✦ No larger than 15kb gzipped✦ Focus on extensibility for further improvements
  8. 8. Keep Clean✦ jQuery can be rename ‘$’: var $jq = jQuery.noConflict(); $jq(“div”).hide();✦ jQuery can even rename ‘jQuery’ allowing multiple copies of jQuery to work side-by- side.✦ var $a = jQuery.noConflict(true); // load other version of jQuery $a(“div”).hide(); // still works!
  9. 9. Keep Lean✦ How can we keep jQuery lean? ✦ Provide more hooks for plugins✦ Hooks: ✦ Animations ✦ Special Events ✦ Namespaced Events ✦ Element Data
  10. 10. Animations✦ Full Animation plugin (in jQuery 1.2):✦ jQuery.fx.step.corner = function(fx) { fx.elem.style.top = fx.now + fx.unit; fx.elem.style.left = fx.now + fx.unit; };✦ $(”#go”).click(function(){ $(”#block”).animate({corner: ‘40px’}, 500); });
  11. 11. Special Events✦ Added in jQuery 1.2.2✦ Can create whole shadow event system✦ New events: mouseenter, mouseleave, mousewheel (w/ plugin), ready✦ $(”li”).bind(”mouseenter”, function(){ $(this).addClass(”hover”); }).bind(”mouseleave”, function(){ $(this).removeClass(”hover”); });
  12. 12. Namespaced Events✦ Added in jQuery 1.2✦ Targeted adding and removal of events✦ $(“div”).bind(“click.foo”, function(){ alert(“foo!”); });✦ Time to clean up! $(“div”).unbind(“click.foo”);✦ Added in jQuery 1.2.3: $(“div”).unbind(“.foo”);
  13. 13. Element Data✦ Added in jQuery 1.2✦ Attaching data to elements can be hazardous✦ Store data: jQuery.data(elem, “name”, “value”);✦ Read data: jQuery.data(elem, “name”);✦ All data is stored in a central cached and completely garbage collected, as necessary
  14. 14. Element Data (cont.)✦ Added in jQuery 1.2.3✦ Can handle namespacing $(”div”).data(”test”, “original”); $(”div”).data(”test.plugin”, “new data”); $(”div”).data(”test”) == “original”; // true $(”div”).data(”test.plugin”) == “new data”; // true✦ Advanced data handling can be overridden by plugins $(element).bind(”setData.draggable”, function(event, key, value){ self.options[key] = value; }).bind(”getData.draggable”, function(event, key){ return self.options[key]; });
  15. 15. Plugins✦ Huge plugin ecosystem✦ Managed by Plugin tracker - built with Drupal! http://plugins.jquery.com/✦ Hundreds in the tracker - even more on the web
  16. 16. jQuery UI✦ A complete set of themed, cross-browser, user interface components.✦ Drag, Drop, Sort, Select, Resize✦ Accordion, Datepicker, Dialog, Slider, Tabs✦ More info: http://docs.jquery.com/UI✦ 1.5 is in beta right now: http://jquery.com/blog/2008/02/12/jquery-ui-15b-new-api-more-features-huge-performance-boost/
  17. 17. Accessibility✦ Keyboard Accessible✦ Screenreader Accessible✦ Grant from Mozilla Foundation to implement ARIA
  18. 18. Support✦ Liferay (Java CMS) hired Paul Bakaus, jQuery UI lead to work on it full time.✦ More support on the way!
  19. 19. jQuery Enchant✦ Color Animations✦ Advanced Queue Control✦ Advanced Animations, made simple: $(’#fx’).show(’blind’, {direction: ‘vertical’});
  20. 20. Books
  21. 21. Questions?✦ jeresig@gmail.com✦ http://ejohn.org/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×