JavaScript Libraries (Ajax Exp 2006)
2 likes3,100 views
The document discusses several popular JavaScript libraries including Dojo, Prototype, jQuery, Mochikit, and Yahoo UI. It compares the libraries based on their focus, DOM support, events/effects handling, documentation, community, file size, and popularity. The libraries provide a variety of features like DOM manipulation, Ajax capabilities, and animations to make JavaScript development easier.
JavaScript Libraries (Ajax Exp 2006)
- 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 Atlas Client/ AjaxCFC Backbase for Server Qcodo Struts Prototype Dojo Browser Backbase jQuery Only SmartClient Mochikit Yahoo UI
- 10. What kind of libraries exist? Open Source Commercial Atlas Client/ AjaxCFC Backbase for Server Qcodo Struts Prototype Dojo Browser Backbase jQuery Only SmartClient Mochikit Yahoo UI
- 11. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specific Qcodo Open Rico Prototype Dojo General Ruby on Rails jQuery Purpose CakePHP Mochikit Yahoo UI
- 12. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specific Qcodo Open Rico Prototype Dojo General Ruby on Rails jQuery Purpose 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 / X Prototype X X - X jQuery X X X X Mochikit / X X X Yahoo 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!