SlideShare ist ein Scribd-Unternehmen logo
1 von 89
Downloaden Sie, um offline zu lesen
JavaScript Libraries
      John Resig - May 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.
• 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?
Developer Survey
jQuery         Prototype    Yahoo UI                       Dojo




               14%

                           32%
         22%




                     32%
                                       http://ajaxian.com/archives/nitobi-survey-results-on-ajax-
                                       development
Google Trends

                                                                                           jQuery
                                                                                           Prototype
                                                                                            Dojo
                                                                                            Yahoo UI




http://google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+yui+javascript%2C+dojo+javascript&ctab=0&geo=all&date=all&sort=0
Others

• Only so much time in a day!
 • MooTools
 • ExtJS
 • Ajax.NET
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.2
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.6
Yahoo! UI
YUI: Overview

• Released Feb 2006 by Yahoo!
• Maintained and financed internally
• Attempt to standardize internal JavaScript
• Say ‘hi’ to Nate Koechley!
YUI: Focus

• Exposing, and solving, common
  methodologies
• Looking for common idioms (Drag-and-
  Drop, Calendar, Auto-Complete)
• Looking at Yahoo UI 2.5.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 1.1.1
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 and its API is very
  core to this.
• Can really only be determined through
  sitting down and playing with a library.
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:
    YAHOO.util.Selector.query('div p')
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

• 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
• jQuery received funding and is working on
  ARIA integration to jQuery UI
• Yahoo is investigating ARIA
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 single
  namespace
• Prototype extends native objects (high
  likelihood of inter-library conflict)
• jQuery is extensible with plugins
• Dojo uses a package system
Licensing

• All use liberal licenses
• MIT: (“Keep my name on the file”)
  Prototype, jQuery
• BSD: (“...and please don’t sue me.”)
  Yahoo UI, Dojo
Browser Support

• Everyone supports:
  IE 6+, Firefox 2+, Safari 2+, Opera 9+
• Note:
 • Most are in the process of 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
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
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 repositories
• Yahoo UI’s development is private and is
  limited to Yahoo employees
  • They’re working to fix this!
• 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 test URLs
• 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 improving - work in
  progress (dojocampus.org, etc.)
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
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)
• Dojo: 3 books coming in 2008
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: 76 posts/day
 • Yahoo UI: 56 posts/day
• Dojo has an active forum
Support and Training

• Dojo provides paid support and training
  (via Sitepen)
• jQuery provides paid jQuery UI support
  and training (via Liferay)
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
Common Questions
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
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.
Why not make a unified
        API?

• A library’s API helps makes it unique
• Embody different philosophies
• Combing all of them and trying to please
  everyone creates a unified, boring, mess
More Information
      ... questions?
• Prototype:
  http://prototypejs.org/
• jQuery:
  http://jquery.com/
• Yahoo UI:
  http://developer.yahoo.com/yui/
• Dojo:
  http://dojotoolkit.org/

Weitere ähnliche Inhalte

Was ist angesagt?

jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');mikehostetler
 
jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoiddmethvin
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do MoreRemy Sharp
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterpriseDave Artz
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overviewjeresig
 
Reactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJSReactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJSMartin Hochel
 
Netvibes UWA workshop at ParisWeb 2007
Netvibes UWA workshop at ParisWeb 2007Netvibes UWA workshop at ParisWeb 2007
Netvibes UWA workshop at ParisWeb 2007Netvibes
 
An in-depth look at jQuery
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQueryPaul Bakaus
 
MVC pattern for widgets
MVC pattern for widgetsMVC pattern for widgets
MVC pattern for widgetsBehnam Taraghi
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreRemy Sharp
 
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
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuerycolinbdclark
 
Contextual jQuery
Contextual jQueryContextual jQuery
Contextual jQueryDoug Neiner
 
Reactive Type-safe WebComponents
Reactive Type-safe WebComponentsReactive Type-safe WebComponents
Reactive Type-safe WebComponentsMartin Hochel
 
User Interface Development with jQuery
User Interface Development with jQueryUser Interface Development with jQuery
User Interface Development with jQuerycolinbdclark
 
Nothing Hard Baked: Designing the Inclusive Web
Nothing Hard Baked: Designing the Inclusive WebNothing Hard Baked: Designing the Inclusive Web
Nothing Hard Baked: Designing the Inclusive Webcolinbdclark
 

Was ist angesagt? (20)

jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');jQuery('#knowledge').appendTo('#you');
jQuery('#knowledge').appendTo('#you');
 
jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoid
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
 
The jQuery Library
The  jQuery LibraryThe  jQuery Library
The jQuery Library
 
Reactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJSReactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJS
 
Netvibes UWA workshop at ParisWeb 2007
Netvibes UWA workshop at ParisWeb 2007Netvibes UWA workshop at ParisWeb 2007
Netvibes UWA workshop at ParisWeb 2007
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
FuncUnit
FuncUnitFuncUnit
FuncUnit
 
An in-depth look at jQuery
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQuery
 
MVC pattern for widgets
MVC pattern for widgetsMVC pattern for widgets
MVC pattern for widgets
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
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
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 
Contextual jQuery
Contextual jQueryContextual jQuery
Contextual jQuery
 
Reactive Type-safe WebComponents
Reactive Type-safe WebComponentsReactive Type-safe WebComponents
Reactive Type-safe WebComponents
 
User Interface Development with jQuery
User Interface Development with jQueryUser Interface Development with jQuery
User Interface Development with jQuery
 
Nothing Hard Baked: Designing the Inclusive Web
Nothing Hard Baked: Designing the Inclusive WebNothing Hard Baked: Designing the Inclusive Web
Nothing Hard Baked: Designing the Inclusive Web
 

Ähnlich wie JavaScript Libraries (@Media)

JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overviewjeresig
 
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 and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupalBlackCatWeb
 
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
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - IntroductionWebStackAcademy
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MITjeresig
 
Jquery(2)
Jquery(2)Jquery(2)
Jquery(2)tomcoh
 
Ajax Tutorial
Ajax TutorialAjax Tutorial
Ajax Tutorialoscon2007
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureSimon Willison
 
qooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkqooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkecker
 
jQuery - Boston IxDA
jQuery - Boston IxDAjQuery - Boston IxDA
jQuery - Boston IxDAjeresig
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Libraryjeresig
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013dmethvin
 
How dojo works
How dojo worksHow dojo works
How dojo worksAmit Tyagi
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesTeamstudio
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGuillaume Laforge
 

Ähnlich wie JavaScript Libraries (@Media) (20)

JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
 
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 and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
 
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
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
 
Jquery(2)
Jquery(2)Jquery(2)
Jquery(2)
 
Ajax Tutorial
Ajax TutorialAjax Tutorial
Ajax Tutorial
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
qooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkqooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Framework
 
Jquery
JqueryJquery
Jquery
 
jQuery - Boston IxDA
jQuery - Boston IxDAjQuery - Boston IxDA
jQuery - Boston IxDA
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
 
How dojo works
How dojo worksHow dojo works
How dojo works
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and Gaelyk
 

Mehr von 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
 

Mehr von 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)
 

Kürzlich hochgeladen

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 

Kürzlich hochgeladen (20)

Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 

