Your SlideShare is downloading. ×
0
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Libraries (Ajax Exp 2006)

2,864

Published on

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

No Downloads
Views
Total Views
2,864
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
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!

×