JavaScript Libraries
  Ajax Experience - October 2007

      John Resig (ejohn.org)
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 is your lifel...
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/    AjaxCFC
     ...
What kind of libraries exist?
          Open Source   Commercial
                           Atlas
Client/    AjaxCFC
     ...
Open Source Libraries
          Browser Only    Client/Server
          Scriptaculous
 Task                       AjaxCFC
...
Open Source Libraries
          Browser Only    Client/Server
          Scriptaculous
 Task                       AjaxCFC
...
Why these libraries?
Ajaxian Survey
Prototype         jQuery   Yahoo UI                       Dojo




            20%

                       ...
Google Trends

                                                                                            Prototype
     ...
The Libraries
Prototype
Prototype: Overview

• Started early 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
jQuery: Focus

• Improving the interaction between
  JavaScript and HTML
• Finding elements then performing actions
• High...
jQuery: Details

• Core features are limited to DOM, Events,
  Effects, Ajax
• Other features can be added in via plugins
...
Yahoo! UI
YUI: Overview

• Released Feb 2006 by Yahoo!
• Maintained and financed internally
• Attempt to standardize internal JavaScript
YUI: Focus

• Exposing, and solving, common
  methodologies
• Looking for common idioms (Drag-and-
  Drop, Calendar, Auto-...
Dojo
Dojo: Overview

• Started early 2005 by Alex Russell + Co.
• Large development community
• Lots of corporate backing (IBM,...
Dojo: Focus
• Building complete web applications
• A package heirarchy, e.g.:
  dojo.addClass( ... )
• Focus has transcend...
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
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:
    $$(“table > tr”)

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

•   Dojo:
    dojo.query(...
DOM Modification

•   Prototype:
    Insertion.Bottom(“list”,”<li>Another item</li>”);

•   jQuery:
    $(“#li”).append(“<l...
Events
•   Support for simple event binding/removal
•   Support for custom events is essential
•   Prototype:
    Event.ob...
Events (cont.)

•   Yahoo UI:
    YAHOO.util.Event.addEventListener(“list”, “click”, function(){
        alert(“List Click...
Custom Events

• $(“#list”).bind(“drag”, function(){
     $(this).addClass(“dragged”);
  });
• $(“#test”).trigger(“drag”);
Ajax
•   Request and load remote documents

•   Prototype:
    new Ajax.Request(“test.html”, {
        method: “GET”,
    ...
Ajax (cont.)
•   Yahoo UI
    YAHOO.util.Connect.asyncRequest(
       'GET', “test.html”, function(data){
         YAHOO.u...
Ajax (cont.)
• jQuery is only one capable of doing DOM
  traversing over XML
• jQuery.get(“test.xml”, function(xml){
     ...
Animations
• Simple animations (hide/show/toggle)
• Provide elegant transitions
• No animations in Prototype Core (see
  S...
Animations (cont.)

•   Yahoo UI:
    new YAHOO.util.Anim(“list”, { width: { from: 10, to: 100 } }, 1,
       YAHOO.util.E...
Core Feature Summary
            DOM Events   Anim.   Ajax

Prototype    X     X       -      X

 jQuery      X     X     ...
User Interface Widgets
• ejohn.org <-- slides
• Difficult to implement components, made
  easy
• Commonly used, save duplic...
User Interface Packages

• Only looking at officially-supported code:
 • Prototype has Scriptaculous
 • jQuery has jQuery U...
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 jQuery
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)
• Layout (Dojo,YUI)
• Auto Complete (Dojo, Proto,YUI)
• Selectables (Proto, jQuery)
•...
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 ...
Development

• Good Architecture
• Open Licensing
• Wide Browser Support
• Small File Size
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 (“Keep my name on
  the file, don’t sue me.”)
• MIT:
  Prototype, jQuery
• BSD:
  Yah...
Browser Support

• Everyone supports:
  IE 6+, Firefox 2+, Safari 2+, Opera 9+
• Except:
 • Prototype doesn’t support Oper...
File Size
 • Serving your JavaScript minified + Gzipped
 • Optimal level of compression and speed
 • Core file size (in KB):...
Project

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

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

• Prototype, jQuery, and Dojo all have code
  in a public SVN repositor
• Yahoo UI’s development is pri...
Unit Tests

• All libraries have some automated unit
  tests
• jQuery,Yahoo UI, and Dojo all have public
  unit tests
• jQ...
Documentation

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

• Prototype, jQuery, and Yahoo UI all have full
  coverage
• jQuery provides runnable examples with
  e...
Tutorials
• All libraries provide some tutorials
• jQuery and Yahoo UI have screencasts
• Prototype: 6
• jQuery: 68 (Engli...
Books
• Prototype:
 •   Prototype and Scriptaculous in Action (Manning)

 •   Prototype and Scriptaculous (Pragmatic)

• j...
Demos

• Yahoo UI provides a considerable number
  of live demos and examples for all features
• jQuery provides live exam...
Community

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


• Dojo provides paid support and training
  (via Sitepen)
Popularity

• Who uses what:
 • Prototype: Apple, ESPN, CNN, Fox News
 • jQuery: Google, Amazon, Digg, NBC, Intel
 • Yahoo...
More Information
• Prototype:
  http://prototypejs.org/
• jQuery:
  http://jquery.com/
• Yahoo UI:
  http://developer.yaho...
Ajax Experience
      Presentations
• Presentations on:
 • Dojo (2)
 • Prototype (2) & Scriptaculous (1)
 • jQuery (3)
• G...
Upcoming SlideShare
Loading in …5
×

JavaScript Library Overview

102,269 views
101,174 views

Published on

JavaScript Library tutorial that I gave at the October 2007 Ajax Experience conference.

10 Comments
152 Likes
Statistics
Notes
  • Hello my dear how are you i hope that
    you are fine please try to contact me in
    my email (sandraprincess40@yahoo.co.uk)
    so that i will give you my picture for
    you to know who i am, and i am
    interested to make friend with you
    please try to contact me in my box because
    i don't have any access to reply your message
    in my facebook try to reply me in my
    email box ok.Thanks.
    Yours Truly Friend,
    Sandra.


    sandraprincess40@yahoo.co.uk
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Googleholic = JQUERY !!!!

    L.O.V.E.

    http://kumatte.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • hi
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • For posterity I'll note that YUI has querying support (CSS syntax) now: http://developer.yahoo.com/yui/selector

    (updates slide #40)

    thanks for posting these. great stuff.

    Thanks,
    Nate
    YUI Team, Yahoo!.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • For posterity I'll note that YUI has querying support (CSS syntax) now: http://developer.yahoo.com/yui/selector



    (updates sllide #40)



    thanks for posting these. great stuff.



    Thanks,

    Nate

    YUI Team, Yahoo!.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
102,269
On SlideShare
0
From Embeds
0
Number of Embeds
9,781
Actions
Shares
0
Downloads
3,080
Comments
10
Likes
152
Embeds 0
No embeds

No notes for slide

JavaScript Library Overview

  1. JavaScript Libraries Ajax Experience - October 2007 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 all of C by hand
  9. What kind of libraries exist? Open Source Commercial Atlas Client/ AjaxCFC Backbase for Server Qcodo Struts Prototype Browser jQuery Backbase Only Yahoo UI SmartClient Dojo
  10. What kind of libraries exist? Open Source Commercial Atlas Client/ AjaxCFC Backbase for Server Qcodo Struts Prototype Browser jQuery Backbase Only Yahoo UI SmartClient Dojo
  11. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specific Qcodo Open Rico Prototype General jQuery Ruby on Rails Purpose Yahoo UI CakePHP Dojo
  12. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specific Qcodo Open Rico Prototype General jQuery Ruby on Rails Purpose Yahoo UI CakePHP Dojo
  13. Why these libraries?
  14. Ajaxian Survey Prototype jQuery Yahoo UI Dojo 20% 35% 21% 25% http://ajaxian.com/archives/ajaxian-2007-survey-results
  15. Google Trends Prototype jQuery 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. The Libraries
  17. Prototype
  18. Prototype: Overview • Started early 2005 by Sam Stephenson • Incredibly popular, tied with Ruby on Rails’ popularity • Development backed by 37 Signals
  19. Prototype: Focus • Improving the usability of the JavaScript language • Big emphasis on adding in ‘missing’ JavaScript features • Clean structure, clean objects and ‘classes’
  20. Prototype: Details • Code quality is fantastic, great features • All animations (and interactions) are in Scriptaculous • Updated frequently • Looking at Prototype 1.6.0
  21. jQuery
  22. jQuery: Overview • Released January 2006 by John Resig • Rapid rise in popularity • Many developers across the globe
  23. jQuery: Focus • Improving the interaction between JavaScript and HTML • Finding elements then performing actions • Highly-effective, short, code
  24. jQuery: Details • Core features are limited to DOM, Events, Effects, Ajax • Other features can be added in via plugins • Looking at jQuery 1.2.1
  25. Yahoo! UI
  26. YUI: Overview • Released Feb 2006 by Yahoo! • Maintained and financed internally • Attempt to standardize internal JavaScript
  27. YUI: Focus • Exposing, and solving, common methodologies • Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete) • Looking at Yahoo UI 2.3.1
  28. Dojo
  29. Dojo: Overview • Started early 2005 by Alex Russell + Co. • Large development community • Lots of corporate backing (IBM, AOL) • Big code base, tons of features
  30. 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 0.9
  31. What should a library have?
  32. Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets
  33. Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size
  34. Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage
  35. Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos
  36. Community • Active Mailing List / Forum • Support and Training • Popularity
  37. Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets
  38. Core Functionality • Bare minimum needed to make a dynamic “Ajax” web site: • DOM (Traversal and Manipulation) • Events • Ajax • Animations
  39. DOM • Traversal • Using CSS selectors to locate elements • Modification • Create/remove/modify elements • Having a DOM builder is important
  40. DOM Traversal • Prototype: $$(“table > tr”) • jQuery: $(“div > p:nth-child(odd)”) • Dojo: dojo.query(“table tr:nth-child(even)”) • Yahoo UI: No querying support
  41. 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
  42. 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”); });
  43. Events (cont.) • Yahoo UI: YAHOO.util.Event.addEventListener(“list”, “click”, function(){ alert(“List Clicked”); }); • Dojo: dojo.connect(dojo.byId(quot;mylinkquot;), quot;clickquot;, function(){ alert(“Link clicked”); });
  44. Custom Events • $(“#list”).bind(“drag”, function(){ $(this).addClass(“dragged”); }); • $(“#test”).trigger(“drag”);
  45. 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”);
  46. 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: quot;test.htmlquot;, method: quot;getquot;, mimetype: quot;text/htmlquot;, load: function(type, data) { dojo.byId(“results”).innerHTML = data; } });
  47. 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”); }); });
  48. Animations • Simple animations (hide/show/toggle) • Provide elegant transitions • No animations in Prototype Core (see Scriptaculous, instead) • jQuery: $(“#menu”).slideDown(“slow”);
  49. 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 });
  50. Core Feature Summary DOM Events Anim. Ajax Prototype X X - X jQuery X X X X Yahoo UI / X X X Dojo / X X X
  51. User Interface Widgets • ejohn.org <-- slides • 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
  52. User Interface Packages • Only looking at officially-supported code: • Prototype has Scriptaculous • jQuery has jQuery UI • Dojo has Dijit • Included in Yahoo UI
  53. Drag & Drop • Drag an item from one location and drop in an other • Supported by all libraries
  54. Tree • A navigable hierarchy (like a folder/file explorer) • In Dojo and Yahoo UI
  55. Grid • An advanced table (resizable, editable, easily navigable) • In Dojo and Yahoo UI
  56. Modal Dialog • Display confined content (usually drag & droppable) and confirmation dialogs • In Dojo,Yahoo UI, and jQuery
  57. Tabbed Pane • Multiple panes of content navigable by a series of tabs • In Dojo,Yahoo UI, and jQuery
  58. Menu / Toolbar • A list of navigable items (with sub-menus) • In Dojo and Yahoo UI
  59. Datepicker • An input for selecting a date (or a range of dates) • In Dojo,Yahoo UI, and jQuery
  60. Slider • A draggable input for entering a general, numerical, value • In all libraries
  61. Tons More! • Color Picker (Dojo,YUI) • Layout (Dojo,YUI) • Auto Complete (Dojo, Proto,YUI) • Selectables (Proto, jQuery) • Accordion (Dojo, jQuery) • WYSIWYG (Dojo,YUI)
  62. Themeing • A consistent look-and-feel for widgets • jQuery,Yahoo UI, and Dojo provide themeing capabilities • jQuery’s and Yahoo UI’s are documented
  63. Accessibility • Taking in to consideration points from ARIA (Accessible Rich Internet Applications) • Dojo is taking a solid lead, here
  64. Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size
  65. 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
  66. Licensing • All use liberal licenses (“Keep my name on the file, don’t sue me.”) • MIT: Prototype, jQuery • BSD: Yahoo UI, Dojo
  67. Browser Support • Everyone supports: IE 6+, Firefox 2+, Safari 2+, Opera 9+ • Except: • Prototype doesn’t support Opera • Dojo is dropping support for Safari 2
  68. 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
  69. Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage
  70. Development Team • Prototype, jQuery, 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
  71. SVN / Bug Tracker • Prototype, jQuery, and Dojo all have code in a public SVN repositor • Yahoo UI’s development is private and is limited to Yahoo employees • All libraries have a public bug tracker
  72. Unit Tests • All libraries have some automated unit tests • jQuery,Yahoo UI, and Dojo all have public unit tests • jQuery and Dojo have tests that can run in Rhino
  73. Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos
  74. API Documentation • Prototype, jQuery, and Yahoo UI all have full coverage • jQuery provides runnable examples with each API item • Dojo’s coverage is spotty - work in progress
  75. Tutorials • All libraries provide some tutorials • jQuery and Yahoo UI have screencasts • Prototype: 6 • jQuery: 68 (English) • Yahoo UI: 32 • Dojo: 5
  76. Books • Prototype: • Prototype and Scriptaculous in Action (Manning) • Prototype and Scriptaculous (Pragmatic) • jQuery: • Learning jQuery (Packt) • jQuery Reference Guide (Packt) • Yahoo UI: None • Dojo: A short online book
  77. Demos • Yahoo UI provides a considerable number of live demos and examples for all features • jQuery provides live examples and a few demo applications • Dojo provides demo applications for their widgets
  78. Community • Active Mailing List / Forum • Support and Training • Popularity
  79. Mailing List / Forum • Prototype, jQuery, and Yahoo UI have mailing lists • Prototype: 23 posts/day • jQuery: 108 posts/day • Yahoo UI: 36 posts/day • Dojo has an active forum
  80. Support and Training • Dojo provides paid support and training (via Sitepen)
  81. 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
  82. More Information • Prototype: http://prototypejs.org/ • jQuery: http://jquery.com/ • Yahoo UI: http://developer.yahoo.com/yui/ • Dojo: http://dojotoolkit.org/
  83. Ajax Experience Presentations • Presentations on: • Dojo (2) • Prototype (2) & Scriptaculous (1) • jQuery (3) • Go to one that sounds interesting and enjoy!

×