Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Libraries (Ajax Exp 2006)


Published on

Published in: Technology
  • Be the first to comment

JavaScript Libraries (Ajax Exp 2006)

  1. 1. JavaScript Libraries Ajax Experience - Oct 2006 John Resig (
  2. 2. Question: How do you want to write JavaScript?
  3. 3. 1) Plug-and-Play• Drop in a “calendar widget” or “tabbed navigation”• Little, to no, JavaScript experience required.• Just customize some options and go.• No flexibility.
  4. 4. 2) Some Assembly Required• Write common utilities • Click a link, load a page via Ajax • Build a dynamic menu • Creating interactive forms• Use pre-made code to distance yourself from browser bugs.• Flexible, until you hit a browser bug.
  5. 5. 3) Down-and-Dirty• Write all JavaScript code from scratch• Deal, directly, with browser bugs• Quirksmode is your lifeline• Excessively flexible, to the point of hinderance.
  6. 6. What we’ve just seen...• Widgets• Libraries• Raw JavaScript
  7. 7. What we’ve just seen...• Widgets• Libraries• Raw JavaScript
  8. 8. Why use a library?• Makes JavaScript bearable• Gets the job done fast• Simplifies cross-browser support• Sort of like C stdlib - no one just codes C by hand
  9. 9. What kind of libraries exist? Open Source Commercial AtlasClient/ AjaxCFC Backbase forServer Qcodo Struts Prototype DojoBrowser Backbase jQuery Only SmartClient Mochikit Yahoo UI
  10. 10. What kind of libraries exist? Open Source Commercial AtlasClient/ AjaxCFC Backbase forServer Qcodo Struts Prototype DojoBrowser Backbase jQuery Only SmartClient Mochikit Yahoo UI
  11. 11. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fxSpecific Qcodo Open Rico Prototype DojoGeneral Ruby on Rails jQueryPurpose CakePHP Mochikit Yahoo UI
  12. 12. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fxSpecific Qcodo Open Rico Prototype DojoGeneral Ruby on Rails jQueryPurpose CakePHP Mochikit Yahoo UI
  13. 13. What should a library have?• DOM Traversing/Manipulation• Event binding• Ajax Support• Basic Animations
  14. 14. What should a library have?• Some want complex controls • Drag-and-drop • Auto-complete search• Others want language enhancements • Object.extend() • Array.each()• DOM, Event, Effects, Ajax is a good middle- ground
  15. 15. Secondary Features• Documentation• Community Support• File Size• Popularity
  16. 16. Secondary Features (Practical)• Documentation• Community Support• File Size• Popularity (Esoteric)
  17. 17. The Libraries
  18. 18. Dojo
  19. 19. Dojo: Overview• Started early 2005 by Alex Russell• Large development community• Lots of corporate backing (IBM, AOL, Google)• Big code base, tons of features
  20. 20. Dojo: Focus• Building complete web applications• A package heirarchy, e.g.: dojo.html.addClass( ... )• Focus has transcended into widgets• Huge number of features
  21. 21. Dojo: DOM Support• Good DOM Modification support - handles many cross-browser issues• DOM Traversal could be spruced up to handle selectors var each = dojo.lang.forEach; var tables = document.getElementsByTagName("table"); each(tables, function(table){ each(table.getElementsByTagName("tr"), function(row,i){ if ( i % 2 == 1 ) dojo.html.addClass( row, "odd" ); }); });
  22. 22. Dojo: Events and Effects• Events support is complete and cross browser• Good selection of generic animations var link = dojo.byId("mylink"); dojo.event.connect(link, "onclick", myHandler); function myHandler(evt) { dojo.lfx.html.fadeHide( link, 500 ); }
  23. 23. Dojo: Ajax• Its crown jewel• Supports virtually any form of Ajax communication that you can think of• XMLHTTPRequest, IFrame, Flash• Has excellent backwards compatability• Built-in back button support
  24. 24. Dojo: Docs & Community• Documentation: Not much. In the middle of a major documentation overhaul for 0.4.• Community: Lively Over 60+ mailing list posts/day.
  25. 25. Dojo: File Size & Popularity• File Size: Large (100Kb compressed) It’s highly recommended that you remove unused modules.• Popularity: Substantial Backing from many corporate sponsors (IBM).
  26. 26. Prototype
  27. 27. Prototype: Overview• Started early 2005 by Sam Stephenson• Incredibly popular, tied with Ruby on Rails’ popularity• Development backed by 37 Signals
  28. 28. Prototype: Focus• Improving the usability of the JavaScript language• Big emphasis on adding in ‘missing’ JavaScript features• Clean structure, clean objects and ‘classes’
  29. 29. Prototype: DOM Support• DOM Modification works quite well: Insertion.Bottom(“list”,”<li>Another item</li>”);• So does >DOM Traversing: $$(“table tr”).invoke(“addClassName”,”row”);
  30. 30. Prototype: Events & Ajax• Event binding just works: function(){ Event.observe(“button”,”click”, alert(“Thanks for the click!”); });• So does Ajax: new Ajax.Request(“test.html”, { method: “GET”, onComplete: function(res){ alert( res.responseText ); } });
  31. 31. Prototype: Details• Code quality is fantastic, great features• No support for animations • moo.fx •• Updates are very infrequent (most recent release is over a year old)
  32. 32. Prototype: Docs & Community• Documentation: None Some 3rd party web sites document some versions, no official documentation.• Community: Distributed Many bloggers love Prototype, little centralized discussion (16 posts/day).
  33. 33. Prototype: File Size & Popularity• File Size: Moderate (40KB) Unfortunately, not easily compressible.• Popularity: Strong Constantly in use at major web sites - tied to popularity of Ruby on Rails.
  34. 34. jQuery
  35. 35. jQuery: Overview• Released January 2006 by John Resig• Rapid rise in popularity• Many developers across the globe
  36. 36. jQuery: Focus• Improving the interaction between JavaScript and HTML• Finding elements then performing actions• Highly-effective, short, code
  37. 37. jQuery: DOM Support• DOM Traversing is great - CSS1-3 support and basic XPath: $(“div > p:nth-child(odd)”)• DOM Manipulation too: $(“#li”).append(“<li>An item</li>”);
  38. 38. jQuery: Events, Effects, and Ajax• Events are fully functional: $(“div”).click( showItem );• And effects: $(“#menu”).slideDown(“slow”);• And Ajax! $(“form”).submit(function(){ $(“#results”).load(“test.html”); });
  39. 39. jQuery: Details• Core features are limited to DOM, Events, Effects, Ajax• Other features can be added in via plugins• Relatively new, compared to other libraries
  40. 40. jQuery: Docs & Community• Documentation: Complete Fully documented, complete API.• Community: Vibrant 91+ Mailing List Posts/Day
  41. 41. jQuery: File Size & Popularity• File Size: Small About 16KB with everything.• Popularity: Growing Little corporate backing. Lots of sites switching: Drupal, MSNBC, Technorati, FeedBurner.
  42. 42. Mochikit
  43. 43. Mochikit: Overview• Released July 2005 by Bob Ippolito• Managed and sponsored by MochiMedia• Developed to power their Mochibot web site
  44. 44. Mochikit: Focus• Designed to fulfill common activities (All the way from low-level iteration to high- level Drag-and-Drop)• Hierarchical structure: Mochikit.DOM.addElementClass(...)
  45. 45. Mochikit: DOM Support• Only a couple DOM Traversal functions - no selectors (possibly coming in 1.4): $(“body”)• Plenty of helper functions for DOM modification: A({href: "test.html"}, "Test Page"); removeElementClass(“item”, “hilite”);
  46. 46. Mochikit: Events and Effects• Event structure uses signals & slots terminology: connect(“list”,”click”, function(){ alert(“List Clicked”); });• Plenty of visual effects too: blindDown(“list”, { duration: 0.5 });
  47. 47. Mochikit: Ajax• Ajax support is fully functional: doSimpleXMLHttpRequest("", {bar: "baz"});
  48. 48. Mochikit: Details• Lots of features (Rounded corners, drag- and-drop) - much like Dojo• Been a while since the last official update (April 2006)
  49. 49. Mochikit: Docs & Community• Documentation: Mixed Everything is physically documented, but the quality is mixed (e.g: blindDown: Blind an element down, restoring its vertical size)• Community: Small About 6 mailing list posts/day
  50. 50. Mochikit: File Size & Popularity• File Size: Large (100KB, compressed) It is recommended that you remove unused components and re-compress the code.• Popularity: Stagnant After almost a year and a half of existence, popularity has yet to surge.
  51. 51. Yahoo! UI
  52. 52. YUI: Overview• Released Feb 2006 by Yahoo!• Maintained and financed internally• Attempt to standardize internal JavaScript
  53. 53. YUI: Focus• Exposing, and solving, common methodologies• Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete)
  54. 54. YUI: DOM Support• DOM Traversal is minimal, no selectors: YAHOO.util.Dom.get(“list”)• DOM Modification is also minimal, modification only (no DOM creation): YAHOO.util.Dom.addClass(“list”,”hover”)
  55. 55. YUI: Events and Effects• Full Event support: YAHOO.util.Event.addEventListener( “list”, “click”, function(){ alert(“List Clicked”); });• Animations are also customizable: new YAHOO.util.Anim(“list”, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut );
  56. 56. YUI: Ajax• Ajax connections are simple to setup: YAHOO.util.Connect.asyncRequest( GET, “test.html”, function(){ alert(“File loaded”); }, null );
  57. 57. YUI: Details• Namespaces can become quite verbose. It is recommended that you copy namespaces to other variables. var dom = YAHOO.util.Dom;• Closed development (Yahoo employees only, no subversion repository)
  58. 58. YUI: Docs & Community• Documentation: Excellent Everything is thoroughly documented. Lots of explanations, plenty of demos.• Community: Moderate Mailing List hovering around 28 posts/day.
  59. 59. YUI: File Size & Popularity• File Size: 40KB (Compressed) Code is quite modular, you can remove un- used code easily.• Popularity: Moderate Many good bloggers talking about it.
  60. 60. Feature Summary DOM Events Effects Ajax Dojo / X / XPrototype X X - X jQuery X X X XMochikit / X X XYahoo UI / X X X
  61. 61. More Information• Dojo:• Prototype:• jQuery:• Mochikit:• Yahoo! UI:
  62. 62. Ajax Experience Presentations• Presentations on: • Dojo • Prototype & Scriptaculous • jQuery • Yahoo UI• Go to one that sounds interesting and enjoy!