javascript libraries: the big picture

JavaScript Libraries:The Big Picture

Simon WillisonXTech, 16th May 2007

• What problems do libraries solve?

• An overview of the Big Four

• ... what are the interesting ideas?

Personal bias

• I like JavaScript-the-language

• So I won't be talking about frameworks that generate JavaScript code for you

Douglas Crockford

“ The Web is the most hostile software engineering environment imaginable.”

The legacy of the browser wars

• 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

The Event model// Internet Explorer

element.attachEvent('click',

function() {

alert(window.event);

}

)

// Everyone else

element.addEventListener('click',

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

);

“The bad news: JavaScript is broken.

The good news:It can be fixed with more JavaScript!”

Geek folk saying

The big four

• The Dojo Toolkit

• The Yahoo! User Interface Library

• Prototype (and Script.aculo.us)

• jQuery

The Dojo Toolkit

• 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

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

dijit• The Dojo widget system

• Create widgets programmatically, or use declarative markup

<div dojoType="dijit.TitlePane"

label="Terms and Conditions"

width="200">

Text...

</div>

The future today

• Cross browser 2D drawing APIs

• dojo.storage - store data offline

• dojo.undo.browser - history management

• The Dojo Offline Toolkit

The Yahoo! User Interface Library

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

dom event connection

animation dragdrop

utilities

controls

autocomplete calendar

menu slider treeview

container

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

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

• 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

$$('#bmarks li').each(function(li){ Event.observe(li, 'click', function(e) { this.style.backgroundColor = 'yellow'; }.bindAsEventListener(li));});

• Wizzy extension for Prototype

• Huge collection of packaged effects

• AutoComplete, Slider, InPlaceEditor controls

• Drag and drop

• Easier DOM building

Script.aculo.us

jQuery

$(document).ready(function(){ $("a").addClass('hidden').click( function() { $(this).hide("slow"); return false; }); );});

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

!?

Playing well with others

“Namespaces are one honking great idea -- let's

do more of those!”

Tim Peters, “The Zen of Python”python -c "import this"

Prototype

var moo = $('moo');['foo', 'bar'].each(function(id) { // ...});"This is a string".dasherize()Object.toJSON({foo: 'bar'}

YUI

YAHOO.util.Event.on( YAHOO.util.Dom.get('foo'), 'click', function(ev) { YAHOO.util.Event.stopEvent(ev); // ... });

YUI idiomvar $E = YAHOO.util.Event;var $D = YAHOO.util.Dom;$E.on( $D.get('foo'), 'click', function(ev) { $E.stopEvent(ev); // ... });

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

jQuery.noConflict()<script src="prototype.js"></script><script src="jquery.js"></script><script>jQuery.noConflict();jQuery(function($) { $('div.panel').hide(); // ...});</script>

Progressive enhancement

http://www.neighbourhoodfixit.com/

Some neat ideas

Interaction Design Patterns

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

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

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

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

XPath optimisations

• Mozilla and Opera offer fast XPath lookups through document.evaluate(...)

• Dojo can use this for getElementsByClass()

• Prototype redefines getElementsBySelector to use XPath

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

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

The law of leaky abstractions

You need to understand what your library is doing for you

Thank you

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/