Page 0: Page 1: JavaScript Libraries John Resig - May 2008 http://ejohn.org/ http://twitter.com/jeresig/ Page 2: Question: How do you want to write JavaScript? Page 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. Page 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. Page 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. Page 6: What we’ve just seen... • Widgets • Libraries • Raw JavaScript Page 7: What we’ve just seen... • Widgets • Libraries • Raw JavaScript Page 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 all of C by hand Page 9: What kind of libraries exist? Open Source Client/ Server AjaxCFC Qcodo Prototype jQuery Yahoo UI Dojo Commercial Atlas Backbase for Struts Backbase SmartClient Browser Only Page 10: What kind of libraries exist? Open Source Client/ Server AjaxCFC Qcodo Prototype jQuery Yahoo UI Dojo Commercial Atlas Backbase for Struts Backbase SmartClient Browser Only Page 11: Open Source Libraries Browser Only Task Specific Scriptaculous moo.fx Open Rico Prototype jQuery Yahoo UI Dojo Client/Server AjaxCFC Qcodo General Purpose Ruby on Rails CakePHP Page 12: Open Source Libraries Browser Only Task Specific Scriptaculous moo.fx Open Rico Prototype jQuery Yahoo UI Dojo Client/Server AjaxCFC Qcodo General Purpose Ruby on Rails CakePHP Page 13: Why these libraries? Page 14: Developer Survey jQuery Prototype Yahoo UI Dojo 14% 32% 22% 32% http://ajaxian.com/archives/nitobi-survey-results-on-ajaxdevelopment Page 15: Google Trends jQuery Prototype Dojo Yahoo UI http://google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+yui+javascript%2C+dojo+javascript&ctab=0&geo=all&date=all&sort=0 Page 16: Others • MooTools • ExtJS • Ajax.NET Page 17: The Libraries Page 18: Prototype Page 19: Prototype: Overview • Started early 2005 by Sam Stephenson • Incredibly popular, tied with Ruby on Rails’ popularity • Development backed by 37 Signals Page 20: Prototype: Focus • Improving the usability of the JavaScript language • Big emphasis on adding in ‘missing’ JavaScript features • Clean structure, clean objects and ‘classes’ Page 21: Prototype: Details • Code quality is fantastic, great features • All animations (and interactions) are in Scriptaculous • Updated frequently • Looking at Prototype 1.6.0.2 Page 22: jQuery Page 23: jQuery: Overview • Released January 2006 by John Resig • Rapid rise in popularity • Many developers across the globe Page 24: jQuery: Focus • Improving the interaction between JavaScript and HTML • Finding elements then performing actions • Highly-effective, short, code Page 25: jQuery: Details • Core features are limited to DOM, Events, Effects, Ajax • Other features can be added in via plugins • Looking at jQuery 1.2.6 Page 26: Yahoo! UI Page 27: YUI: Overview • Released Feb 2006 by Yahoo! • Maintained and financed internally • Attempt to standardize internal JavaScript • Say ‘hi’ to Nate Koechley! Page 28: YUI: Focus • Exposing, and solving, common methodologies • Looking for common idioms (Drag-andDrop, Calendar, Auto-Complete) • Looking at Yahoo UI 2.5.1 Page 29: Dojo Page 30: Dojo: Overview • Started early 2005 by Alex Russell + Co. • Large development community • Lots of corporate backing (IBM, AOL) • Big code base, tons of features Page 31: Dojo: Focus • Building complete web applications • A package heirarchy, e.g.: dojo.addClass( ... ) • Focus has transcended into widgets (Dijit) • Huge number of features • Today we’re looking at Dojo 1.1.1 Page 32: What should a library have? Page 33: Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets Page 34: Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size Page 35: Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage Page 36: Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos Page 37: Community • Active Mailing List / Forum • Support and Training • Popularity Page 38: Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets Page 39: Core Functionality • Bare minimum needed to make a dynamic “Ajax” web site: • DOM (Traversal and Manipulation) • Events • Ajax • Animations Page 40: DOM • Traversal • Using CSS selectors to locate elements • Modification • Create/remove/modify elements • Having a DOM builder is important Page 41: DOM Traversal • • • • Prototype: $$(“table > tr”) jQuery: $(“div > p:nth-child(odd)”) Dojo: dojo.query(“table tr:nth-child(even)”) Yahoo UI: YAHOO.util.Selector.query('div p') Page 42: DOM Modification • • • Prototype: Insertion.Bottom(“list”,”<li>Another item</li>”); jQuery: $(“#li”).append(“<li>An item</li>”); Dojo and Yahoo UI have weak support - no DOM building capabilities, basic property modification Page 43: Events • • • • Support for simple event binding/removal Support for custom events is essential Prototype: Event.observe(“button”,”click”, function(){ alert(“Thanks for the click!”); }); jQuery: $(“div”).click(function(){ alert(“div clicked”); }); Page 44: Events (cont.) • • Yahoo UI: YAHOO.util.Event.addEventListener(“list”, “click”, function(){ alert(“List Clicked”); }); Dojo: dojo.connect(dojo.byId("mylink"), "click", function(){ alert(“Link clicked”); }); Page 45: Custom Events • $(“#list”).bind(“drag”, function(){ $(this).addClass(“dragged”); }); • $(“#test”).trigger(“drag”); Page 46: Ajax • • Request and load remote documents Prototype: new Ajax.Request(“test.html”, { method: “GET”, onComplete: function(res){ $(‘results’).innerHTML = res.responseText; } }); jQuery: $(“#results”).load(“test.html”); • Page 47: Ajax (cont.) • Yahoo UI YAHOO.util.Connect.asyncRequest( 'GET', “test.html”, function(data){ YAHOO.util.Dom.id(“results”).innerHTML = data; } ); Dojo dojo.io.bind({ url: "test.html", method: "get", mimetype: "text/html", load: function(type, data) { dojo.byId(“results”).innerHTML = data; } }); • Page 48: Ajax (cont.) • jQuery is only one capable of doing DOM traversing over XML • jQuery.get(“test.xml”, function(xml){ $(“user”, xml).each(function(){ $(“<li/>”).text( $(this).text() ) .appendTo(“#userlist”); }); }); Page 49: Animations • Simple animations (hide/show/toggle) • Provide elegant transitions • No animations in Prototype Core (see Scriptaculous, instead) • jQuery: $(“#menu”).slideDown(“slow”); Page 50: Animations (cont.) • • Yahoo UI: new YAHOO.util.Anim(“list”, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut ); Dojo: dojo.fadeOut({ node: dojo.byId(“list”), duration: 500 }); Page 51: Core Feature Summary DOM Events Prototype jQuery Yahoo UI Dojo X X / / X X X X Anim. X X X Ajax X X X X Page 52: User Interface Widgets • Difficult to implement components, made easy • Commonly used, save duplication • Some common components: Drag & Drop, Tree, Grid, Modal Dialog, Tabbed Pane, Menu / Toolbar, Datepicker, Slider Page 53: User Interface Packages • Only looking at officially-supported code: • Prototype has Scriptaculous • jQuery has jQuery UI • Dojo has Dijit • Included in Yahoo UI Page 54: Drag & Drop • Drag an item from one location and drop in an other • Supported by all libraries Page 55: Tree • • A navigable hierarchy (like a folder/file explorer) In Dojo and Yahoo UI Page 56: Grid • An advanced table (resizable, editable, easily navigable) • In Dojo and Yahoo UI Page 57: Modal Dialog • Display confined content (usually drag & droppable) and confirmation dialogs • In Dojo,Yahoo UI, and jQuery Page 58: Tabbed Pane • Multiple panes of content navigable by a series of tabs • In Dojo,Yahoo UI, and jQuery Page 59: Menu / Toolbar • A list of navigable items (with sub-menus) • In Dojo and Yahoo UI Page 60: Datepicker • • An input for selecting a date (or a range of dates) In Dojo,Yahoo UI, and jQuery Page 61: Slider • A draggable input for entering a general, numerical, value • In all libraries Page 62: Tons More! • Color Picker (Dojo,YUI) • Layout (Dojo,YUI) • Auto Complete (Dojo, Proto,YUI) • Selectables (Proto, jQuery) • Accordion (Dojo, jQuery) • WYSIWYG (Dojo,YUI) Page 63: Themeing • A consistent look-and-feel for widgets • jQuery,Yahoo UI, and Dojo provide themeing capabilities • jQuery’s and Yahoo UI’s are documented Page 64: Accessibility • Taking in to consideration points from ARIA (Accessible Rich Internet Applications) • Dojo is taking a solid lead, here • jQuery received funding and is working on ARIA integration to jQuery UI Page 65: Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size Page 66: Architecture • Bottom Up (Prototype, jQuery) namespace vs. Top Down (Dojo,Yahoo UI) • jQuery, Dojo, and Yahoo UI all use a single • Prototype extends native objects (high likelihood of inter-library conflict) • jQuery is extensible with plugins • Dojo uses a package system Page 67: Licensing • All use liberal licenses (“Keep my name on the file, don’t sue me.”) Prototype, jQuery Yahoo UI, Dojo • MIT: • BSD: Page 68: Browser Support • Everyone supports: IE 6+, Firefox 2+, Safari 2+, Opera 9+ • Note: • Most are in the process of dropping support for Safari 2 Page 69: File Size • Serving your JavaScript minified + Gzipped • Optimal level of compression and speed • Core file size (in KB): 35.00 26.25 17.50 8.75 0 Prototype jQuery Yahoo UI Dojo Page 70: Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage Page 71: Development Team • Prototype, jQuery, and Dojo all have open development (anyone can contribute) • jQuery,Yahoo UI, and Dojo all have paid, • All have paid, part-time, developers full-time, developers working on the code Page 72: SVN / Bug Tracker • Prototype, jQuery, and Dojo all have code in a public SVN repositories limited to Yahoo employees • Yahoo UI’s development is private and is • All libraries have a public bug tracker • They’re working to fix this! Page 73: Unit Tests • All libraries have some automated unit tests • jQuery,Yahoo UI, and Dojo all have public unit test URLs Rhino • jQuery and Dojo have tests that can run in Page 74: Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos Page 75: API Documentation • Prototype, jQuery, and Yahoo UI all have full coverage • jQuery provides runnable examples with each API item • Dojo’s coverage is improving - work in progress (dojocampus.org, etc.) Page 76: Tutorials • All libraries provide some tutorials • jQuery,Yahoo UI, and Dojo have screencasts/presentations • Prototype: 6 • jQuery: 118 (English) • Yahoo UI: Numerous (each component has at least one) • Dojo: 24 Page 77: • Prototype: • jQuery: • • • • Books Prototype and Scriptaculous in Action (Manning) Prototype and Scriptaculous (Pragmatic) Learning jQuery (Packt) jQuery Reference Guide (Packt) • Yahoo UI: • Learning the Yahoo UI Library (Packt) • Dojo: 3 books coming in 2008 Page 78: Demos • Yahoo UI provides a considerable number • jQuery provides live examples and a few demo applications widgets of live demos and examples for all features • Dojo provides demo applications for their Page 79: Community • Active Mailing List / Forum • Support and Training • Popularity Page 80: Mailing List / Forum • Prototype, jQuery, and Yahoo UI have mailing lists • Dojo has an active forum • Prototype: 23 posts/day • jQuery: 76 posts/day • Yahoo UI: 56 posts/day Page 81: Support and Training • Dojo provides paid support and training (via Sitepen) • jQuery provides paid jQuery UI support and training (via Liferay) Page 82: Popularity • Who uses what: • Prototype: Apple, ESPN, CNN, Fox News • jQuery: Google, Amazon, Digg, NBC, Intel • Yahoo:Yahoo, LinkedIn, Target, Slashdot • Dojo: IBM, AOL, Mapquest, Bloglines Page 83: More Information • Prototype: • jQuery: • Dojo: • Yahoo UI: http://prototypejs.org/ http://jquery.com/ http://developer.yahoo.com/yui/ http://dojotoolkit.org/ Page 84: