How to
make
                   libraries
                   work for you
  Simon Willison - http://simonwillison.net/
    ...
This talk

• JavaScript libraries!
• What they are
• Why they exist
• What they can do for you
• How to pick one
JavaScript libraries

•   ajaxpatterns.org lists over 40 general purpose
    JavaScript libraries

    •   ... and that’s ...
“The bad news:
JavaScript is broken.
    The good news:
 It can be fixed with
  more JavaScript!”
              Geek folk s...
•   Inconsistent event model (thanks, IE)
•   Memory management (thanks, IE)
•   The DOM is a horrible API!
•   JavaScript...
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    try {
       ...
Narrowing them down...

• Prototype (and Scriptaculous)
• The Yahoo! User Interface Library - YUI
• jQuery
• The Dojo Toolkit
Download
                                                            Get the latest version—1.5.1


                      ...
• Prototype focuses on basic browser
  compatibility and JavaScript language
  enhancement

• It tries to make JavaScript ...
• $, $$, $F, $A, $H
• var Animal = Class.create(...)
• new Ajax.Request(url[, options])
• Event.observe(el, 'click', funct...
$$('#bmarks li').each(function(li){
  Event.observe(li, 'click', function(e) {
    this.style.backgroundColor = 'yellow';
...
Script.aculo.us

• Wizzy extension for Prototype
• Huge collection of packaged effects
• AutoComplete, Slider, InPlaceEdit...
The Yahoo UI Library
• Created at Yahoo!, BSD licensed
• Designed for both creating new applications
  and integration with legacy code

• Focu...
controls

autocomplete      calendar        container


  menu           slider          treeview



    animation        ...
YAHOO.util.Event.on(window, 'load', function() {
	

 var div = YAHOO.util.Dom.get('messages');
	

 setTimeout(function() {...
Common YUI idiom

$E = YAHOO.util.Event;
$D = YAHOO.util.Dom;

$E.on(window, 'load', function() {
	

 var div = $D.get('me...
jQuery
•   Simple philosophy: find some nodes, then do
    something to them

•   Minimal impact on your global namespace - it add...
jQuery(window).ready(function() {
  jQuery(quot;div.hideablequot;).
    css('cursor', 'pointer').
    append('<p>Click to ...
$(function() {
  $(quot;div.hideablequot;).
    css('cursor', 'pointer').
    append('<p>Click to hide</p>').
    click(fu...
The Dojo Toolkit
• The oldest of the current popular libraries,
  pre-dating even the term “Ajax”

• Incredible amounts of functionality
• ...
dojo.collections         dojo.math

dojo.crypto              dojo.reflect

dojo.date                dojo.rpc

dojo.dnd     ...
dojo


        Dojo 1.0

dojox              dijit
Dojo components
• dojo
 • Core library, similar to jQuery / Prototype
 • Dynamic code loading and dependency
    managemen...
dijit
<div dojoType=quot;dijit.layout.TabContainerquot; sizeShare=quot;40quot;>
<div id=quot;tab1quot;
 dojoType=quot;dijit.layo...
dojox
• Graphics (cross-browser drawing API)
• Offline storage
• Cryptography
• Templating
• Data grids and more
• “The future of...
Honourable mentions
Ext JS
The Google Web Toolkit
What are the interesting ideas?
Interaction Design Patterns
Smart node selection

•   Any JavaScript that modifies the page inevitably
    starts out by selecting some existing nodes
...
Smarter Ajax
• Prototype makes it easy to set a callback for
  when ANY Ajax request completes... useful
  for loading sta...
Self-adjusting animations
• You can roll your own animations in
  JavaScript using setTimeout and setInterval...
• ... but...
DSLs for animation
var anim = new YAHOO.util.Anim('el', {
  opacity: {to: 0.5},
  height: {to: 0},
  fontSize: {
    from:...
XPath optimisations

• Mozilla and Opera offer fast XPath lookups
  through document.evaluate(...)
• Dojo can use this for...
Minification
• All four libraries ship in both uncompressed
  and compressed formats
• YUI uses minification: whitespace and...
Hosting on a CDN
    http://yui.yahooapis.com/2.2.2/build/reset/reset-min.css
    http://yui.yahooapis.com/2.2.2/build/dom...
So how do you pick one?
So how do you pick one?



• It depends on what you are trying to build
My library selection criteria

• Enables unobtrusive JavaScript
• Plays well with other code
 • Smart use of namespacing
 ...
• I’m currently using and recommending
  jQuery for most situations

• But... there’s cut-throat competition
  between the...
The law of leaky abstractions
http://www.joelonsoftware.com/articles/LeakyAbstractions.html


My interpretation:


        The more you rely on
   abstr...
Thank you!
How to make Ajax Libraries work for you
How to make Ajax Libraries work for you
Upcoming SlideShare
Loading in …5
×

How to make Ajax Libraries work for you

9,901 views
9,773 views

Published on

50 minute talk on Ajax and JavaScript libraries, presented at Web 2.0 Expo Berlin on 7th November 2007.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,901
On SlideShare
0
From Embeds
0
Number of Embeds
218
Actions
Shares
0
Downloads
446
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

How to make Ajax Libraries work for you

  1. 1. How to make libraries work for you Simon Willison - http://simonwillison.net/ Web 2.0 Expo Berlin 7th November 2007
  2. 2. This talk • JavaScript libraries! • What they are • Why they exist • What they can do for you • How to pick one
  3. 3. JavaScript libraries • ajaxpatterns.org lists over 40 general purpose JavaScript libraries • ... and that’s not including the many libraries tied to a specific server-side language • Why are there so many of them?
  4. 4. “The bad news: JavaScript is broken. The good news: It can be fixed with more JavaScript!” Geek folk saying
  5. 5. • Inconsistent event model (thanks, IE) • Memory management (thanks, IE) • The DOM is a horrible API! • JavaScript-the-language has quite a few warts • But it’s powerful enough to let you fix them • Browser Ajax is far too verbose • Positioning and co-ordinates • Drag and drop and Animation are really hard
  6. 6. var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { alert(xhr.responseText); } else { alert('Error code ' + xhr.status); } } }
  7. 7. Narrowing them down... • Prototype (and Scriptaculous) • The Yahoo! User Interface Library - YUI • jQuery • The Dojo Toolkit
  8. 8. Download Get the latest version—1.5.1 Learn Prototype is a JavaScript Framework that aims to Online documentation and resources. ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven Discuss development and the nicest Ajax library around, Prototype Mailing list and IRC is quickly becoming the codebase of choice for web application developers everywhere. Contribute Submit patches and report bugs. Prototype and Scriptaculous Prototype and script.aculo.us: The quot;Bungee bookquot; has landed! Core team member Christophe Who's using Prototype? Meet the developers Porteneuve has been hard at work for the past few months tracking
  9. 9. • Prototype focuses on basic browser compatibility and JavaScript language enhancement • It tries to make JavaScript more like Ruby • Extends most of JavaScript’s built-in objects with new functionality • Scriptaculous adds fancy effects, basic widgets and drag and drop
  10. 10. • $, $$, $F, $A, $H • var Animal = Class.create(...) • new Ajax.Request(url[, options]) • Event.observe(el, 'click', function() { ... }) • quot;foo-barquot;.camelize() -> quot;fooBarquot;
  11. 11. $$('#bmarks li').each(function(li){ Event.observe(li, 'click', function(e) { this.style.backgroundColor = 'yellow'; }.bindAsEventListener(li)); });
  12. 12. Script.aculo.us • Wizzy extension for Prototype • Huge collection of packaged effects • AutoComplete, Slider, InPlaceEditor controls • Drag and drop
  13. 13. The Yahoo UI Library
  14. 14. • Created at Yahoo!, BSD licensed • Designed for both creating new applications and integration with legacy code • Focused on browser issues; almost no functionality relating to JS language itself • Extensively tested and documented
  15. 15. controls autocomplete calendar container menu slider treeview animation dragdrop dom event connection utilities
  16. 16. YAHOO.util.Event.on(window, 'load', function() { var div = YAHOO.util.Dom.get('messages'); setTimeout(function() { var anim = new YAHOO.util.Anim(div, { height: {to: 0}, opacity: {to: 0} }, 0.4); anim.animate(); anim.onComplete.subscribe(function() { div.parentNode.removeChild(div); }); }, 2000); });
  17. 17. Common YUI idiom $E = YAHOO.util.Event; $D = YAHOO.util.Dom; $E.on(window, 'load', function() { var div = $D.get('messages'); ... });
  18. 18. jQuery
  19. 19. • Simple philosophy: find some nodes, then do something to them • Minimal impact on your global namespace - it adds two global symbols: jQuery and $, and $ can be easily reverted • API designed around “chaining” - other libraries are now emulating this • Outstanding node selection, based on CSS 3 and custom extensions • Small core library with a smart plugin mechanism
  20. 20. jQuery(window).ready(function() { jQuery(quot;div.hideablequot;). css('cursor', 'pointer'). append('<p>Click to hide</p>'). click(function() { jQuery(this).hide(quot;slowquot;); return false; }); });
  21. 21. $(function() { $(quot;div.hideablequot;). css('cursor', 'pointer'). append('<p>Click to hide</p>'). click(function() { $(this).hide(quot;slowquot;); return false; }); });
  22. 22. The Dojo Toolkit
  23. 23. • The oldest of the current popular libraries, pre-dating even the term “Ajax” • Incredible amounts of functionality • Used to suffer from a tough learning curve, but the 1.0 release greatly simplifies things
  24. 24. dojo.collections dojo.math dojo.crypto dojo.reflect dojo.date dojo.rpc dojo.dnd dojo.storage dojo.dom dojo.string dojo.event Dojo 0.4 dojo.style dojo.io dojo.undo dojo.lang dojo.uri dojo.lfx dojo.widget dojo.logging dojo.xml http://www.flickr.com/photos/aprillynn77/8818200/
  25. 25. dojo Dojo 1.0 dojox dijit
  26. 26. Dojo components • dojo • Core library, similar to jQuery / Prototype • Dynamic code loading and dependency management • dijit • Advanced widget system • dojox • Dojo eXperimental - crazy voodoo magic
  27. 27. dijit
  28. 28. <div dojoType=quot;dijit.layout.TabContainerquot; sizeShare=quot;40quot;> <div id=quot;tab1quot; dojoType=quot;dijit.layout.ContentPanequot; title=quot;Form Feelquot;> <h2>Various Form Elements:</h2> <form name=quot;dijitFormTestquot;> <p><input type=quot;checkBoxquot; dojoType=quot;dijit.form.CheckBoxquot; checked=quot;checkedquot;> Standard Dijit CheckBox <br><input type=quot;checkBoxquot; dojoType=quot;dijit.form.CheckBoxquot; disabled=quot;disabledquot;> Disabled Dijit <br> <input type=quot;checkBoxquot; dojoType=quot;dijit.form.CheckBoxquot; disabled=quot;disabledquot; checked=quot;checkedquot;> Checked and Disabled Dijit </p> ...
  29. 29. dojox
  30. 30. • Graphics (cross-browser drawing API) • Offline storage • Cryptography • Templating • Data grids and more • “The future of the browser today”
  31. 31. Honourable mentions
  32. 32. Ext JS
  33. 33. The Google Web Toolkit
  34. 34. What are the interesting ideas?
  35. 35. Interaction Design Patterns
  36. 36. Smart node selection • Any JavaScript that modifies the page inevitably starts out by selecting some existing nodes • jQuery is based entirely around node selection • Prototype and Dojo also have node selection APIs
  37. 37. Smarter Ajax • Prototype makes it easy to set a callback for when ANY Ajax request completes... useful for loading status icons • Ajax.Updater can extract and execute <script> blocks in HTML fragments • Great for unobtrusively enhancing elements that have just been added to the page
  38. 38. Self-adjusting animations • You can roll your own animations in JavaScript using setTimeout and setInterval... • ... but the time taken for a animation will vary depending on browser performance • Smarter animations adjust their framerate to compensate for browser performance • All four libraries do this
  39. 39. DSLs for animation var anim = new YAHOO.util.Anim('el', { opacity: {to: 0.5}, height: {to: 0}, fontSize: { from: 100, to: 50, unit: '%' } }, 1); anim.animate();
  40. 40. XPath optimisations • Mozilla and Opera offer fast XPath lookups through document.evaluate(...) • Dojo can use this for getElementsByClass() • Prototype redefines getElementsBySelector to use XPath
  41. 41. Minification • All four libraries ship in both uncompressed and compressed formats • YUI uses minification: whitespace and comments are stripped • The Dojo build system uses “ShrinkSafe”, which compresses JavaScript using the Rhino parser • jQuery uses Dean Edwards’ Packer, with base62 encoding
  42. 42. Hosting on a CDN http://yui.yahooapis.com/2.2.2/build/reset/reset-min.css http://yui.yahooapis.com/2.2.2/build/dom/dom-min.js ... http://o.aolcdn.com/iamalpha/.resource/jssdk/dojo-0.4.1/dojo.js • JavaScript is cached before the user even visits your site
  43. 43. So how do you pick one?
  44. 44. So how do you pick one? • It depends on what you are trying to build
  45. 45. My library selection criteria • Enables unobtrusive JavaScript • Plays well with other code • Smart use of namespacing • Global variable impact kept to a minimum • Tie breaker: the less code I have to write the better!
  46. 46. • I’m currently using and recommending jQuery for most situations • But... there’s cut-throat competition between the various libraries at the moment • This is one of the reasons I care about interoperability - commit to a single library and you might lose out when one of the others jumps ahead of it
  47. 47. The law of leaky abstractions
  48. 48. http://www.joelonsoftware.com/articles/LeakyAbstractions.html My interpretation: The more you rely on abstractions, the worse off you’ll be when one of them leaks
  49. 49. Thank you!

×