JavaScript Library Overview
Upcoming SlideShare
Loading in...5
×
 

JavaScript Library Overview

on

  • 88,830 views

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

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

Statistics

Views

Total Views
88,830
Views on SlideShare
77,250
Embed Views
11,580

Actions

Likes
147
Downloads
3,027
Comments
10

176 Embeds 11,580

http://woork.blogspot.com 3288
http://ejohn.org 2649
http://www.dreamcss.com 1518
http://www.phpeye.com 781
http://woork.blogspot.in 425
http://www.mypress.jp 353
http://www.ict.teno.be 291
http://podlipensky.com 235
http://phpeye.com 194
http://www.brunomacaco.com.br 166
http://www.slideshare.net 127
http://www.getincss.ru 124
http://acidminds.com 85
http://www.techpresentations.org 85
http://www.jesuscarrera.info 80
http://www.mimul.com 61
http://woork.blogspot.de 51
http://www.julien-verkest.fr 43
http://monw3c.blogbus.com 41
http://woork.blogspot.ca 40
http://woork.blogspot.it 38
http://dreamcss.blogspot.com 35
http://woork.blogspot.co.uk 32
http://woork.blogspot.com.br 31
http://blackboard.swan.ac.uk 30
http://aitamelearning.blogspot.in 28
http://feeds.feedburner.com 28
http://woork.blogspot.fr 27
http://www.adaptavist.com 25
http://moin.neocoin.net 25
http://danielwang130.blogspot.tw 22
http://woork.blogspot.com.es 22
http://www.sharingship.com 21
http://www.netvibes.com 21
http://jsgt.org 19
http://woork.blogspot.mx 19
http://woork.blogspot.pt 18
http://205.178.136.112 17
http://www.cpjobling.org.uk 16
http://translate.googleusercontent.com 16
http://woork.blogspot.com.ar 16
http://gotoweb.egloos.com 16
http://www.human-engineer.com 14
http://woork.blogspot.ro 13
http://webcache.googleusercontent.com 13
http://woork.blogspot.ru 13
https://www.adaptavist.com 12
http://danielwang130.blogspot.com 12
http://woork.blogspot.be 10
http://note2read.blogspot.com 10
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 10 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hello my dear how are you i hope that
    you are fine please try to contact me in
    my email (sandraprincess40@yahoo.co.uk)
    so that i will give you my picture for
    you to know who i am, and i am
    interested to make friend with you
    please try to contact me in my box because
    i don't have any access to reply your message
    in my facebook try to reply me in my
    email box ok.Thanks.
    Yours Truly Friend,
    Sandra.


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

    L.O.V.E.

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

    (updates slide #40)

    thanks for posting these. great stuff.

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



    (updates sllide #40)



    thanks for posting these. great stuff.



    Thanks,

    Nate

    YUI Team, Yahoo!.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript Library Overview JavaScript Library Overview Presentation Transcript

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