Advancing JavaScript with Libraries (Yahoo Tech Talk)

Advancing JavaScript
with Libraries
John Resig
ejohn.org / jquery.com / mozilla.com

Two Hats
• Mozilla Corp • jQuery JavaScript
Library
• FUEL
• Released Jan 2006
• JS Lib for Ext. Devs
• Small Filesize
• Reduce Complexity
• Short, concise, code
• JS Lib Test Suites
• Extensible via plugins
• Integration, better
coverage

Libraries are...

• ...abstractions away from existing APIs
• ...giving us new APIs to interface with

Hypothesis

• APIs breed patterns
• Libraries build new patterns on top of
existing APIs
• New library patterns advance development
in meaningful, considerable, ways

Why Create A Library?

• Distance ourselves from repetition
• In JavaScript:
• Distance from browser differences
• In C (stdlib):
• Distance from platform differences

DOM API

• Implemented in every modern browser
• Most stable of all the JavaScript APIs
• Very well documented

Fails in IE 7
JavaScript:
document.getElementById(“obj”)
.getElementsByTagName(“*”)

HTML:
<object id=”obj”>
<param name="src" value="test.mov"/>
<param name="title" value="My Video"/>
</object>

Fails in Safari 2
JavaScript:
document.getElementById(“opt”).selected

HTML:
<div style=”display: none;”>
<select><option id=”opt” value=”test”/></select>
</div>

Fails in Opera & IE
JavaScript:
document.getElementById(“q”)

HTML:
<form action="" method="POST">
<input type="text" name="q"/>
<span id="q">Search</span>
</form>

Fails in Opera & IE
JavaScript:
var f = document.getElementsByTagName(“input”);
for ( var i = 0; i < f.length; i++ ) { ... }

HTML:
<form action="" method="POST">
Num Rows: <input type="text" id="length" value="22"/><br/>
<input type="submit" value="Generate"/>
</form>

Re-interpretation
of the Spec

Fails in All
JavaScript:
document.getElementById(“name”)
.setAttribute(“disabled”, false);

HTML:
<input type=”text” id=”name” disabled=”disabled”/>

Fails in All
JavaScript:
document.body.setAttribute(“class”, “home”);

HTML:
<body> ... </body>

Why are Libraries
Created?
• Browsers have a large number of strange
differences...
• IE has a lot of well documented bugs
• Safari has less, but more obscure, bugs
• APIs don’t do what you expect
• When the API is impossible to learn, but
through experience

Break down into
Meta-Problems

• Waiting for the document to load
• Traversing the DOM
• Injecting HTML into a page

Waiting for the DOM
to load

• A DOM document must be fully loaded
before you can work with it
• Waiting for the window to load causes
ﬂashes of un-effected content

Focusing an input
<input type=”text” id=”test”/>
<script>document.getElementById(“test”).focus();</script>

<head><script src=”script.js”</head>

$(document).ready(function(){
$(“#test”).focus();
});

Traversing the DOM

• getElementsByTagName, getElementById,
getAttribute, nextSibling, previousSibling,
parentNode, className, etc.
• A lot to learn and get right
• Has the potential to be very tricky (and
long-winded)

DOM Selectors

• Goal: Improve the DOM Traversal API
• Provide an API on top of the existing DOM
API
• Look to standards for inspiration

Types of Selectors
• XPath Selectors
• //div/span[2]
• /html[@id=’home’]
• CSS 3 Selectors
• div > span:nth-of-type(2)
• html:root#home

Non-trivial Selectors

$(“#menu > li:not(:first-child)”).hide();

$(“ul[ul]”).show();

$(“tr:even”).addClass(“even”);

Injecting HTML

• Very frustrating problem
• Browsers are very tempermental
• (Inserting table rows, select options, etc.)

HTML Solution

• Allow users to insert HTML strings
• Convert to DOM nodes on the ﬂy
• Inject into the document correctly
$(“table tr”).append(“<td>test</td>”);
$(“select”).prepend(“<option>test</option>”);

• DOM Ready + Selectors + HTML Injection
• The dream of true unobtrusive DOM
scripting

$(“select”).append(“<option>None</option>”);
});

