• Like
JavaScript Libraries (Ajax Exp 2006)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

JavaScript Libraries (Ajax Exp 2006)

  • 2,772 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,772
On SlideShare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
9
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript Libraries Ajax Experience - Oct 2006 John Resig (ejohn.org)
  • 2. Question: How do you want to write JavaScript?
  • 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. 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. 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. What we’ve just seen...• Widgets• Libraries• Raw JavaScript
  • 7. What we’ve just seen...• Widgets• Libraries• Raw JavaScript
  • 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. What kind of libraries exist? Open Source Commercial AtlasClient/ AjaxCFC Backbase forServer Qcodo Struts Prototype DojoBrowser Backbase jQuery Only SmartClient Mochikit Yahoo UI
  • 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. 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. 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. What should a library have?• DOM Traversing/Manipulation• Event binding• Ajax Support• Basic Animations
  • 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. Secondary Features• Documentation• Community Support• File Size• Popularity
  • 16. Secondary Features (Practical)• Documentation• Community Support• File Size• Popularity (Esoteric)
  • 17. The Libraries
  • 18. Dojo
  • 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. Dojo: Focus• Building complete web applications• A package heirarchy, e.g.: dojo.html.addClass( ... )• Focus has transcended into widgets• Huge number of features
  • 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. 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. 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. 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. 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. Prototype
  • 27. Prototype: Overview• Started early 2005 by Sam Stephenson• Incredibly popular, tied with Ruby on Rails’ popularity• Development backed by 37 Signals
  • 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. 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. 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. Prototype: Details• Code quality is fantastic, great features• No support for animations • moo.fx • Script.aculo.us• Updates are very infrequent (most recent release is over a year old)
  • 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. 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. jQuery
  • 35. jQuery: Overview• Released January 2006 by John Resig• Rapid rise in popularity• Many developers across the globe
  • 36. jQuery: Focus• Improving the interaction between JavaScript and HTML• Finding elements then performing actions• Highly-effective, short, code
  • 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. 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. 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. jQuery: Docs & Community• Documentation: Complete Fully documented, complete API.• Community: Vibrant 91+ Mailing List Posts/Day
  • 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. Mochikit
  • 43. Mochikit: Overview• Released July 2005 by Bob Ippolito• Managed and sponsored by MochiMedia• Developed to power their Mochibot web site
  • 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. 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. 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. Mochikit: Ajax• Ajax support is fully functional: doSimpleXMLHttpRequest("http://example.com", {bar: "baz"});
  • 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. 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. 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. Yahoo! UI
  • 52. YUI: Overview• Released Feb 2006 by Yahoo!• Maintained and financed internally• Attempt to standardize internal JavaScript
  • 53. YUI: Focus• Exposing, and solving, common methodologies• Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete)
  • 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. 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. YUI: Ajax• Ajax connections are simple to setup: YAHOO.util.Connect.asyncRequest( GET, “test.html”, function(){ alert(“File loaded”); }, null );
  • 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. 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. 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. 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. More Information• Dojo: http://dojotoolkit.org/• Prototype: http://prototype.conio.net/• jQuery: http://jquery.com/• Mochikit: http://mochikit.com/• Yahoo! UI: http://developer.yahoo.com/yui/
  • 62. Ajax Experience Presentations• Presentations on: • Dojo • Prototype & Scriptaculous • jQuery • Yahoo UI• Go to one that sounds interesting and enjoy!