SlideShare a Scribd company logo
1 of 83
Download to read offline
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.
• Just customize some options and go.
• No flexibility.
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.
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.
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 C stdlib - no one just codes all
  of C by hand
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
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
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
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
Why these libraries?
Ajaxian Survey
Prototype         jQuery   Yahoo UI                       Dojo




            20%

                           35%

        21%


                     25%
                                      http://ajaxian.com/archives/ajaxian-2007-survey-results
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
The Libraries
Prototype
Prototype: Overview

• Started early 2005 by Sam Stephenson
• Incredibly popular, tied with Ruby on Rails’
  popularity
• Development backed by 37 Signals
Prototype: Focus

• Improving the usability of the JavaScript
  language
• Big emphasis on adding in ‘missing’
  JavaScript features
• Clean structure, clean objects and ‘classes’
Prototype: Details

• Code quality is fantastic, great features
• All animations (and interactions) are in
  Scriptaculous
• Updated frequently
• Looking at Prototype 1.6.0
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
• Highly-effective, short, code
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
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-Complete)
• Looking at Yahoo UI 2.3.1
Dojo
Dojo: Overview

• Started early 2005 by Alex Russell + Co.
• Large development community
• Lots of corporate backing (IBM, AOL)
• Big code base, tons of features
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
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)
 • Events
 • Ajax
 • Animations
DOM

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

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

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

•   Dojo:
    dojo.query(“table tr:nth-child(even)”)

•   Yahoo UI:
    No querying support
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
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”);
    });
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”);
    });
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”,
        onComplete: function(res){
          $(‘results’).innerHTML = res.responseText;
        }
    });

•   jQuery:
    $(“#results”).load(“test.html”);
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;
      }
    });
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”);
        });
  });
Animations
• Simple animations (hide/show/toggle)
• Provide elegant transitions
• No animations in Prototype Core (see
  Scriptaculous, instead)
• jQuery:
  $(“#menu”).slideDown(“slow”);
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 });
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
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
User Interface Packages

• Only looking at officially-supported code:
 • Prototype has Scriptaculous
 • jQuery has jQuery UI
 • Dojo has Dijit
 • Included in Yahoo 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 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)
• Accordion (Dojo, jQuery)
• WYSIWYG (Dojo,YUI)
Themeing

• A consistent look-and-feel for widgets
• jQuery,Yahoo UI, and Dojo provide
  themeing capabilities
• jQuery’s and Yahoo UI’s are documented
Accessibility

• Taking in to consideration points from
  ARIA (Accessible Rich Internet
  Applications)
• Dojo is taking a solid lead, here
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 single
  namespace
• Prototype extends native objects (high
  likelihood of inter-library conflict)
• jQuery is extensible with plugins
Licensing

• All use liberal licenses (“Keep my name on
  the file, don’t sue me.”)
• MIT:
  Prototype, jQuery
• BSD:
  Yahoo UI, Dojo
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
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
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 Dojo all have paid,
  full-time, developers working on the code
• All have paid, part-time, developers
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
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
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
  each API item
• Dojo’s coverage is spotty - work in
  progress
Tutorials
• All libraries provide some tutorials
• jQuery and Yahoo UI have screencasts
• Prototype: 6
• jQuery: 68 (English)
• Yahoo UI: 32
• Dojo: 5
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
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
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 posts/day
 • Yahoo UI: 36 posts/day
• Dojo has an active forum
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:Yahoo, LinkedIn, Target, Slashdot
 • Dojo: IBM, AOL, Mapquest, Bloglines
More Information
• Prototype:
  http://prototypejs.org/
• jQuery:
  http://jquery.com/
• Yahoo UI:
  http://developer.yahoo.com/yui/
• Dojo:
  http://dojotoolkit.org/
Ajax Experience
      Presentations
• Presentations on:
 • Dojo (2)
 • Prototype (2) & Scriptaculous (1)
 • jQuery (3)
• Go to one that sounds interesting and
  enjoy!

More Related Content

What's hot

How AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design PatternsHow AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design PatternsRan Mizrahi
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Librariesjeresig
 
Intro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran MizrahiIntro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran MizrahiRan Mizrahi
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptForziatech
 
From YUI3 to K2
From YUI3 to K2From YUI3 to K2
From YUI3 to K2kaven yan
 
JavaScript Misunderstood
JavaScript MisunderstoodJavaScript Misunderstood
JavaScript MisunderstoodBhavya Siddappa
 
