JavaScript Libraries
   John Resig - October 2008
         http://ejohn.org/
    http://twitter.com/jeresig/
Question: How do you want
   to write JavaScript?
1) Plug-and-Play

• Drop in a “calendar widget” or “tabbed
  navigation”
• Little, to no, JavaScript experience required.
...
2) Some Assembly
         Required
• Write common utilities
 • Click a link, load a page via Ajax
 • Build a dynamic menu
...
3) Down-and-Dirty

• Write all JavaScript code from scratch
• Deal, directly, with browser bugs
• Quirksmode.org is your l...
What we’ve just seen...

• Widgets
• Libraries
• Raw JavaScript
What we’ve just seen...

• Widgets
• Libraries
• Raw JavaScript
Why use a library?

• Makes JavaScript bearable
• Gets the job done fast
• Simplifies cross-browser support
• Sort of like ...
What kind of libraries exist?
           Open Source       Commercial
                                Atlas
Client/      A...
What kind of libraries exist?
           Open Source       Commercial
                                Atlas
Client/      A...
Open Source Libraries
           Browser Only      Client/Server
           Scriptaculous
 Task                          A...
Open Source Libraries
           Browser Only      Client/Server
           Scriptaculous
 Task                          A...
Why these libraries?
March
  Developer Survey
jQuery   Prototype        Yahoo UI    Dojo                   Mootools
Other



                  ...
Google Trends
                                                                                                            ...
Not Included

• (Besides obvious time constraints.)
• ExtJS - Closed development
• ASP.NET Ajax - Mostly .NET developers
•...
The Libraries
Prototype
Prototype: Overview

• Started March 2005 by Sam Stephenson
• Incredibly popular, tied with Ruby on Rails’
  popularity
• ...
Prototype: Focus

• Improving the usability of the JavaScript
  language
• Big emphasis on adding in ‘missing’
  JavaScrip...
Prototype: Details

• Code quality is fantastic, great features
• All animations (and interactions) are in
  Scriptaculous...
jQuery
jQuery: Overview

• Released January 2006 by John Resig
• Rapid rise in popularity
• Many developers across the globe
• Co...
jQuery: Focus

• Improving the interaction between
  JavaScript and HTML
• Highly-effective, short, code
• Looking at jQue...
Yahoo! UI
YUI: Overview

• Released Feb 2006 by Yahoo!
• Maintained and financed internally
• Attempt to standardize internal JavaScr...
YUI: Focus
• Exposing, and solving, common
  methodologies