New Expectations
• What new expectations emerge out of this
new API?

$(“ul > li”).click(function(){
$(this).load(“menu.html”);
});

<ul>
<li>item a</li>
<li>item b</li>
</ul>

The Perception

• When the document was ready:
• We bound an event to a set of elements
• We loaded some new elements
• Why don’t they have the event?

New Pattern: Behaviors
function handleClick() {
$(“li”, this).click(loadMenu);
}

function loadMenu() {
$(this).load(“menu.html”, handleClick);
}

$(document).each(handleClick);
});

Behaviors

$(“li”).behavior(“click”,function(){
$(this).load(“menu.html”);
});
});

Pure DOM
function handleClick( elem ) {
var li = elem.getElementsByTagName(“li”);
for ( var i = 0; i < li.length; i++ )
li[i].addEventListener( “click”, loadMenu, false );
Doesn’t exist in IE
}

function loadMenu() { IE sets the wrong context
var elem = this;
Doesn’t exist in IE = new XMLHttpRequest();
var xhr
xhr.open( “GET”, “menu.html”, false );
xhr.onreadystatechange = function(){ Leaks in IE
if ( xhr.readyState == 4 ) {
elem.innerHTML = xhr.responseText;
handleClick( elem );
}
};
xhr.send( null );
}

window.onload = function(){ Doesn’t happen immediately
var ul = document.getElementsByTagName(“ul”);
for ( var i = 0; i < ul.length; i++ )
handleClick( ul[i] );
};

FUEL

• JavaScript Library for Firefox Extension
Development
• Designed to be used by Web Developers
• Current API is very C++ centric

Mozilla: Preferences
var prefs = Components.classes["@mozilla.org/preferences-service;1"]
.getService(Components.interfaces.nsIPrefBranch);

var str = Components.classes["@mozilla.org/supports-string;1"]
.createInstance(Components.interfaces.nsISupportsString);
str.data = "some non-ascii text";
prefs.setComplexValue("preference.with.non.ascii.value",
Components.interfaces.nsISupportsString, str);

Preferences w/ FUEL

Application.prefs.setValue(“some.pref”, “some non-ascii text”);

SELECT * FROM users WHERE id = 5;

SQL

$res = mysql_query(“SELECT * FROM users WHERE id = 5;”);
Programming Language while ( $row = mysql_fetch_assoc($res) ) {
// etc.
Interface }

User.find(5)
Abstraction
Layer (ORM)

class Account < ActiveRecord::Base
has_many :people do
def find_or_create_by_name(name)
first_name, last_name = name.split(" ", 2)
find_or_create_by_first_name_and_last_name
(first_name, last_name)
end
end
end

person = Account.find(:first).people
.find_or_create_by_name("David Heinemeier Hansson")
person.first_name # => "David"
person.last_name # => "Heinemeier Hansson"

Conclusion

• Libraries build new patterns on top of
existing APIs
• New library patterns advance development
in meaningful, considerable, ways

Bonus: Meta-Libraries

• Domain Speciﬁc Languages (DSLs)
• Build upon existing libraries building new
languages out of their APIs
• “jQuery2” meta language:
http://ejohn.org/apps/jquery2/

More info...
• http://ejohn.org/
• http://jquery.com/
• http://wiki.mozilla.org/FUEL
• http://ejohn.org/apps/jquery2/

• Contact:
jeresig@gmail.com

Advancing JavaScript with Libraries (Yahoo Tech Talk)

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Advancing JavaScript with Libraries (Yahoo Tech Talk) (20)

More from jeresig (20)

Recently uploaded (20)

Advancing JavaScript with Libraries (Yahoo Tech Talk)