JavaScript Libraries (@Media)

  • 1. JavaScript Libraries John Resig - May 2008 http://ejohn.org/ http://twitter.com/jeresig/
  • 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. Developer Survey jQuery Prototype Yahoo UI Dojo 14% 32% 22% 32% http://ajaxian.com/archives/nitobi-survey-results-on-ajax- development
  • 15. Google Trends jQuery Prototype Dojo Yahoo UI http://google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+yui+javascript%2C+dojo+javascript&ctab=0&geo=all&date=all&sort=0
  • 16. Others • Only so much time in a day! • MooTools • ExtJS • Ajax.NET
  • 19. Prototype: Overview • Started early 2005 by Sam Stephenson • Incredibly popular, tied with Ruby on Rails’ popularity • Development backed by 37 Signals
  • 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. Prototype: Details • Code quality is fantastic, great features • All animations (and interactions) are in Scriptaculous • Updated frequently • Looking at Prototype 1.6.0.2
  • 23. jQuery: Overview • Released January 2006 by John Resig • Rapid rise in popularity • Many developers across the globe
  • 24. jQuery: Focus • Improving the interaction between JavaScript and HTML • Finding elements then performing actions • Highly-effective, short, code
  • 25. jQuery: Details • Core features are limited to DOM, Events, Effects, Ajax • Other features can be added in via plugins • Looking at jQuery 1.2.6
  • 27. YUI: Overview • Released Feb 2006 by Yahoo! • Maintained and financed internally • Attempt to standardize internal JavaScript • Say ‘hi’ to Nate Koechley!
  • 28. YUI: Focus • Exposing, and solving, common methodologies • Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete) • Looking at Yahoo UI 2.5.1
  • 29. Dojo
  • 30. Dojo: Overview • Started early 2005 by Alex Russell + Co. • Large development community • Lots of corporate backing (IBM, AOL) • Big code base, tons of features
  • 31. Dojo: Focus • Building complete web applications • A package heirarchy, e.g.: dojo.addClass( ... ) • Focus has transcended into widgets (Dijit) • Huge number of features • Today we’re looking at Dojo 1.1.1
  • 32. What should a library have?
  • 33. Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets
  • 34. Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size
  • 35. Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage
  • 36. Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos
  • 37. Community • Active Mailing List / Forum • Support and Training • Popularity
  • 38. 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.
  • 39. Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets
  • 40. Core Functionality • Bare minimum needed to make a dynamic “Ajax” web site: • DOM (Traversal and Manipulation) • Events • Ajax • Animations
  • 41. DOM • Traversal • Using CSS selectors to locate elements • Modification • Create/remove/modify elements • Having a DOM builder is important
  • 42. DOM Traversal • Prototype: $$(“table > tr”) • jQuery: $(“div > p:nth-child(odd)”) • Dojo: dojo.query(“table tr:nth-child(even)”) • Yahoo UI: YAHOO.util.Selector.query('div p')
  • 43. 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
  • 44. 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”); });
  • 45. 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”); });
  • 46. Custom Events • $(“#list”).bind(“drag”, function(){ $(this).addClass(“dragged”); }); • $(“#test”).trigger(“drag”);
  • 47. 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”);
  • 48. 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; } });
  • 49. 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”); }); });
  • 50. Animations • Simple animations (hide/show/toggle) • Provide elegant transitions • No animations in Prototype Core (see Scriptaculous, instead) • jQuery: $(“#menu”).slideDown(“slow”);
  • 51. 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 });
  • 52. 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
  • 53. 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
  • 54. User Interface Packages • Only looking at officially-supported code: • Prototype has Scriptaculous • jQuery has jQuery UI • Dojo has Dijit • Included in Yahoo UI
  • 55. Drag & Drop • Drag an item from one location and drop in an other • Supported by all libraries
  • 56. Tree • A navigable hierarchy (like a folder/file explorer) • In Dojo and Yahoo UI
  • 57. Grid • An advanced table (resizable, editable, easily navigable) • In Dojo and Yahoo UI
  • 58. Modal Dialog • Display confined content (usually drag & droppable) and confirmation dialogs • In Dojo,Yahoo UI, and jQuery
  • 59. Tabbed Pane • Multiple panes of content navigable by a series of tabs • In Dojo,Yahoo UI, and jQuery
  • 60. Menu / Toolbar • A list of navigable items (with sub-menus) • In Dojo and Yahoo UI
  • 61. Datepicker • An input for selecting a date (or a range of dates) • In Dojo,Yahoo UI, and jQuery
  • 62. Slider • A draggable input for entering a general, numerical, value • In all libraries
  • 63. Tons More! • Color Picker (Dojo,YUI) • Layout (Dojo,YUI) • Auto Complete (Dojo, Proto,YUI) • Selectables (Proto, jQuery) • Accordion (Dojo, jQuery) • WYSIWYG (Dojo,YUI)
  • 64. Themeing • A consistent look-and-feel for widgets • jQuery,Yahoo UI, and Dojo provide themeing capabilities • jQuery’s and Yahoo UI’s are documented
  • 65. 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
  • 66. Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size • Speed
  • 67. 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
  • 68. Licensing • All use liberal licenses • MIT: (“Keep my name on the file”) Prototype, jQuery • BSD: (“...and please don’t sue me.”) Yahoo UI, Dojo
  • 69. Browser Support • Everyone supports: IE 6+, Firefox 2+, Safari 2+, Opera 9+ • Note: • Most are in the process of dropping support for Safari 2
  • 70. 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
  • 71. 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
  • 72. Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage
  • 73. 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
  • 74. SVN / Bug Tracker • Prototype, jQuery, 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 libraries have a public bug tracker
  • 75. 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
  • 76. Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos
  • 77. API Documentation • Prototype, jQuery, and Yahoo UI all have full coverage • jQuery provides runnable examples with each API item • Dojo’s coverage is improving - work in progress (dojocampus.org, etc.)
  • 78. 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
  • 79. 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) • Dojo: 3 books coming in 2008
  • 80. 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
  • 81. Community • Active Mailing List / Forum • Support and Training • Popularity
  • 82. Mailing List / Forum • Prototype, jQuery, and Yahoo UI have mailing lists • Prototype: 23 posts/day • jQuery: 76 posts/day • Yahoo UI: 56 posts/day • Dojo has an active forum
  • 83. Support and Training • Dojo provides paid support and training (via Sitepen) • jQuery provides paid jQuery UI support and training (via Liferay)
  • 84. 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
  • 86. 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
  • 87. 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.
  • 88. Why not make a unified API? • A library’s API helps makes it unique • Embody different philosophies • Combing all of them and trying to please everyone creates a unified, boring, mess
  • 89. More Information ... questions? • Prototype: http://prototypejs.org/ • jQuery: http://jquery.com/ • Yahoo UI: http://developer.yahoo.com/yui/ • Dojo: http://dojotoolkit.org/