Javascript and Jquery Best practices
Javascript and Jquery Best practicesJavascript and Jquery Best practices
Javascript and Jquery Best practicesSultan Khan
 
ActiveJDBC - ActiveRecord implementation in Java
ActiveJDBC - ActiveRecord implementation in JavaActiveJDBC - ActiveRecord implementation in Java
ActiveJDBC - ActiveRecord implementation in Javaipolevoy
 
Intro to JavaScript Testing
Intro to JavaScript TestingIntro to JavaScript Testing
Intro to JavaScript TestingRan Mizrahi
 
Patterns for JVM languages - Geecon 2014
Patterns for JVM languages - Geecon 2014Patterns for JVM languages - Geecon 2014
Patterns for JVM languages - Geecon 2014Jaroslaw Palka
 
Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3Fabien Potencier
 
ActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group PresentationActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group Presentationipolevoy
 
JavaScript Best Pratices
JavaScript Best PraticesJavaScript Best Pratices
JavaScript Best PraticesChengHui Weng
 
How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for youSimon Willison
 
Javascript best practices
Javascript best practicesJavascript best practices
Javascript best practicesManav Gupta
 
Fundamental JavaScript [In Control 2009]
Fundamental JavaScript [In Control 2009]Fundamental JavaScript [In Control 2009]
Fundamental JavaScript [In Control 2009]Aaron Gustafson
 
Mastering Java Bytecode - JAX.de 2012
Mastering Java Bytecode - JAX.de 2012Mastering Java Bytecode - JAX.de 2012
Mastering Java Bytecode - JAX.de 2012Anton Arhipov
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
 

What's hot (20)

How AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design PatternsHow AngularJS Embraced Traditional Design Patterns
How AngularJS Embraced Traditional Design Patterns
 
Secrets of JavaScript Libraries
Secrets of JavaScript LibrariesSecrets of JavaScript Libraries
Secrets of JavaScript Libraries
 
Intro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran MizrahiIntro To JavaScript Unit Testing - Ran Mizrahi
Intro To JavaScript Unit Testing - Ran Mizrahi
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
 
Ajax Security
Ajax SecurityAjax Security
Ajax Security
 
From YUI3 to K2
From YUI3 to K2From YUI3 to K2
From YUI3 to K2
 
JavaScript Misunderstood
JavaScript MisunderstoodJavaScript Misunderstood
JavaScript Misunderstood
 
Javascript and Jquery Best practices
Javascript and Jquery Best practicesJavascript and Jquery Best practices
Javascript and Jquery Best practices
 
ActiveJDBC - ActiveRecord implementation in Java
ActiveJDBC - ActiveRecord implementation in JavaActiveJDBC - ActiveRecord implementation in Java
ActiveJDBC - ActiveRecord implementation in Java
 
Intro to JavaScript Testing
Intro to JavaScript TestingIntro to JavaScript Testing
Intro to JavaScript Testing
 
Patterns for JVM languages - Geecon 2014
Patterns for JVM languages - Geecon 2014Patterns for JVM languages - Geecon 2014
Patterns for JVM languages - Geecon 2014
 
Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3Design patterns revisited with PHP 5.3
Design patterns revisited with PHP 5.3
 
ActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group PresentationActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group Presentation
 
JavaScript Best Pratices
JavaScript Best PraticesJavaScript Best Pratices
JavaScript Best Pratices
 
How to make Ajax work for you
How to make Ajax work for youHow to make Ajax work for you
How to make Ajax work for you
 
Javascript best practices
Javascript best practicesJavascript best practices
Javascript best practices
 
Fundamental JavaScript [In Control 2009]
Fundamental JavaScript [In Control 2009]Fundamental JavaScript [In Control 2009]
Fundamental JavaScript [In Control 2009]
 
Mastering Java Bytecode - JAX.de 2012
Mastering Java Bytecode - JAX.de 2012Mastering Java Bytecode - JAX.de 2012
Mastering Java Bytecode - JAX.de 2012
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
JavaScript OOPs
JavaScript OOPsJavaScript OOPs
JavaScript OOPs
 

Viewers also liked

JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An IntroductionManvendra Singh
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureNicholas Zakas
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript ProgrammingSehwan Noh
 
Unobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQueryUnobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQuerySimon Willison
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScriptNicholas Zakas
 
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...Axway Appcelerator
 
Introduction to CoffeeScript
Introduction to CoffeeScriptIntroduction to CoffeeScript
Introduction to CoffeeScriptStalin Thangaraj
 
