How to make Ajax Libraries work for you
-
Upload
simon-willison -
Category
Technology
-
view
9.567 -
download
2
description
Transcript of How to make Ajax Libraries work for you
![Page 1: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/1.jpg)
How to make
Simon Willison - http://simonwillison.net/Web 2.0 Expo Berlin
7th November 2007
librarieswork for you
![Page 2: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/2.jpg)
This talk
• JavaScript libraries!
• What they are
• Why they exist
• What they can do for you
• How to pick one
![Page 3: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/3.jpg)
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?
![Page 4: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/4.jpg)
“The bad news: JavaScript is broken.
The good news:It can be fixed with more JavaScript!”
Geek folk saying
![Page 5: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/5.jpg)
• 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
![Page 6: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/6.jpg)
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); } }}
![Page 7: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/7.jpg)
• Prototype (and Scriptaculous)
• The Yahoo! User Interface Library - YUI
• jQuery
• The Dojo Toolkit
Narrowing them down...
![Page 8: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/8.jpg)
Download API Docs Tips and Tutorials Blog Discuss Contribute
Prototype is a JavaScript Framework that aims toease development of dynamic web applications.
Featuring a unique, easy-to-use toolkit for class-driven
development and the nicest Ajax library around, Prototype
is quickly becoming the codebase of choice for web
application developers everywhere.
Prototype and script.aculo.us: The "Bungee
book" has landed!
Core team member Christophe
Porteneuve has been hard at work
for the past few months tracking
and documenting Prototype for his
new book Prototype and
script.aculo.us, which is now
available as a Beta Book from the
Pragmatic Programmers (and is
scheduled to ship later this year).
Read more !
DownloadGet the latest version—1.5.1
LearnOnline documentation and resources.
DiscussMailing list and IRC
ContributeSubmit patches and report bugs.
Who's using Prototype?
Meet the developers
© 2006-2007 Prototype Core Team | Licenses: MIT (source code) and CC BY-SA (documentation).
Prototype and Scriptaculous
![Page 9: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/9.jpg)
• 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
![Page 10: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/10.jpg)
• $, $$, $F, $A, $H
• var Animal = Class.create(...)
• new Ajax.Request(url[, options])
• Event.observe(el, 'click', function() { ... })
• "foo-bar".camelize() -> "fooBar"
![Page 11: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/11.jpg)
$$('#bmarks li').each(function(li){ Event.observe(li, 'click', function(e) { this.style.backgroundColor = 'yellow'; }.bindAsEventListener(li));});
![Page 12: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/12.jpg)
• Wizzy extension for Prototype
• Huge collection of packaged effects
• AutoComplete, Slider, InPlaceEditor controls
• Drag and drop
Script.aculo.us
![Page 13: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/13.jpg)
The Yahoo UI Library
![Page 14: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/14.jpg)
• 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
![Page 15: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/15.jpg)
dom event connection
animation dragdrop
utilities
controls
autocomplete calendar
menu slider treeview
container
![Page 16: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/16.jpg)
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);});
![Page 17: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/17.jpg)
$E = YAHOO.util.Event;$D = YAHOO.util.Dom;
$E.on(window, 'load', function() { var div = $D.get('messages'); ...});
Common YUI idiom
![Page 18: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/18.jpg)
jQuery
![Page 19: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/19.jpg)
• 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
![Page 20: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/20.jpg)
jQuery(window).ready(function() { jQuery("div.hideable"). css('cursor', 'pointer'). append('<p>Click to hide</p>'). click(function() { jQuery(this).hide("slow"); return false; });});
![Page 21: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/21.jpg)
$(function() { $("div.hideable"). css('cursor', 'pointer'). append('<p>Click to hide</p>'). click(function() { $(this).hide("slow"); return false; });});
![Page 22: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/22.jpg)
The Dojo Toolkit
![Page 23: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/23.jpg)
• 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
![Page 24: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/24.jpg)
http://www.flickr.com/photos/aprillynn77/8818200/
dojo.collections
dojo.crypto
dojo.date
dojo.dnd
dojo.dom
dojo.event
dojo.io
dojo.lang
dojo.lfx
dojo.logging
dojo.math
dojo.reflect
dojo.rpc
dojo.storage
dojo.string
dojo.style
dojo.undo
dojo.uri
dojo.widget
dojo.xml
Dojo 0.4
![Page 25: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/25.jpg)
Dojo 1.0
dojo
dijitdojox
![Page 26: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/26.jpg)
• dojo
• Core library, similar to jQuery / Prototype
• Dynamic code loading and dependency management
• dijit
• Advanced widget system
• dojox
• Dojo eXperimental - crazy voodoo magic
Dojo components
![Page 27: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/27.jpg)
dijit
![Page 28: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/28.jpg)
![Page 29: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/29.jpg)
<div dojoType="dijit.layout.TabContainer" sizeShare="40"><div id="tab1" dojoType="dijit.layout.ContentPane" title="Form Feel"> <h2>Various Form Elements:</h2> <form name="dijitFormTest"><p><input type="checkBox" dojoType="dijit.form.CheckBox" checked="checked">Standard Dijit CheckBox<br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled">Disabled Dijit<br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled" checked="checked">Checked and Disabled Dijit</p>...
![Page 30: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/30.jpg)
dojox
![Page 31: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/31.jpg)
• Graphics (cross-browser drawing API)
• Offline storage
• Cryptography
• Templating
• Data grids and more
• “The future of the browser today”
![Page 32: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/32.jpg)
Honourable mentions
![Page 33: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/33.jpg)
Ext JS
![Page 34: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/34.jpg)
The Google Web Toolkit
![Page 35: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/35.jpg)
What are the interesting ideas?
![Page 36: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/36.jpg)
Interaction Design Patterns
![Page 37: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/37.jpg)
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
![Page 38: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/38.jpg)
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
![Page 39: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/39.jpg)
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
![Page 40: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/40.jpg)
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();
![Page 41: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/41.jpg)
XPath optimisations
• Mozilla and Opera offer fast XPath lookups through document.evaluate(...)
• Dojo can use this for getElementsByClass()
• Prototype redefines getElementsBySelector to use XPath
![Page 42: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/42.jpg)
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
![Page 43: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/43.jpg)
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
![Page 44: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/44.jpg)
So how do you pick one?
![Page 45: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/45.jpg)
• It depends on what you are trying to build
So how do you pick one?
![Page 46: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/46.jpg)
![Page 47: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/47.jpg)
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!
![Page 48: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/48.jpg)
• 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
![Page 49: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/49.jpg)
The law of leaky abstractions
![Page 50: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/50.jpg)
The more you rely on abstractions, the worse off you’ll
be when one of them leaks
http://www.joelonsoftware.com/articles/LeakyAbstractions.html
My interpretation:
![Page 51: How to make Ajax Libraries work for you](https://reader034.fdocuments.in/reader034/viewer/2022042607/55529959b4c905e8128b4df7/html5/thumbnails/51.jpg)
Thank you!