JavaScript Library Overview

  • 93,831 views
Uploaded on

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
  • Googleholic = JQUERY !!!!

    L.O.V.E.

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

    (updates slide #40)

    thanks for posting these. great stuff.

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



    (updates sllide #40)



    thanks for posting these. great stuff.



    Thanks,

    Nate

    YUI Team, Yahoo!.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
93,831
On Slideshare
0
From Embeds
0
Number of Embeds
52

Actions

Shares
Downloads
3,039
Comments
10
Likes
147

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript Libraries Ajax Experience - October 2007 John Resig (ejohn.org)
  • 2. Question: How do you want to write JavaScript?
  • 3. 1) Plug-and-Play • Drop in a “calendar widget” or “tabbed navigation” • Little, to no, JavaScript experience required. • Just customize some options and go. • No flexibility.
  • 4. 2) Some Assembly Required • Write common utilities • Click a link, load a page via Ajax • Build a dynamic menu • Creating interactive forms • Use pre-made code to distance yourself from browser bugs. • Flexible, until you hit a browser bug.
  • 5. 3) Down-and-Dirty • Write all JavaScript code from scratch • Deal, directly, with browser bugs • Quirksmode is your lifeline • Excessively flexible, to the point of hinderance.
  • 6. What we’ve just seen... • Widgets • Libraries • Raw JavaScript
  • 7. What we’ve just seen... • Widgets • Libraries • Raw JavaScript
  • 8. Why use a library? • Makes JavaScript bearable • Gets the job done fast • Simplifies cross-browser support • Sort of like C stdlib - no one just codes all of C by hand
  • 9. What kind of libraries exist? Open Source Commercial Atlas Client/ AjaxCFC Backbase for Server Qcodo Struts Prototype Browser jQuery Backbase Only Yahoo UI SmartClient Dojo
  • 10. What kind of libraries exist? Open Source Commercial Atlas Client/ AjaxCFC Backbase for Server Qcodo Struts Prototype Browser jQuery Backbase Only Yahoo UI SmartClient Dojo
  • 11. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specific Qcodo Open Rico Prototype General jQuery Ruby on Rails Purpose Yahoo UI CakePHP Dojo
  • 12. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specific Qcodo Open Rico Prototype General jQuery Ruby on Rails Purpose Yahoo UI CakePHP Dojo
  • 13. Why these libraries?
  • 14. Ajaxian Survey Prototype jQuery Yahoo UI Dojo 20% 35% 21% 25% http://ajaxian.com/archives/ajaxian-2007-survey-results
  • 15. Google Trends Prototype jQuery Dojo Yahoo UI http://google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+yui+javascript%2C+dojo+javascript&ctab=0&geo=all&date=all&sort=0
  • 16. The Libraries
  • 17. Prototype
  • 18. Prototype: Overview • Started early 2005 by Sam Stephenson • Incredibly popular, tied with Ruby on Rails’ popularity • Development backed by 37 Signals
  • 19. Prototype: Focus • Improving the usability of the JavaScript language • Big emphasis on adding in ‘missing’ JavaScript features • Clean structure, clean objects and ‘classes’
  • 20. Prototype: Details • Code quality is fantastic, great features • All animations (and interactions) are in Scriptaculous • Updated frequently • Looking at Prototype 1.6.0
  • 21. jQuery
  • 22. jQuery: Overview • Released January 2006 by John Resig • Rapid rise in popularity • Many developers across the globe
  • 23. jQuery: Focus • Improving the interaction between JavaScript and HTML • Finding elements then performing actions • Highly-effective, short, code
  • 24. jQuery: Details • Core features are limited to DOM, Events, Effects, Ajax • Other features can be added in via plugins • Looking at jQuery 1.2.1
  • 25. Yahoo! UI
  • 26. YUI: Overview • Released Feb 2006 by Yahoo! • Maintained and financed internally • Attempt to standardize internal JavaScript
  • 27. YUI: Focus • Exposing, and solving, common methodologies • Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete) • Looking at Yahoo UI 2.3.1
  • 28. Dojo
  • 29. Dojo: Overview • Started early 2005 by Alex Russell + Co. • Large development community • Lots of corporate backing (IBM, AOL) • Big code base, tons of features
  • 30. Dojo: Focus • Building complete web applications • A package heirarchy, e.g.: dojo.addClass( ... ) • Focus has transcended into widgets (Dijit) • Huge number of features • Today we’re looking at Dojo 0.9
  • 31. What should a library have?
  • 32. Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets
  • 33. Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size
  • 34. Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage
  • 35. Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos
  • 36. Community • Active Mailing List / Forum • Support and Training • Popularity
  • 37. Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets
  • 38. Core Functionality • Bare minimum needed to make a dynamic “Ajax” web site: • DOM (Traversal and Manipulation) • Events • Ajax • Animations
  • 39. DOM • Traversal • Using CSS selectors to locate elements • Modification • Create/remove/modify elements • Having a DOM builder is important
  • 40. DOM Traversal • Prototype: $$(“table > tr”) • jQuery: $(“div > p:nth-child(odd)”) • Dojo: dojo.query(“table tr:nth-child(even)”) • Yahoo UI: No querying support
  • 41. DOM Modification • Prototype: Insertion.Bottom(“list”,”<li>Another item</li>”); • jQuery: $(“#li”).append(“<li>An item</li>”); • Dojo and Yahoo UI have weak support - no DOM building capabilities, basic property modification
  • 42. Events • Support for simple event binding/removal • Support for custom events is essential • Prototype: Event.observe(“button”,”click”, function(){ alert(“Thanks for the click!”); }); • jQuery: $(“div”).click(function(){ alert(“div clicked”); });
  • 43. Events (cont.) • Yahoo UI: YAHOO.util.Event.addEventListener(“list”, “click”, function(){ alert(“List Clicked”); }); • Dojo: dojo.connect(dojo.byId(quot;mylinkquot;), quot;clickquot;, function(){ alert(“Link clicked”); });
  • 44. Custom Events • $(“#list”).bind(“drag”, function(){ $(this).addClass(“dragged”); }); • $(“#test”).trigger(“drag”);
  • 45. Ajax • Request and load remote documents • Prototype: new Ajax.Request(“test.html”, { method: “GET”, onComplete: function(res){ $(‘results’).innerHTML = res.responseText; } }); • jQuery: $(“#results”).load(“test.html”);
  • 46. Ajax (cont.) • Yahoo UI YAHOO.util.Connect.asyncRequest( 'GET', “test.html”, function(data){ YAHOO.util.Dom.id(“results”).innerHTML = data; } ); • Dojo dojo.io.bind({ url: quot;test.htmlquot;, method: quot;getquot;, mimetype: quot;text/htmlquot;, load: function(type, data) { dojo.byId(“results”).innerHTML = data; } });
  • 47. Ajax (cont.) • jQuery is only one capable of doing DOM traversing over XML • jQuery.get(“test.xml”, function(xml){ $(“user”, xml).each(function(){ $(“<li/>”).text( $(this).text() ) .appendTo(“#userlist”); }); });
  • 48. Animations • Simple animations (hide/show/toggle) • Provide elegant transitions • No animations in Prototype Core (see Scriptaculous, instead) • jQuery: $(“#menu”).slideDown(“slow”);
  • 49. Animations (cont.) • Yahoo UI: new YAHOO.util.Anim(“list”, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut ); • Dojo: dojo.fadeOut({ node: dojo.byId(“list”), duration: 500 });
  • 50. Core Feature Summary DOM Events Anim. Ajax Prototype X X - X jQuery X X X X Yahoo UI / X X X Dojo / X X X
  • 51. User Interface Widgets • ejohn.org <-- slides • Difficult to implement components, made easy • Commonly used, save duplication • Some common components: Drag & Drop, Tree, Grid, Modal Dialog, Tabbed Pane, Menu / Toolbar, Datepicker, Slider
  • 52. User Interface Packages • Only looking at officially-supported code: • Prototype has Scriptaculous • jQuery has jQuery UI • Dojo has Dijit • Included in Yahoo UI
  • 53. Drag & Drop • Drag an item from one location and drop in an other • Supported by all libraries
  • 54. Tree • A navigable hierarchy (like a folder/file explorer) • In Dojo and Yahoo UI
  • 55. Grid • An advanced table (resizable, editable, easily navigable) • In Dojo and Yahoo UI
  • 56. Modal Dialog • Display confined content (usually drag & droppable) and confirmation dialogs • In Dojo,Yahoo UI, and jQuery
  • 57. Tabbed Pane • Multiple panes of content navigable by a series of tabs • In Dojo,Yahoo UI, and jQuery
  • 58. Menu / Toolbar • A list of navigable items (with sub-menus) • In Dojo and Yahoo UI
  • 59. Datepicker • An input for selecting a date (or a range of dates) • In Dojo,Yahoo UI, and jQuery
  • 60. Slider • A draggable input for entering a general, numerical, value • In all libraries
  • 61. Tons More! • Color Picker (Dojo,YUI) • Layout (Dojo,YUI) • Auto Complete (Dojo, Proto,YUI) • Selectables (Proto, jQuery) • Accordion (Dojo, jQuery) • WYSIWYG (Dojo,YUI)
  • 62. Themeing • A consistent look-and-feel for widgets • jQuery,Yahoo UI, and Dojo provide themeing capabilities • jQuery’s and Yahoo UI’s are documented
  • 63. Accessibility • Taking in to consideration points from ARIA (Accessible Rich Internet Applications) • Dojo is taking a solid lead, here
  • 64. Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size
  • 65. Architecture • Bottom Up (Prototype, jQuery) vs. Top Down (Dojo,Yahoo UI) • jQuery, Dojo, and Yahoo UI all use a single namespace • Prototype extends native objects (high likelihood of inter-library conflict) • jQuery is extensible with plugins
  • 66. Licensing • All use liberal licenses (“Keep my name on the file, don’t sue me.”) • MIT: Prototype, jQuery • BSD: Yahoo UI, Dojo
  • 67. Browser Support • Everyone supports: IE 6+, Firefox 2+, Safari 2+, Opera 9+ • Except: • Prototype doesn’t support Opera • Dojo is dropping support for Safari 2
  • 68. File Size • Serving your JavaScript minified + Gzipped • Optimal level of compression and speed • Core file size (in KB): 35.00 26.25 17.50 8.75 0 Prototype jQuery Yahoo UI Dojo
  • 69. Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage
  • 70. Development Team • Prototype, jQuery, and Dojo all have open development (anyone can contribute) • jQuery,Yahoo UI, and Dojo all have paid, full-time, developers working on the code • All have paid, part-time, developers
  • 71. SVN / Bug Tracker • Prototype, jQuery, and Dojo all have code in a public SVN repositor • Yahoo UI’s development is private and is limited to Yahoo employees • All libraries have a public bug tracker
  • 72. Unit Tests • All libraries have some automated unit tests • jQuery,Yahoo UI, and Dojo all have public unit tests • jQuery and Dojo have tests that can run in Rhino
  • 73. Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos
  • 74. API Documentation • Prototype, jQuery, and Yahoo UI all have full coverage • jQuery provides runnable examples with each API item • Dojo’s coverage is spotty - work in progress
  • 75. Tutorials • All libraries provide some tutorials • jQuery and Yahoo UI have screencasts • Prototype: 6 • jQuery: 68 (English) • Yahoo UI: 32 • Dojo: 5
  • 76. Books • Prototype: • Prototype and Scriptaculous in Action (Manning) • Prototype and Scriptaculous (Pragmatic) • jQuery: • Learning jQuery (Packt) • jQuery Reference Guide (Packt) • Yahoo UI: None • Dojo: A short online book
  • 77. Demos • Yahoo UI provides a considerable number of live demos and examples for all features • jQuery provides live examples and a few demo applications • Dojo provides demo applications for their widgets
  • 78. Community • Active Mailing List / Forum • Support and Training • Popularity
  • 79. Mailing List / Forum • Prototype, jQuery, and Yahoo UI have mailing lists • Prototype: 23 posts/day • jQuery: 108 posts/day • Yahoo UI: 36 posts/day • Dojo has an active forum
  • 80. Support and Training • Dojo provides paid support and training (via Sitepen)
  • 81. Popularity • Who uses what: • Prototype: Apple, ESPN, CNN, Fox News • jQuery: Google, Amazon, Digg, NBC, Intel • Yahoo:Yahoo, LinkedIn, Target, Slashdot • Dojo: IBM, AOL, Mapquest, Bloglines
  • 82. More Information • Prototype: http://prototypejs.org/ • jQuery: http://jquery.com/ • Yahoo UI: http://developer.yahoo.com/yui/ • Dojo: http://dojotoolkit.org/
  • 83. Ajax Experience Presentations • Presentations on: • Dojo (2) • Prototype (2) & Scriptaculous (1) • jQuery (3) • Go to one that sounds interesting and enjoy!