State of jQuery and Drupal
0 likes•1,267 views
This document summarizes the many updates and releases of jQuery between March 2008 and the last Drupal release. It notes the numerous bug fix and speed improvement releases of jQuery 1.1 and 1.2. It also describes new features added to jQuery like animations, special events, namespaced events, and element data to make it more extensible through plugins. It highlights the large plugin ecosystem and upcoming jQuery UI and Enchant projects.
![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];
});](https://image.slidesharecdn.com/jquery-state-130228084526-phpapp02/85/State-of-jQuery-and-Drupal-14-320.jpg)
State of jQuery and Drupal
- 1. March 2008 - John Resig
- 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. 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. Refinement ✦ API is highly refined ✦ Major focus on speed improvements ✦ Removing un-used functionality ✦ Most improvements come from plugins
- 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. 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. 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. 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. Keep Lean ✦ How can we keep jQuery lean? ✦ Provide more hooks for plugins ✦ Hooks: ✦ Animations ✦ Special Events ✦ Namespaced Events ✦ Element Data
- 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. 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. 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. 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. 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. 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. 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. Accessibility ✦ Keyboard Accessible ✦ Screenreader Accessible ✦ Grant from Mozilla Foundation to implement ARIA
- 18. Support ✦ Liferay (Java CMS) hired Paul Bakaus, jQuery UI lead to work on it full time. ✦ More support on the way!
- 19. jQuery Enchant ✦ Color Animations ✦ Advanced Queue Control ✦ Advanced Animations, made simple: $(’#fx’).show(’blind’, {direction: ‘vertical’});
- 20. Books
- 21. Questions? ✦ [email protected] ✦ http://ejohn.org/