javascript libraries: the big picture
TRANSCRIPT
![Page 1: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/1.jpg)
JavaScript Libraries:The Big Picture
Simon WillisonXTech, 16th May 2007
![Page 2: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/2.jpg)
• What problems do libraries solve?
• An overview of the Big Four
• ... what are the interesting ideas?
![Page 3: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/3.jpg)
Personal bias
![Page 4: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/4.jpg)
• I like JavaScript-the-language
• So I won't be talking about frameworks that generate JavaScript code for you
![Page 5: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/5.jpg)
Douglas Crockford
“ The Web is the most hostile software engineering environment imaginable.”
![Page 6: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/6.jpg)
The legacy of the browser wars
![Page 7: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/7.jpg)
• The DOM API kind of sucks
• Event handling is frequently broken
• Ajax is inconsistent
• You have to roll your own animation
• Drag and drop is tricky
• Co-ordinates are surprisingly hard
• Internet Explorer leaks memory like a sieve
![Page 8: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/8.jpg)
The Event model// Internet Explorer
element.attachEvent('click',
function() {
alert(window.event);
}
)
// Everyone else
element.addEventListener('click',
function(ev) { alert(ev) }, false
);
![Page 9: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/9.jpg)
“The bad news: JavaScript is broken.
The good news:It can be fixed with more JavaScript!”
Geek folk saying
![Page 10: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/10.jpg)
The big four
• The Dojo Toolkit
• The Yahoo! User Interface Library
• Prototype (and Script.aculo.us)
• jQuery
![Page 11: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/11.jpg)
The Dojo Toolkit
![Page 12: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/12.jpg)
• Founded in 2004
• Originally unified from a bunch of older frameworks
• Initial aim was to show that JavaScript / DHTML should be taken seriously
• Enormous amount of smart technology
![Page 13: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/13.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
![Page 14: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/14.jpg)
dijit• The Dojo widget system
• Create widgets programmatically, or use declarative markup
<div dojoType="dijit.TitlePane"
label="Terms and Conditions"
width="200">
Text...
</div>
![Page 15: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/15.jpg)
The future today
• Cross browser 2D drawing APIs
• dojo.storage - store data offline
• dojo.undo.browser - history management
• The Dojo Offline Toolkit
![Page 16: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/16.jpg)
The Yahoo! User Interface Library
![Page 17: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/17.jpg)
YUI
• 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 18: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/18.jpg)
dom event connection
animation dragdrop
utilities
controls
autocomplete calendar
menu slider treeview
container
![Page 19: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/19.jpg)
YAHOO.util.Event.on(window, 'load', function() { var div = YAHOO.util.Dom.get('messages'); if (!div) { return; } 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 20: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/20.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 Script.aculo.us
![Page 21: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/21.jpg)
• Integrated with Ruby on Rails, but can be used separately as well
• Small, readable codebase - Prototype is just 3,000 lines
• Makes JavaScript behave more like Ruby
• This is a dual-edged sword
![Page 22: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/22.jpg)
$$('#bmarks li').each(function(li){ Event.observe(li, 'click', function(e) { this.style.backgroundColor = 'yellow'; }.bindAsEventListener(li));});
![Page 23: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/23.jpg)
• Wizzy extension for Prototype
• Huge collection of packaged effects
• AutoComplete, Slider, InPlaceEditor controls
• Drag and drop
• Easier DOM building
Script.aculo.us
![Page 24: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/24.jpg)
jQuery
![Page 25: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/25.jpg)
$(document).ready(function(){ $("a").addClass('hidden').click( function() { $(this).hide("slow"); return false; }); );});
![Page 26: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/26.jpg)
It’s not a gimmick!
• API designed around “chaining”
• Built in support for onContentLoaded
• Outstanding node selection
• CSS 3, XPath and custom extensions
• Small core library, smart plugin mechanism
• visualjquery.com/ offers the best docs
![Page 27: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/27.jpg)
!?
![Page 28: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/28.jpg)
Playing well with others
![Page 29: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/29.jpg)
“Namespaces are one honking great idea -- let's
do more of those!”
Tim Peters, “The Zen of Python”python -c "import this"
![Page 30: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/30.jpg)
Prototype
var moo = $('moo');['foo', 'bar'].each(function(id) { // ...});"This is a string".dasherize()Object.toJSON({foo: 'bar'}
![Page 31: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/31.jpg)
YUI
YAHOO.util.Event.on( YAHOO.util.Dom.get('foo'), 'click', function(ev) { YAHOO.util.Event.stopEvent(ev); // ... });
![Page 32: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/32.jpg)
YUI idiomvar $E = YAHOO.util.Event;var $D = YAHOO.util.Dom;$E.on( $D.get('foo'), 'click', function(ev) { $E.stopEvent(ev); // ... });
![Page 33: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/33.jpg)
jQuery
• Everything it does is encapsulated in the jQuery function / object
• $(...) is just a shortcut for jQuery(...)
• If it exists, the original $ function is stashed away in jQuery._$
• You can restore it with jQuery.noConflict()
![Page 34: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/34.jpg)
jQuery.noConflict()<script src="prototype.js"></script><script src="jquery.js"></script><script>jQuery.noConflict();jQuery(function($) { $('div.panel').hide(); // ...});</script>
![Page 35: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/35.jpg)
Progressive enhancement
![Page 36: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/36.jpg)
http://www.neighbourhoodfixit.com/
![Page 37: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/37.jpg)
![Page 38: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/38.jpg)
![Page 39: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/39.jpg)
![Page 40: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/40.jpg)
Some neat ideas
![Page 41: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/41.jpg)
Interaction Design Patterns
![Page 42: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/42.jpg)
Smart node selection
• Progressive enhancement inevitably starts out by selecting existing nodes
• jQuery is based entirely around node selection
• Prototype has node selection as a key API
• YUI and Dojo just have getElementsByClassName
• YUI-ext offers smarter selections for YUI
![Page 43: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/43.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 44: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/44.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 45: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/45.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 46: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/46.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 47: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/47.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 48: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/48.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 49: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/49.jpg)
The law of leaky abstractions
![Page 50: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/50.jpg)
You need to understand what your library is doing for you
![Page 51: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/51.jpg)
Thank you
![Page 52: JavaScript Libraries: The Big Picture](https://reader034.vdocuments.mx/reader034/viewer/2022052619/55529963b4c905e8128b4dfa/html5/thumbnails/52.jpg)
http://www.flickr.com/photos/klara/94704029/
http://www.flickr.com/photos/petele/407151800/
http://www.flickr.com/photos/adactio/464449077/
http://www.flickr.com/photos/thepartycow/62830567/
http://www.flickr.com/photos/lunchtimemama/97685471/