• Looking for common idioms (Drag-and-
  Drop, Calendar, Auto-C...
Dojo
Dojo: Overview

• Started early 2005 by Alex Russell + Co.
• Large development community
• Corporate backing (IBM, AOL)
Dojo: Focus
• Building complete web applications
• A package hierarchy, e.g.:
  dojo.addClass( ... )
• Focus has transcend...
Mootools
Mootools: Overview

• Released Sept 2006 by Valerio Proietti
• A spiritual fork of Prototype that included
  animations, d...
Mootools: Focus

• A clean classical structure
• A more holistic approach to development
• Tackle a solid core set of func...
What should a library have?
Code Base
• Core Functionality
 • DOM
 • Events
 • Ajax
 • Animations
• User Interface Widgets
Development

• Good Architecture
• Open Licensing
• Wide Browser Support
• Small File Size
Project

• Development Team (Open, Funded)
• Code in SVN / Bug Tracker
• Good Unit Test Coverage
Documentation

• Full API Coverage
• Plenty of Tutorials
• Some Books
• Wide variety of Demos
Community

• Active Mailing List / Forum
• Support and Training
• Popularity
Most Important
        Question:
• Does the JavaScript library help me to
  write JavaScript.
• The style of the library a...
Code Base
• Core Functionality
 • DOM
 • Events
 • Ajax
 • Animations
• User Interface Widgets
Core Functionality
• Bare minimum needed to make a dynamic
  “Ajax” web site:
 • DOM (Traversal and Manipulation)
 • Event...
DOM

• Traversal
 • Using CSS selectors to locate elements
• Modification
 • Create/remove/modify elements
 • Having a DOM ...
DOM Traversal

•   Prototype, Mootools:
    $$(“table > tr”)

•   jQuery:
    $(“div > p:nth-child(odd)”)

•   Dojo:
    d...
DOM Modification

•   Prototype:
    $(“list”).insert(“<li>Another item</li>”);

•   jQuery:
    $(“#li”).append(“<li>An it...
DOM Manipulation

•   Dojo:
    dojo.query(“#li”).addContent(“<li>An item</li>”);

•   Yahoo UI:
    Y.get(“#li”).appendCh...
Events
•   Support for simple event binding/removal
•   Support for custom events is essential
•   Prototype:
    $$(“#but...
Events (cont.)
•   Yahoo UI:
    Y.get(“#list”).on(“click”, function(){
        alert(“List Clicked”);
    });

•   Dojo:
...
Ajax
•   Request and load remote documents

•   Prototype:
    new Ajax.Request(“test.html”, {
        method: “GET”,
    ...
Ajax (cont.)
•   Yahoo UI
    Y.on(“io:complete”, function(id, data){
     Y.get(“#results”).set(“innerHTML”, data.respons...
Ajax (cont.)


• Mootools: onComplete: function(t, e, html){
  new Request.HTML({
    $$(“#results”).html( html );
  }}).g...
Ajax (cont.)
• jQuery and Mootools are capable of doing
  DOM traversing over XML
• jQuery.get(“test.xml”, function(xml){
...
Animations

• Simple animations (hide/show/toggle)
• Provide elegant transitions
• Prototype, using Scriptaculous:
  $(‘me...
Animations (cont.)

•   Yahoo UI:
    new Y.Anim({ node: “#list”, duration: 600, {
     to: {opacity: 1}}}).run();

•   Do...
Core Feature Summary
            DOM Events   Anim.   Ajax
Prototype    X     X       /      X
 jQuery      X     X      X...
User Interface Widgets

• Difficult to implement components, made
  easy
• Commonly used, save duplication
• Some common co...
User Interface Packages
• Only looking at officially-supported code:
 • Prototype has Scriptaculous
 • jQuery has jQuery UI...
Drag & Drop


• Drag an item from one location and drop in
  an other
• Supported by all libraries
Tree

•   A navigable hierarchy
    (like a folder/file
    explorer)

•   In Dojo and Yahoo UI
Grid


• An advanced table (resizable, editable, easily
  navigable)
• In Dojo and Yahoo UI
Modal Dialog


• Display confined content (usually drag &
  droppable) and confirmation dialogs
• In Dojo,Yahoo UI, and jQue...
Tabbed Pane


• Multiple panes of content navigable by a
  series of tabs
• In Dojo,Yahoo UI, and jQuery
Menu / Toolbar


• A list of navigable items (with sub-menus)
• In Dojo and Yahoo UI
Datepicker

•   An input for selecting a
    date (or a range of
    dates)

•   In Dojo,Yahoo UI, and
    jQuery
Slider


• A draggable input for entering a general,
  numerical, value
• In all libraries
Tons More!
• Color Picker (Dojo,YUI, jQuery)
• Layout (Dojo,YUI)
• Auto Complete (Dojo, Proto,YUI, jQuery)
• Selectables (...
Themeing

• A consistent look-and-feel for widgets
• jQuery,Yahoo UI, and Dojo provide
  themeing capabilities
• jQuery’s ...
Accessibility
• Taking in to consideration points from
  ARIA (Accessible Rich Internet
  Applications)
• Dojo is taking a...
Development

• Good Architecture
• Open Licensing
• Wide Browser Support
• Small File Size
• Speed
Architecture
• Bottom Up (Prototype, jQuery)
    vs. Top Down (Dojo,Yahoo UI)
• jQuery, Dojo, and Yahoo UI all use a singl...
Licensing

• All use liberal licenses
• MIT: (“Keep my name on the file”)
  Prototype, jQuery, Mootools
• BSD: (“...and ple...
Browser Support

• Everyone supports:
  IE 6+, Firefox 2+, Safari 3+, Opera 9+
• Note:
 • Most are in the process of dropp...
File Size
 • Serving your JavaScript minified + Gzipped
 • Optimal level of compression and speed
 • Core file size (in KB):...
Speed
• Hard to quantify
• Currently the only point of comparison is
  in CSS Selectors
 • Speed varies across browsers
 •...
Project

• Development Team (Open, Funded)
• Code in SVN / Bug Tracker
• Good Unit Test Coverage
Development Team

• Prototype, jQuery, Mootools, and Dojo all
  have open development (anyone can
  contribute)
• jQuery,Y...
SVN / Bug Tracker

• Prototype, jQuery, Mootools, and Dojo all
  have code in a public SVN repositories
• Yahoo UI’s devel...
Unit Tests
• All libraries have some automated unit
  tests
• jQuery,Yahoo UI, and Dojo all have public
  unit test URLs
•...
Documentation

• Full API Coverage
• Plenty of Tutorials
• Some Books
• Wide variety of Demos
API Documentation

• Prototype, jQuery, Mootools, and Yahoo UI
  all have full coverage
• Dojo’s coverage has improved dra...
Tutorials
• All libraries provide some tutorials
• jQuery,Yahoo UI, and Dojo have
  screencasts/presentations
• Prototype:...
Books
• Prototype:
 •   Prototype and Scriptaculous in Action (Manning)

 •   Prototype and Scriptaculous (Pragmatic)

• j...
Books (cont.)
• Dojo:
 • Dojo: The Definitive Guide (O’Reilly)
 • Mastering Dojo (Prag Prog)
 • Dojo (Developer’s Library)
...
Demos
• Yahoo UI provides a considerable number
  of live demos and examples for all features
• jQuery provides live examp...
Community

• Active Mailing List / Forum
• Support and Training
• Popularity
Mailing List / Forum
• Prototype, jQuery, Mootools, and Yahoo UI
  have mailing lists
 • Prototype: 32 posts/day
 • jQuery...
Support and Training

• Dojo provides paid support and training
  (via Sitepen)
• jQuery provides paid jQuery UI support
 ...
Popularity
• Who uses what:
 • Prototype: Apple, ESPN, CNN, Fox News
 • jQuery: Google, IBM, Microsoft, Nokia
 • Yahoo:Yah...
Common Questions
Why don’t the libraries
      merge?
• It’s really hard to have a unified backend
• Everyone fixes different bugs
• Everyone...
Can common
components be made?

• Possibly.
• Again hit the problem of finding the correct
  mix of features and bugs.
• Co...
Sizzle

• Build common features
• A common selector engine
• Being integrated into:
  jQuery, Prototype, and MochiKit
Why not make a unified
        API?

• A library’s API helps makes it unique
• Embody different philosophies
• Combining al...
More Information
      ... questions?
• Prototype:
  http://prototypejs.org/
• jQuery:
  http://jquery.com/
• Yahoo UI:
  ...
Upcoming SlideShare
Loading in...5
×

JavaScript Library Overview

57,753

Published on

Talk I gave at Ajax Experience '08.

Published in: Technology
2 Comments
73 Likes
Statistics
Notes
  • Fantastic slides. Thanks,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Actually Dojo has 'Selectables' --- it is a part of the DnD package, but can be used standalone. It is hard to DnD without multiple selection. ;-) You can play with it in Dojo tests: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/tests/dnd/test_selector.html and http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/tests/dnd/test_selector_markup.html.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
57,753
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
1,062
Comments
2
Likes
73
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript Library Overview"

  1. 1. JavaScript Libraries John Resig - October 2008 http://ejohn.org/ http://twitter.com/jeresig/
  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.org 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 all of C by hand
  9. 9. What kind of libraries exist? Open Source Commercial Atlas Client/ AjaxCFC Backbase for Server Qcodo Struts Prototype, jQuery, Browser Backbase Yahoo UI, Dojo, Only SmartClient Mootools
  10. 10. What kind of libraries exist? Open Source Commercial Atlas Client/ AjaxCFC Backbase for Server Qcodo Struts Prototype, jQuery, Browser Backbase Yahoo UI, Dojo, Only SmartClient Mootools
  11. 11. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specific Qcodo Open Rico Prototype, jQuery, General Ruby on Rails Yahoo UI, Dojo, Purpose CakePHP Mootools
  12. 12. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specific Qcodo Open Rico Prototype, jQuery, General Ruby on Rails Yahoo UI, Dojo, Purpose CakePHP Mootools
  13. 13. Why these libraries?
  14. 14. March Developer Survey jQuery Prototype Yahoo UI Dojo Mootools Other 18% 34% 18% 8% 8% 13% http://ajaxian.com/archives/nitobi-survey-results-on-ajax- development
  15. 15. Google Trends jQuery Prototype Mootools 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
  16. 16. Not Included • (Besides obvious time constraints.) • ExtJS - Closed development • ASP.NET Ajax - Mostly .NET developers • GWT - Strictly limited to Java developers
  17. 17. The Libraries
  18. 18. Prototype
  19. 19. Prototype: Overview • Started March 2005 by Sam Stephenson • Incredibly popular, tied with Ruby on Rails’ popularity • Development backed by 37 Signals
  20. 20. Prototype: Focus • Improving the usability of the JavaScript language • Big emphasis on adding in ‘missing’ JavaScript features • Clean structure, clean objects and ‘classes’
  21. 21. Prototype: Details • Code quality is fantastic, great features • All animations (and interactions) are in Scriptaculous • Looking at Prototype 1.6.0.2 • 1.6.0.3/1.6.1 release upcoming
  22. 22. jQuery
  23. 23. jQuery: Overview • Released January 2006 by John Resig • Rapid rise in popularity • Many developers across the globe • Corporate backing (Microsoft, Nokia)
  24. 24. jQuery: Focus • Improving the interaction between JavaScript and HTML • Highly-effective, short, code • Looking at jQuery 1.2.6 • 1.3 release upcoming
  25. 25. Yahoo! UI
  26. 26. YUI: Overview • Released Feb 2006 by Yahoo! • Maintained and financed internally • Attempt to standardize internal JavaScript
  27. 27. YUI: Focus • Exposing, and solving, common methodologies • Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete) • Yahoo UI 2.5.1 is current • Looking at 3.0 today (large overhaul)
  28. 28. Dojo
  29. 29. Dojo: Overview • Started early 2005 by Alex Russell + Co. • Large development community • Corporate backing (IBM, AOL)
  30. 30. Dojo: Focus • Building complete web applications • A package hierarchy, e.g.: dojo.addClass( ... ) • Focus has transcended into widgets (Dijit) • Huge number of features • Today we’re looking at Dojo 1.1.1 • 1.2 coming soon
  31. 31. Mootools
  32. 32. Mootools: Overview • Released Sept 2006 by Valerio Proietti • A spiritual fork of Prototype that included animations, drag and drop, etc. • (Borrowed concepts like native prototype extension and classical object construction.) • Has evolved dramatically since then
  33. 33. Mootools: Focus • A clean classical structure • A more holistic approach to development • Tackle a solid core set of functionality • Include a couple core plugins • Looking at 1.2
  34. 34. What should a library have?
  35. 35. Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets
  36. 36. Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size
  37. 37. Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage
  38. 38. Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos
  39. 39. Community • Active Mailing List / Forum • Support and Training • Popularity
  40. 40. Most Important Question: • Does the JavaScript library help me to write JavaScript. • The style of the library and its API is very core to this. • Can really only be determined through sitting down and playing with a library.
  41. 41. Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets
  42. 42. Core Functionality • Bare minimum needed to make a dynamic “Ajax” web site: • DOM (Traversal and Manipulation) • Events • Ajax • Animations
  43. 43. DOM • Traversal • Using CSS selectors to locate elements • Modification • Create/remove/modify elements • Having a DOM builder is important
  44. 44. DOM Traversal • Prototype, Mootools: $$(“table > tr”) • jQuery: $(“div > p:nth-child(odd)”) • Dojo: dojo.query(“table tr:nth-child(even)”) • Yahoo UI: Y.get('div p')
  45. 45. DOM Modification • Prototype: $(“list”).insert(“<li>Another item</li>”); • jQuery: $(“#li”).append(“<li>An item</li>”); • Mootools: $(“li”).append(new Element(“li”, {html: “An item”}));
  46. 46. DOM Manipulation • Dojo: dojo.query(“#li”).addContent(“<li>An item</li>”); • Yahoo UI: Y.get(“#li”).appendChild( Y.create(“<li>An item</li>”));
  47. 47. Events • Support for simple event binding/removal • Support for custom events is essential • Prototype: $$(“#button”).invoke(“observe”, ”click”, function(){ alert(“Thanks for the click!”); }); • jQuery: $(“div”).click(function(){ alert(“div clicked”); });
  48. 48. Events (cont.) • Yahoo UI: Y.get(“#list”).on(“click”, function(){ alert(“List Clicked”); }); • Dojo: dojo.query(quot;#mylinkquot;).connect(quot;clickquot;, function(){ alert(“Link clicked”); }); • Mootools: $$(quot;#mylinkquot;).addEvent(quot;clickquot;, function(){ alert(“Link clicked”); });
  49. 49. Ajax • Request and load remote documents • Prototype: new Ajax.Request(“test.html”, { method: “GET”, onComplete: function(res){ $$(‘#results’).invoke(“update”,( res.responseText ); } }); • jQuery: jQuery.get(“test.html”, function(html){ $(“#results”).html( html ); });
  50. 50. Ajax (cont.) • Yahoo UI Y.on(“io:complete”, function(id, data){ Y.get(“#results”).set(“innerHTML”, data.responseText); }); Y.io(“test.html”); • Dojo dojo.xhrGet({ url: quot;test.htmlquot;, load: function(type, data) { dojo.query(“#results”).empty().addContent( data ); } });
  51. 51. Ajax (cont.) • Mootools: onComplete: function(t, e, html){ new Request.HTML({ $$(“#results”).html( html ); }}).get('myPage.html');
  52. 52. Ajax (cont.) • jQuery and Mootools are capable of doing DOM traversing over XML • jQuery.get(“test.xml”, function(xml){ $(“user”, xml).each(function(){ $(“<li/>”).text( $(this).text() ) .appendTo(“#userlist”); }); });
  53. 53. Animations • Simple animations (hide/show/toggle) • Provide elegant transitions • Prototype, using Scriptaculous: $(‘menu’).appear({duration: 0.6}); • jQuery: $(“#menu”).animate({opacity: 1}, 600);
  54. 54. Animations (cont.) • Yahoo UI: new Y.Anim({ node: “#list”, duration: 600, { to: {opacity: 1}}}).run(); • Dojo: dojo.query(“#list”).anim({opacity: 1}, 600); • Mootools: new Fx.Tween(“list”, {duration: 600}).start(“opacity”, 0, 1);
  55. 55. Core Feature Summary DOM Events Anim. Ajax Prototype X X / X jQuery X X X X Yahoo UI X X X X Dojo X X X X Mootools X X X X
  56. 56. 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
  57. 57. User Interface Packages • Only looking at officially-supported code: • Prototype has Scriptaculous • jQuery has jQuery UI • Dojo has Dijit • Mootools includes some in Core • Included in Yahoo UI
  58. 58. Drag & Drop • Drag an item from one location and drop in an other • Supported by all libraries
  59. 59. Tree • A navigable hierarchy (like a folder/file explorer) • In Dojo and Yahoo UI
  60. 60. Grid • An advanced table (resizable, editable, easily navigable) • In Dojo and Yahoo UI
  61. 61. Modal Dialog • Display confined content (usually drag & droppable) and confirmation dialogs • In Dojo,Yahoo UI, and jQuery
  62. 62. Tabbed Pane • Multiple panes of content navigable by a series of tabs • In Dojo,Yahoo UI, and jQuery
  63. 63. Menu / Toolbar • A list of navigable items (with sub-menus) • In Dojo and Yahoo UI
  64. 64. Datepicker • An input for selecting a date (or a range of dates) • In Dojo,Yahoo UI, and jQuery
  65. 65. Slider • A draggable input for entering a general, numerical, value • In all libraries
  66. 66. Tons More! • Color Picker (Dojo,YUI, jQuery) • Layout (Dojo,YUI) • Auto Complete (Dojo, Proto,YUI, jQuery) • Selectables (Dojo, Proto, jQuery) • Accordion (Dojo, jQuery, Mootools) • WYSIWYG (Dojo,YUI)
  67. 67. Themeing • A consistent look-and-feel for widgets • jQuery,Yahoo UI, and Dojo provide themeing capabilities • jQuery’s and Yahoo UI’s are documented
  68. 68. 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 • Yahoo is investigating ARIA
  69. 69. Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size • Speed
  70. 70. Architecture • Bottom Up (Prototype, jQuery) vs. Top Down (Dojo,Yahoo UI) • jQuery, Dojo, and Yahoo UI all use a single namespace • Prototype extends native objects (high likelihood of inter-library conflict) • jQuery is extensible with plugins • Dojo uses a package system
  71. 71. Licensing • All use liberal licenses • MIT: (“Keep my name on the file”) Prototype, jQuery, Mootools • BSD: (“...and please don’t sue me.”) Yahoo UI, Dojo
  72. 72. Browser Support • Everyone supports: IE 6+, Firefox 2+, Safari 3+, Opera 9+ • Note: • Most are in the process of dropping support for Safari 2
  73. 73. 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 Mootools
  74. 74. Speed • Hard to quantify • Currently the only point of comparison is in CSS Selectors • Speed varies across browsers • Competition is strong (much faster than what they use to be) • DOM Modification, Events completely un- compared
  75. 75. Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage
  76. 76. Development Team • Prototype, jQuery, Mootools, and Dojo all have open development (anyone can contribute) • jQuery,Yahoo UI, and Dojo all have paid, full-time, developers working on the code • All have paid, part-time, developers
  77. 77. SVN / Bug Tracker • Prototype, jQuery, Mootools, and Dojo all have code in a public SVN repositories • Yahoo UI’s development is private and is limited to Yahoo employees • They’re working to fix this! • All have a public bug tracker
  78. 78. Unit Tests • All libraries have some automated unit tests • jQuery,Yahoo UI, and Dojo all have public unit test URLs • jQuery and Dojo have tests that can run in Rhino • UI Testing: Windmill,Yahoo UI, jQuery UI’s testing framework
  79. 79. Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos
  80. 80. API Documentation • Prototype, jQuery, Mootools, and Yahoo UI all have full coverage • Dojo’s coverage has improved dramatically • jQuery provides runnable examples with each API item
  81. 81. Tutorials • All libraries provide some tutorials • jQuery,Yahoo UI, and Dojo have screencasts/presentations • Prototype: 6 • jQuery: 118 (English) • Yahoo UI: 30+ (each component has at least one) • Dojo: 24
  82. 82. Books • Prototype: • Prototype and Scriptaculous in Action (Manning) • Prototype and Scriptaculous (Pragmatic) • jQuery: • Learning jQuery (Packt) • jQuery Reference Guide (Packt) • Yahoo UI: • Learning the Yahoo UI Library (Packt)
  83. 83. Books (cont.) • Dojo: • Dojo: The Definitive Guide (O’Reilly) • Mastering Dojo (Prag Prog) • Dojo (Developer’s Library) • Practical Dojo Projects (Apress) • Mootools: • Mootools Essentials (Apress)
  84. 84. Demos • Yahoo UI provides a considerable number of live demos and examples for all features • jQuery provides live examples and a few demo applications • Mootools provides a large number of demos • Dojo provides demo applications for their widgets
  85. 85. Community • Active Mailing List / Forum • Support and Training • Popularity
  86. 86. Mailing List / Forum • Prototype, jQuery, Mootools, and Yahoo UI have mailing lists • Prototype: 32 posts/day • jQuery: 116 posts/day • Yahoo UI: 55 posts/day • Mootools: 21 posts/day • Dojo has an active forum • Mootools also has a user-built forum
  87. 87. Support and Training • Dojo provides paid support and training (via Sitepen) • jQuery provides paid jQuery UI support and training (via Liferay)
  88. 88. Popularity • Who uses what: • Prototype: Apple, ESPN, CNN, Fox News • jQuery: Google, IBM, Microsoft, Nokia • Yahoo:Yahoo, LinkedIn, Target, Slashdot • Dojo: IBM, AOL, Mapquest, Bloglines • Mootools: W3C, CNet,Vimeo, Jeep
  89. 89. Common Questions
  90. 90. Why don’t the libraries merge? • It’s really hard to have a unified backend • Everyone fixes different bugs • Everyone implements *slightly* different features • A combined library would be massive
  91. 91. Can common components be made? • Possibly. • Again hit the problem of finding the correct mix of features and bugs. • Component would have to be very special.
  92. 92. Sizzle • Build common features • A common selector engine • Being integrated into: jQuery, Prototype, and MochiKit
  93. 93. Why not make a unified API? • A library’s API helps makes it unique • Embody different philosophies • Combining all of them and trying to please everyone creates a unified, boring, mess
  94. 94. More Information ... questions? • Prototype: http://prototypejs.org/ • jQuery: http://jquery.com/ • Yahoo UI: http://developer.yahoo.com/yui/ • Dojo: http://dojotoolkit.org/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×