Javascript Libraries the Big Picture 20285

8/8/2019 Javascript Libraries the Big Picture 20285

1/52

JavaScript Libraries:

The Big PictureSimon Willison

XTech, 16th May 2007


2/52

What problems do libraries solve?

An overview of the Big Four

... what are the interesting ideas?


3/52

Personal bias


4/52

I like JavaScript-the-language

So I won't be talking about frameworks thatgenerate JavaScript code for you


5/52

Douglas Crockford

The Web is the most

hostile software engineeringenvironment imaginable.


6/52

The legacy of thebrowser wars


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/52

The Event model

// Internet Explorer

element.attachEvent('click',

function() {

alert(window.event);

}

)

// Everyone else

element.addEventListener('click',

function(ev) { alert(ev) }, false

);


9/52

The bad news:JavaScript is broken.

The good news:It can be fixed with

more JavaScript!Geek folk saying


10/52


11/52

The Dojo Toolkit


12/52


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/


14/52

dijit The Dojo widget system Create widgets programmatically, or use

declarative markup

Text...


15/52

The future today

Cross browser 2D drawing APIs dojo.storage - store data offline dojo.undo.browser - history management

The Dojo Offline Toolkit


16/52

The Yahoo! User Interface Library


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


18/52

dom event connection

animation dragdrop

utilities

controls

autocomplete calendar

menu slider treeview

container


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);});


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


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


22/52

$$('#bmarks li').each(function(li){

Event.observe(li, 'click', function(e) {

this.style.backgroundColor = 'yellow';

}.bindAsEventListener(li));

});


23/52

Wizzy extension for Prototype

Huge collection of packaged effects AutoComplete, Slider, InPlaceEditor controls

Drag and drop

Easier DOM building

Script.aculo.us


24/52

jQuery


25/52

$(document).ready(function(){

$("a").addClass('hidden').click(

function() {

$(this).hide("slow");return false;

});

);

});


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/


27/52

!?


28/52

Playing well with others


29/52

Namespaces are one

honking great idea -- let'sdo more of those!

Tim Peters, The Zen of Python


30/52

Prototype

var moo = $('moo');

['foo', 'bar'].each(function(id) {

// ...

});

"This is a string".dasherize()

Object.toJSON({foo: 'bar'}


31/52

YUI

YAHOO.util.Event.on(

YAHOO.util.Dom.get('foo'),

'click',function(ev) {

YAHOO.util.Event.stopEvent(ev);

// ...

}

);


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);

// ...}

);


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()


34/52

jQuery.noConflict()

jQuery.noConflict();

jQuery(function($) {

$('div.panel').hide();

// ...});


35/52

Progressiveenhancement


36/52

http://www.neighbourhoodfixit.com/


37/52


38/52


39/52


40/52

Some neat ideas


41/52

Interaction Design Patterns


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


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


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


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();


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


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


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.css


49/52

The law of leaky abstractions


50/52

You need to understand

what your libraryis doing for you


51/52

Thank you


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/

Javascript Libraries the Big Picture 20285

Documents

Transcript of Javascript Libraries the Big Picture 20285