View
227
Download
0
Category
Preview:
Citation preview
8/8/2019 Javascript Libraries the Big Picture 20285
1/52
JavaScript Libraries:
The Big PictureSimon Willison
XTech, 16th May 2007
8/8/2019 Javascript Libraries the Big Picture 20285
2/52
What problems do libraries solve?
An overview of the Big Four
... what are the interesting ideas?
8/8/2019 Javascript Libraries the Big Picture 20285
3/52
Personal bias
8/8/2019 Javascript Libraries the Big Picture 20285
4/52
I like JavaScript-the-language
So I won't be talking about frameworks thatgenerate JavaScript code for you
8/8/2019 Javascript Libraries the Big Picture 20285
5/52
Douglas Crockford
The Web is the most
hostile software engineeringenvironment imaginable.
8/8/2019 Javascript Libraries the Big Picture 20285
6/52
The legacy of thebrowser wars
8/8/2019 Javascript Libraries the Big Picture 20285
7/52
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
8/8/2019 Javascript Libraries the Big Picture 20285
8/52
The Event model
// Internet Explorer
element.attachEvent('click',
function() {
alert(window.event);
}
)
// Everyone else
element.addEventListener('click',
function(ev) { alert(ev) }, false
);
8/8/2019 Javascript Libraries the Big Picture 20285
9/52
The bad news:JavaScript is broken.
The good news:It can be fixed with
more JavaScript!Geek folk saying
8/8/2019 Javascript Libraries the Big Picture 20285
10/52
8/8/2019 Javascript Libraries the Big Picture 20285
11/52
The Dojo Toolkit
8/8/2019 Javascript Libraries the Big Picture 20285
12/52
8/8/2019 Javascript Libraries the Big Picture 20285
13/52http://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
http://www.flickr.com/photos/lunchtimemama/97685471/http://www.flickr.com/photos/lunchtimemama/97685471/8/8/2019 Javascript Libraries the Big Picture 20285
14/52
dijit The Dojo widget system Create widgets programmatically, or use
declarative markup
Text...
8/8/2019 Javascript Libraries the Big Picture 20285
15/52
The future today
Cross browser 2D drawing APIs dojo.storage - store data offline dojo.undo.browser - history management
The Dojo Offline Toolkit
8/8/2019 Javascript Libraries the Big Picture 20285
16/52
The Yahoo! User Interface Library
8/8/2019 Javascript Libraries the Big Picture 20285
17/52
YUI
Created at Yahoo!, BSD licensed
Designed for both creating new applicationsand integration with legacy code Focused on browser issues; almost no
functionality relating to JS language itself Extensively tested and documented
8/8/2019 Javascript Libraries the Big Picture 20285
18/52
dom event connection
animation dragdrop
utilities
controls
autocomplete calendar
menu slider treeview
container
8/8/2019 Javascript Libraries the Big Picture 20285
19/52
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);});
8/8/2019 Javascript Libraries the Big Picture 20285
20/52
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 workfor the past few months tracking
DownloadGet the latest version1.5.1
LearnOnline documentation and resources.
DiscussMailing list and IRC
ContributeSubmit patches and report bugs.
Who's using Prototype?
Meet the developers
Prototype and Script.aculo.us
8/8/2019 Javascript Libraries the Big Picture 20285
21/52
Integrated with Ruby on Rails, but can beused separately as well
Small, readable codebase - Prototype is just3,000 lines
Makes JavaScript behave more like Ruby
This is a dual-edged sword
8/8/2019 Javascript Libraries the Big Picture 20285
22/52
$$('#bmarks li').each(function(li){
Event.observe(li, 'click', function(e) {
this.style.backgroundColor = 'yellow';
}.bindAsEventListener(li));
});
8/8/2019 Javascript Libraries the Big Picture 20285
23/52
Wizzy extension for Prototype
Huge collection of packaged effects AutoComplete, Slider, InPlaceEditor controls
Drag and drop
Easier DOM building
Script.aculo.us
8/8/2019 Javascript Libraries the Big Picture 20285
24/52
jQuery
8/8/2019 Javascript Libraries the Big Picture 20285
25/52
$(document).ready(function(){
$("a").addClass('hidden').click(
function() {
$(this).hide("slow");return false;
});
);
});
8/8/2019 Javascript Libraries the Big Picture 20285
26/52
Its 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
http://visualjquery.com/http://visualjquery.com/http://visualjquery.com/8/8/2019 Javascript Libraries the Big Picture 20285
27/52
!?
8/8/2019 Javascript Libraries the Big Picture 20285
28/52
Playing well with others
8/8/2019 Javascript Libraries the Big Picture 20285
29/52
Namespaces are one
honking great idea -- let'sdo more of those!
Tim Peters, The Zen of Python
8/8/2019 Javascript Libraries the Big Picture 20285
30/52
Prototype
var moo = $('moo');
['foo', 'bar'].each(function(id) {
// ...
});
"This is a string".dasherize()
Object.toJSON({foo: 'bar'}
8/8/2019 Javascript Libraries the Big Picture 20285
31/52
YUI
YAHOO.util.Event.on(
YAHOO.util.Dom.get('foo'),
'click',function(ev) {
YAHOO.util.Event.stopEvent(ev);
// ...
}
);
8/8/2019 Javascript Libraries the Big Picture 20285
32/52
YUI idiom
var $E = YAHOO.util.Event;
var $D = YAHOO.util.Dom;
$E.on(
$D.get('foo'), 'click',
function(ev) {
$E.stopEvent(ev);
// ...}
);
8/8/2019 Javascript Libraries the Big Picture 20285
33/52
jQuery
Everything it does is encapsulated in thejQuery 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()
8/8/2019 Javascript Libraries the Big Picture 20285
34/52
jQuery.noConflict()
jQuery.noConflict();
jQuery(function($) {
$('div.panel').hide();
// ...});
8/8/2019 Javascript Libraries the Big Picture 20285
35/52
Progressiveenhancement
8/8/2019 Javascript Libraries the Big Picture 20285
36/52
http://www.neighbourhoodfixit.com/
8/8/2019 Javascript Libraries the Big Picture 20285
37/52
8/8/2019 Javascript Libraries the Big Picture 20285
38/52
8/8/2019 Javascript Libraries the Big Picture 20285
39/52
8/8/2019 Javascript Libraries the Big Picture 20285
40/52
Some neat ideas
8/8/2019 Javascript Libraries the Big Picture 20285
41/52
Interaction Design Patterns
8/8/2019 Javascript Libraries the Big Picture 20285
42/52
Smart node selection
Progressive enhancement inevitably starts out byselecting 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
8/8/2019 Javascript Libraries the Big Picture 20285
43/52
Smarter Ajax
Prototype makes it easy to set a callback forwhen ANY Ajax request completes... usefulfor loading status icons
Ajax.Updater can extract and execute blocks in HTML fragments
Great for unobtrusively enhancing elementsthat have just been added to the page
8/8/2019 Javascript Libraries the Big Picture 20285
44/52
Self-adjusting animations
You can roll your own animations inJavaScript using setTimeout and setInterval...
... but the time taken for a animation willvary depending on browser performance
Smarter animations adjust their framerate tocompensate for browser performance
All four libraries do this
8/8/2019 Javascript Libraries the Big Picture 20285
45/52
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();
8/8/2019 Javascript Libraries the Big Picture 20285
46/52
XPath optimisations
Mozilla and Opera offer fast XPath lookupsthrough document.evaluate(...)
Dojo can use this for getElementsByClass()
Prototype redefines getElementsBySelector
to use XPath
8/8/2019 Javascript Libraries the Big Picture 20285
47/52
Minification
All four libraries ship in both uncompressedand compressed formats
YUI uses minification: whitespace andcomments are stripped
The Dojo build system uses ShrinkSafe,which compresses JavaScript using the Rhino
parser
jQuery uses Dean Edwards Packer, withbase62 encoding
8/8/2019 Javascript Libraries the Big Picture 20285
48/52
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
http://o.aolcdn.com/iamalpha/.resource/jssdk/dojo-0.4.1/dojo.jshttp://o.aolcdn.com/iamalpha/.resource/jssdk/dojo-0.4.1/dojo.jshttp://yui.yahooapis.com/2.2.2/build/dom/dom-min.jshttp://yui.yahooapis.com/2.2.2/build/dom/dom-min.jshttp://yui.yahooapis.com/2.2.2/build/reset/reset-min.csshttp://yui.yahooapis.com/2.2.2/build/reset/reset-min.css8/8/2019 Javascript Libraries the Big Picture 20285
49/52
The law of leaky abstractions
8/8/2019 Javascript Libraries the Big Picture 20285
50/52
You need to understand
what your libraryis doing for you
8/8/2019 Javascript Libraries the Big Picture 20285
51/52
Thank you
8/8/2019 Javascript Libraries the Big Picture 20285
52/52
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/
http://www.flickr.com/photos/lunchtimemama/97685471/http://www.flickr.com/photos/klara/94704029/http://www.flickr.com/photos/klara/94704029/http://www.flickr.com/photos/klara/94704029/http://www.flickr.com/photos/lunchtimemama/97685471/http://www.flickr.com/photos/lunchtimemama/97685471/http://www.flickr.com/photos/klara/94704029/http://www.flickr.com/photos/klara/94704029/http://www.flickr.com/photos/klara/94704029/http://www.flickr.com/photos/klara/94704029/http://www.flickr.com/photos/klara/94704029/http://www.flickr.com/photos/klara/94704029/http://www.flickr.com/photos/klara/94704029/http://www.flickr.com/photos/klara/94704029/Recommended