Happy Programming with CoffeeScript
Happy Programming with CoffeeScriptHappy Programming with CoffeeScript
Happy Programming with CoffeeScriptEddie Kao
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas
 
Dom API In Java Script
Dom API In Java ScriptDom API In Java Script
Dom API In Java ScriptRajat Pandit
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScriptTodd Anglin
 
Introduction about-ajax-framework
Introduction about-ajax-frameworkIntroduction about-ajax-framework
Introduction about-ajax-frameworkSakthi Bro
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
 
CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?Hayato Mizuno
 
Reverse Engineering Malicious Javascript
Reverse Engineering Malicious JavascriptReverse Engineering Malicious Javascript
Reverse Engineering Malicious JavascriptYusuf Motiwala
 
Linux Yaz Kampı 2016 pfSense Firewall ve Router Eğitim Dökümanı
Linux Yaz Kampı 2016 pfSense Firewall ve Router Eğitim DökümanıLinux Yaz Kampı 2016 pfSense Firewall ve Router Eğitim Dökümanı
Linux Yaz Kampı 2016 pfSense Firewall ve Router Eğitim Dökümanıİbrahim UÇAR
 

Viewers also liked (20)

JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
Unobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQueryUnobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQuery
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
 
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
Wynn Netherland: Accelerating Titanium Development with CoffeeScript, Compass...
 
Introduction to CoffeeScript
Introduction to CoffeeScriptIntroduction to CoffeeScript
Introduction to CoffeeScript
 
Happy Programming with CoffeeScript
Happy Programming with CoffeeScriptHappy Programming with CoffeeScript
Happy Programming with CoffeeScript
 
Java script for web developer
Java script for web developerJava script for web developer
Java script for web developer
 
JavaScript for Beginners
JavaScript for BeginnersJavaScript for Beginners
JavaScript for Beginners
 
Powershell Certificate
Powershell CertificatePowershell Certificate
Powershell Certificate
 
JavaScript
JavaScriptJavaScript
JavaScript
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
 
Dom API In Java Script
Dom API In Java ScriptDom API In Java Script
Dom API In Java Script
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
 
Introduction about-ajax-framework
Introduction about-ajax-frameworkIntroduction about-ajax-framework
Introduction about-ajax-framework
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
 
CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?
 
Reverse Engineering Malicious Javascript
Reverse Engineering Malicious JavascriptReverse Engineering Malicious Javascript
Reverse Engineering Malicious Javascript
 
Linux Yaz Kampı 2016 pfSense Firewall ve Router Eğitim Dökümanı
Linux Yaz Kampı 2016 pfSense Firewall ve Router Eğitim DökümanıLinux Yaz Kampı 2016 pfSense Firewall ve Router Eğitim Dökümanı
Linux Yaz Kampı 2016 pfSense Firewall ve Router Eğitim Dökümanı
 

Similar to JavaScript Library Overview

JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)jeresig
 
JavaScript Libraries (@Media)
JavaScript Libraries (@Media)JavaScript Libraries (@Media)
JavaScript Libraries (@Media)jeresig
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overviewjeresig
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for youSimon Willison
 
JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)jeresig
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)jeresig
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQueryAnil Kumar
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesMark Roden
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureSimon Willison
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupalBlackCatWeb
 
jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoiddmethvin
 
qooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkqooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkecker
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MITjeresig
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Libraryjeresig
 
Ajax Tutorial
Ajax TutorialAjax Tutorial
Ajax Tutorialoscon2007
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - IntroductionWebStackAcademy
 

Similar to JavaScript Library Overview (20)

JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
 
JavaScript Libraries (@Media)
JavaScript Libraries (@Media)JavaScript Libraries (@Media)
JavaScript Libraries (@Media)
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
 
JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
 
Jquery
JqueryJquery
Jquery
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
 
jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoid
 
qooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkqooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Framework
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
 
Jquery
JqueryJquery
Jquery
 
DOJO
DOJO DOJO
DOJO
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
 
Ajax Tutorial
Ajax TutorialAjax Tutorial
Ajax Tutorial
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
 

More from jeresig

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?jeresig
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarianjeresig
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)jeresig
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigationjeresig
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art Historyjeresig
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academyjeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art Historyjeresig
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Resultsjeresig
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysisjeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art Historyjeresig
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jeresig
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jeresig
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jeresig
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobilejeresig
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jeresig
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performancejeresig
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)jeresig
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)jeresig
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)jeresig
 

More from jeresig (20)

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art History
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
 

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
  • 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
  • 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
  • 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
  • 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!