0
JavaScript Libraries   Ajax Experience - July 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.• Jus...
2) Some Assembly         Required• Write common utilities • Click a link, load a page via Ajax • Build a dynamic menu • Cr...
3) Down-and-Dirty• Write all JavaScript code from scratch• Deal, directly, with browser bugs• Quirksmode is your lifeline•...
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 std...
What kind of libraries exist?          Open Source   Commercial                           AtlasClient/    AjaxCFC         ...
What kind of libraries exist?          Open Source   Commercial                           AtlasClient/    AjaxCFC         ...
Open Source Libraries          Browser Only    Client/Server          Scriptaculous Task                       AjaxCFC    ...
Open Source Libraries          Browser Only    Client/Server          Scriptaculous Task                       AjaxCFC    ...
What should a library have?• DOM Traversing/Manipulation• Event binding• Ajax Support• Basic Animations
What should a library have?• Some want complex controls • Drag-and-drop • Auto-complete search• Others want language enhan...
Secondary Features• Documentation• Community Support• File Size• Popularity
Secondary Features                      (Practical)• Documentation• Community Support• File Size• Popularity          (Eso...
The Libraries
Dojo
Dojo: Overview• Started early 2005 by Alex Russell• Large development community• Lots of corporate backing (IBM, AOL)• Big...
Dojo: Focus• Building complete web applications• A package heirarchy, e.g.:  dojo.addClass( ... )• Focus has transcended i...
Dojo: DOM Support• Good DOM Modification support - handles   many cross-browser issues• Great DOM Traversal with Selectors ...
Dojo: Events and Effects• Events support is complete and cross   browser• Good selection of generic animations dojo.connec...
Dojo: Ajax• Supports a wide variety of Ajax  communication• Cross-domain Ajax support• Built-in back button support
Dojo: Docs & Community• Documentation: Rough.  In the middle of a major documentation  overhaul for 0.9.• Community: Livel...
Dojo: File Size & Popularity• File Size: Large (100Kb compressed)  It’s highly recommended that you remove  unused modules...
Prototype
Prototype: Overview• Started early 2005 by Sam Stephenson• Incredibly popular, tied with Ruby on Rails’  popularity• Devel...
Prototype: Focus• Improving the usability of the JavaScript  language• Big emphasis on adding in ‘missing’  JavaScript fea...
Prototype: DOM Support• DOM Modification works quite well:  Insertion.Bottom(“list”,”<li>Another item</li>”);• So does >DOM...
Prototype: Events & Ajax• Event binding just works: function(){  Event.observe(“button”,”click”,        alert(“Thanks for ...
Prototype: Details• Code quality is fantastic, great features• No included support for animations • moo.fx • Script.aculo....
Prototype: Docs & Community• Documentation: Good  Official API documentation, some tutorials• Community: Distributed  Many ...
Prototype: File Size & Popularity• File Size: Moderate (99KB)  Unfortunately, not easily compressible with  Packer - they ...
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-ef...
jQuery: DOM Support• DOM Traversing is great - CSS1-3 support  and basic XPath:  $(“div > p:nth-child(odd)”)• DOM Manipula...
jQuery: Events, Effects, and Ajax• Events are fully functional:  $(“div”).click( showItem );• And effects:  $(“#menu”).sli...
jQuery: Details• Core features are limited to DOM, Events,  Effects, Ajax• Other features can be added in via plugins
jQuery: Docs & Community• Documentation: Complete  Fully documented, complete API.• Community: Vibrant  108+ Mailing List ...
jQuery: File Size & Popularity• File Size: Small  About 20KB with everything.• Popularity: Strong  Users: IBM, Technorati,...
Mootools
Mootools: Overview• Released Sept 2006 by Valerio Proietti• Created as a fork of Prototype, Base, and  moo.fx
Mootools: Focus• Designed to fulfill common activities (All  the way from low-level iteration to high-  level Drag-and-Drop...
Mootools: DOM Support• Good DOM Selector support:  $$(“body”)• Plenty of helper functions for DOM  modification:  $(‘test’)...
Mootools: Events and Effects• Has traditional event model:  $(‘test’).addEvent(‘keydown’, function(){..});• Plenty of visu...
Mootools: Ajax• Ajax support is fully functional:  var myAjax = new Ajax(url, {method: get}).request();
Mootools: Details• Lots of plug-and-play features • Drag-and-Drop • Accordion • Scrollbar
Mootools: Docs & Community• Documentation: Good  Good API coverage, some tutorials• Community: Moderate  Active forum, hos...
Mootools: File Size & Popularity • File Size: Small (approx. 25KB, compressed)   Has a full compilation system, you can pi...
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-Compl...
YUI: DOM Support• DOM Traversal is minimal, no selectors:  YAHOO.util.Dom.get(“list”)• DOM Modification is also minimal,  m...
YUI: Events and Effects• Full Event support:  YAHOO.util.Event.addEventListener(        “list”, “click”, function(){      ...
YUI: Ajax• Ajax connections are simple to setup:  YAHOO.util.Connect.asyncRequest(       GET, “test.html”, function(){    ...
YUI: Details• Namespaces can become quite verbose. It  is recommended that you copy namespaces  to other variables.  var d...
YUI: Docs & Community• Documentation: Excellent  Everything is thoroughly documented. Lots  of explanations, plenty of dem...
YUI: File Size & Popularity• File Size: 40KB (Compressed)  Code is quite modular, you can remove un-  used code easily.• P...
Feature Summary            DOM Events   Effects   Ajax  Dojo       X     X       X        XPrototype    X     X        -  ...
More Information• Dojo: http://dojotoolkit.org/• Prototype: http://prototypejs.org/• jQuery: http://jquery.com/• Mootools:...
Ajax Experience      Presentations• Presentations on: • Dojo (3) • Prototype (3) & Scriptaculous (1) • jQuery (3)• Go to o...
Upcoming SlideShare
Loading in...5
×

JavaScript Library Overview (Ajax Exp West 2007)

802

Published on

Talk I gave at Ajax Experience West 2007.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
802
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript Library Overview (Ajax Exp West 2007)"

  1. 1. JavaScript Libraries Ajax Experience - July 2007 John Resig (ejohn.org)
  2. 2. Question: How do you want to write JavaScript?
  3. 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. 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. 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. 6. What we’ve just seen...• Widgets• Libraries• Raw JavaScript
  7. 7. What we’ve just seen...• Widgets• Libraries• Raw JavaScript
  8. 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 C by hand
  9. 9. What kind of libraries exist? Open Source Commercial AtlasClient/ AjaxCFC Backbase forServer Qcodo Struts Prototype DojoBrowser Backbase jQuery Only SmartClient Mootools Yahoo UI
  10. 10. What kind of libraries exist? Open Source Commercial AtlasClient/ AjaxCFC Backbase forServer Qcodo Struts Prototype DojoBrowser Backbase jQuery Only SmartClient Mootools Yahoo UI
  11. 11. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fxSpecific Qcodo Open Rico Prototype DojoGeneral Ruby on Rails jQueryPurpose CakePHP Mootools Yahoo UI
  12. 12. Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fxSpecific Qcodo Open Rico Prototype DojoGeneral Ruby on Rails jQueryPurpose CakePHP Mootools Yahoo UI
  13. 13. What should a library have?• DOM Traversing/Manipulation• Event binding• Ajax Support• Basic Animations
  14. 14. What should a library have?• Some want complex controls • Drag-and-drop • Auto-complete search• Others want language enhancements • Object.extend() • Array.each()• DOM, Event, Effects, Ajax is a good middle- ground
  15. 15. Secondary Features• Documentation• Community Support• File Size• Popularity
  16. 16. Secondary Features (Practical)• Documentation• Community Support• File Size• Popularity (Esoteric)
  17. 17. The Libraries
  18. 18. Dojo
  19. 19. Dojo: Overview• Started early 2005 by Alex Russell• Large development community• Lots of corporate backing (IBM, AOL)• Big code base, tons of features
  20. 20. 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
  21. 21. Dojo: DOM Support• Good DOM Modification support - handles many cross-browser issues• Great DOM Traversal with Selectors dojo.forEach( dojo.query(“table tr:nth-child(even)”), function(row){ dojo.addClass( row, "odd" ); });
  22. 22. Dojo: Events and Effects• Events support is complete and cross browser• Good selection of generic animations dojo.connect(dojo.byId("mylink"), "click", function(){ dojo.fadeOut({ node: this, duration: 500 }); });
  23. 23. Dojo: Ajax• Supports a wide variety of Ajax communication• Cross-domain Ajax support• Built-in back button support
  24. 24. Dojo: Docs & Community• Documentation: Rough. In the middle of a major documentation overhaul for 0.9.• Community: Lively Active forum with frequent discussions.
  25. 25. Dojo: File Size & Popularity• File Size: Large (100Kb compressed) It’s highly recommended that you remove unused modules.• Popularity: Substantial Backing from many corporate sponsors (IBM).
  26. 26. Prototype
  27. 27. Prototype: Overview• Started early 2005 by Sam Stephenson• Incredibly popular, tied with Ruby on Rails’ popularity• Development backed by 37 Signals
  28. 28. Prototype: Focus• Improving the usability of the JavaScript language• Big emphasis on adding in ‘missing’ JavaScript features• Clean structure, clean objects and ‘classes’
  29. 29. Prototype: DOM Support• DOM Modification works quite well: Insertion.Bottom(“list”,”<li>Another item</li>”);• So does >DOM Traversing: $$(“table tr”).invoke(“addClassName”,”row”);
  30. 30. Prototype: Events & Ajax• Event binding just works: function(){ Event.observe(“button”,”click”, alert(“Thanks for the click!”); });• So does Ajax: new Ajax.Request(“test.html”, { method: “GET”, onComplete: function(res){ alert( res.responseText ); } });
  31. 31. Prototype: Details• Code quality is fantastic, great features• No included support for animations • moo.fx • Script.aculo.us• Updated frequently
  32. 32. Prototype: Docs & Community• Documentation: Good Official API documentation, some tutorials• Community: Distributed Many bloggers love Prototype, little centralized discussion (23 posts/day).
  33. 33. Prototype: File Size & Popularity• File Size: Moderate (99KB) Unfortunately, not easily compressible with Packer - they recommend GZIP.• Popularity: Strong Apple, NBC, ESPN, CNN, Amazon
  34. 34. jQuery
  35. 35. jQuery: Overview• Released January 2006 by John Resig• Rapid rise in popularity• Many developers across the globe
  36. 36. jQuery: Focus• Improving the interaction between JavaScript and HTML• Finding elements then performing actions• Highly-effective, short, code
  37. 37. jQuery: DOM Support• DOM Traversing is great - CSS1-3 support and basic XPath: $(“div > p:nth-child(odd)”)• DOM Manipulation too: $(“#li”).append(“<li>An item</li>”);
  38. 38. jQuery: Events, Effects, and Ajax• Events are fully functional: $(“div”).click( showItem );• And effects: $(“#menu”).slideDown(“slow”);• And Ajax! $(“form”).submit(function(){ $(“#results”).load(“test.html”); });
  39. 39. jQuery: Details• Core features are limited to DOM, Events, Effects, Ajax• Other features can be added in via plugins
  40. 40. jQuery: Docs & Community• Documentation: Complete Fully documented, complete API.• Community: Vibrant 108+ Mailing List Posts/Day
  41. 41. jQuery: File Size & Popularity• File Size: Small About 20KB with everything.• Popularity: Strong Users: IBM, Technorati, MSNBC, Digg Projects: Drupal, Wordpress
  42. 42. Mootools
  43. 43. Mootools: Overview• Released Sept 2006 by Valerio Proietti• Created as a fork of Prototype, Base, and moo.fx
  44. 44. Mootools: Focus• Designed to fulfill common activities (All the way from low-level iteration to high- level Drag-and-Drop)• Classical structure (like Prototype)
  45. 45. Mootools: DOM Support• Good DOM Selector support: $$(“body”)• Plenty of helper functions for DOM modification: $(‘test’).appendText(“foo”); $(‘test’).removeClass(“foo”);
  46. 46. Mootools: Events and Effects• Has traditional event model: $(‘test’).addEvent(‘keydown’, function(){..});• Plenty of visual effects too: var marginChange = new Fx.Style(myElement, margin-top,{duration:500}); marginChange.start(10, 100);
  47. 47. Mootools: Ajax• Ajax support is fully functional: var myAjax = new Ajax(url, {method: get}).request();
  48. 48. Mootools: Details• Lots of plug-and-play features • Drag-and-Drop • Accordion • Scrollbar
  49. 49. Mootools: Docs & Community• Documentation: Good Good API coverage, some tutorials• Community: Moderate Active forum, hostile against “newbies”
  50. 50. Mootools: File Size & Popularity • File Size: Small (approx. 25KB, compressed) Has a full compilation system, you can pick- and-choose components. • Popularity: Rising Ubuntu, C|Net
  51. 51. Yahoo! UI
  52. 52. YUI: Overview• Released Feb 2006 by Yahoo!• Maintained and financed internally• Attempt to standardize internal JavaScript
  53. 53. YUI: Focus• Exposing, and solving, common methodologies• Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete)
  54. 54. YUI: DOM Support• DOM Traversal is minimal, no selectors: YAHOO.util.Dom.get(“list”)• DOM Modification is also minimal, modification only (no DOM creation): YAHOO.util.Dom.addClass(“list”,”hover”)
  55. 55. YUI: Events and Effects• Full Event support: YAHOO.util.Event.addEventListener( “list”, “click”, function(){ alert(“List Clicked”); });• Animations are also customizable: new YAHOO.util.Anim(“list”, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut );
  56. 56. YUI: Ajax• Ajax connections are simple to setup: YAHOO.util.Connect.asyncRequest( GET, “test.html”, function(){ alert(“File loaded”); }, null );
  57. 57. YUI: Details• Namespaces can become quite verbose. It is recommended that you copy namespaces to other variables. var dom = YAHOO.util.Dom;• Closed development (Yahoo employees only, no subversion repository)
  58. 58. YUI: Docs & Community• Documentation: Excellent Everything is thoroughly documented. Lots of explanations, plenty of demos.• Community: Moderate Mailing List hovering around 36 posts/day.
  59. 59. YUI: File Size & Popularity• File Size: 40KB (Compressed) Code is quite modular, you can remove un- used code easily.• Popularity: Possibly Waning Many good bloggers use to talk about it - have moved on.
  60. 60. Feature Summary DOM Events Effects Ajax Dojo X X X XPrototype X X - X jQuery X X X XMootools X X X XYahoo UI / X X X
  61. 61. More Information• Dojo: http://dojotoolkit.org/• Prototype: http://prototypejs.org/• jQuery: http://jquery.com/• Mootools: http://mootools.net/• Yahoo! UI: http://developer.yahoo.com/yui/
  62. 62. Ajax Experience Presentations• Presentations on: • Dojo (3) • Prototype (3) & Scriptaculous (1) • jQuery (3)• Go to one that sounds interesting and enjoy!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×