javascript library showdown
Download
Skip this Video
Download Presentation
JavaScript Library Showdown

Loading in 2 Seconds...

play fullscreen
1 / 46

JavaScript Library Showdown - PowerPoint PPT Presentation


  • 104 Views
  • Uploaded on

JavaScript Library Showdown. Rob Larsen 7.14.2009 htmlcssjavascript.com | @ rob\_react htmlcssjavascript.com /downloads/libraries.ppt. Who is this Guy Anyway?. 10+ years HTML/CSS/JavaScript all day Principal Presentation Engineer at Cramer

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'JavaScript Library Showdown' - waylon


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
javascript library showdown

JavaScript Library Showdown

Rob Larsen

7.14.2009

htmlcssjavascript.com | @rob_react

htmlcssjavascript.com /downloads/libraries.ppt

who is this guy anyway
Who is this Guy Anyway?
  • 10+ years HTML/CSS/JavaScript all day
    • Principal Presentation Engineer at Cramer
      • PAST: AdvisorTech, Compete, Demandware, Boston's Weekly Dig, Gillette, Museum of Science, Boston, PC Connection, State Street, Webex
history
History
  • I remember when dHTML was “cool”

document.all(“ftw”)

document.layers[0]

history1
History
  • And then it wasn’t

(http://www.amazon.com/Macromedia-Flash-5-Upgrade-Windows/dp/B00004WG0L)

history2
History
  • And then it was actually cool, but we stopped mentioning dHTML

Photo by Martin Kliehm ( http://www.flickr.com/photos/martin-kliehm/536545606/ )

perspective
Perspective
  • Front end performance
  • Library agnostic
what libraries
What Libraries?
  • “By the book” JavaScript
  • “What I Would Normally Do” (small library with basic x-browser features and nothing else)
  • Dojo
  • jQuery
  • Prototype/Scriptaculous
  • YUI
concept
Concept
  • “I’ve got how long to finish this?”
  • Let’s see what’s out there…
how will they be compared
How Will They Be Compared?
  • Simple Tasks
  • Performance (Page render & execution)
  • Code Base
  • Documentation/Overall Presentation
  • Anecdotes
what tasks
What Tasks?
  • Unobtrusive JavaScript
  • Fire a function when the DOM is loaded
  • That function attaches a click event to an HTML element
  • When clicked, a function fires that:
    • Grabs an RSS feed from Reddit and writes it into a UL
    • Grabs a JSON feed from search.twitter.com and writes it into a UL
    • Creates an IMG, inserts it into the document and Fades it up from 0 opacity.
unobtrusive javascript
Unobtrusive JavaScript?

What is it?

  • Unobtrusive JavaScript is a method used to separate behavior from content and style, into its own discrete component.
  • Helps create usable, maintainable web sites
unobtrusive javascript1
Unobtrusive JavaScript?

Why?

  • Once coded, it should be easy to implement
  • It's accessible
  • The HTML markup is kept lean
  • Easier maintenance
unobtrusive javascript2
Unobtrusive JavaScript?

How does it work?

slide14
*
  • “Not Science” the numbers are for discussion, not for library turf wars
  • Get it done
  • Shallow, not deep
  • Obvious answers- didn’t phone a friend
exciting
Exciting?
  • Heck Yeah.

Photo by ortizmj12 (http://www.flickr.com/photos/[email protected]/2940137084/)

Photo by laverrue (http://www.flickr.com/photos/[email protected]/2940137084/)

let s look at some code
Let’s Look at Some Code

http://htmlcssjavascript.com/samples/presentation/

slide17
HTML

JavaScript

Tell me about JavaScript

add load event add event
Add Load Event/ Add Event

JavaScript

function init() {

document.getElementById("make-it-so").addEventListener("click" , results, false);

}

window.addEventListener("DOMContentLoaded", init, false);

Dojo

dojo.addOnLoad(

function() {

dojo.connect(dojo.byId("make-it-so"), 'onclick', results)

}

);

jQuery

$(document).ready( function() {

$("#make-it-so").click(results);

}

);

add load event add event1
Add Load Event/ Add Event

Prototype

document.observe("dom:loaded", function() {

$("make-it-so").observe("click" , results, false);

});

YUI

function init() {

YAHOO.util.Event.addListener(YAHOO.util.Dom.get("make-it-so"), "click", results, this);

};

YAHOO.util.Event.onDOMReady(init);

add load event add event2
Add Load Event/ Add Event

WIWND

//Dean Edwards (http://dean.edwards.name/weblog/2006/06/again/

function init() {

if (arguments.callee.done) return;

arguments.callee.done = true;

if (_timer) clearInterval(_timer);

//demo

addEvent(document.getElementById("make-it-so"), "click" , results );

//end demo

};

if (document.addEventListener) {

document.addEventListener("DOMContentLoaded", init, false);

};

//http://javascript.nwbox.com/IEContentLoaded/

/*@cc_on @*/

/*@if (@_win32)

(function () {

try {

document.documentElement.doScroll('left');

} catch (e) {

setTimeout(arguments.callee, 50);

return;

}

init();

})();

/*@end @*/

if (/WebKit/i.test(navigator.userAgent)) { // sniff

var _timer = setInterval(function() {

if (/loaded|complete/.test(document.readyState)) {

init(); // call the onload handler

}

}, 10);

};

window.onload = init;

get json
Get JSON

JavaScript/WIWND

var twitterJSON = document.createElement("script");

twitterJSON.type="text/javascript";

twitterJSON.src="http://search.twitter.com/search.json?callback=writeTwitterSearchResults&q=%23javascript&count=10";

document.body.appendChild(twitterJSON);

Dojo

dojo.xhrGet( {

url: '../json.php?url=http://search.twitter.com/search.json?q=javascript&count=10',

handleAs: "json",

load: function(responseObject, ioArgs) {

writeTwitterSearchResults(responseObject) }

});

jQuery

$.getJSON("../json.php?url=http://search.twitter.com/search.json?q=javascript&count=10", writeTwitterSearchResults );

get json1
Get JSON

Prototype

New Ajax.Request('../json.php?url=http://search.twitter.com/search.json?q=javascript&count=10', {

method:'get',

requestHeaders: {Accept: 'application/json'},

onSuccess: function(transport){ var json = transport.responseText.evalJSON(true);

writeTwitterSearchResults(json);

}

}

);

YUI

YAHOO.util.Get.script("http://search.twitter.com/search.json?callback=writeTwitterSearchResults&q=%23javascript&count=10");

slide23
XHR

JavaScript

getData : function() {

var data = new XMLHttpRequest();

data.onreadystatechange = function(){

if ( data.readyState == 4 && data.responseXML != null) {

reddit.parseIt(data.responseXML);

}

};

data.open("GET", "../feed.php?url=http://www.reddit.com/r/javascript/.rss", true);

data.send(null);

}

Dojo

dojo.xhrGet( {

url: '../feed.php?url=http://www.reddit.com/r/javascript/.rss',

handleAs: "xml",

load: function(responseObject, ioArgs) {

reddit(responseObject)

}

});

slide24
XHR

jQuery

$.get("../feed.php?url=http://www.reddit.com/r/javascript/.rss", reddit );

Prototype

new Ajax.Request("../feed.php?url=http://www.reddit.com/r/javascript/.rss", {

method: 'get',

onSuccess: function(transport) {

reddit(transport.responseXML)

}

});

YUI

var callback = {

success:reddit

};

var request = YAHOO.util.Connect.asyncRequest('GET', "../feed.php?url=http://www.reddit.com/r/javascript/.rss", callback);

remove element
Remove Element

JavaScript

twitterDIV.removeChild(document.getElementById("twitter-list"));

WIWND

twitterDIV.innerHTML="";

Dojo

dojo.destroy("twitter-list");

jQuery

$("#twitter-list").remove();

Prototype

$("twitter-list").remove();

YUI

twitterDIV.removeChild(YAHOO.util.Dom.get("twitter-list"));

add element fade up
Add Element, Fade Up

JavaScript

var image = {

insert : function(){

if (document.getElementById("fadeMe")) {

document.getElementById("image").removeChild(document.getElementById("fadeMe"));

}

var newImage = document.createElement("img");

newImage.src= "/web/samples/presentation/_assets/images/javascript.jpg";

newImage.setAttribute("id","fadeMe");

newImage.style.opacity=0;

document.getElementById("image").appendChild(newImage);

image.fadeUp();

},

fadeUp : function() {

var fadeImage = document.getElementById("fadeMe")

if (fadeImage.style.opacity < 1 ) {

fadeImage.style.opacity=parseFloat(fadeImage.style.opacity) + .05;

var callback = function() {

image.fadeUp();

}

setTimeout(callback,50);

}

}

}

add element fade up1
Add Element, Fade Up

Dojo

var newImage = document.createElement("img");

newImage.src= "/web/samples/presentation/_assets/images/javascript.jpg";

newImage.setAttribute("id","fadeMe");

newImage.style.opacity=0;

dojo.byId("image").appendChild(newImage);

dojo.fadeIn({ node : "fadeMe" , duration : 3000 }).play();

jQuery

$("#image").append("");

$("#fadeMe").fadeIn("slow");

Prototype

$("image").insert(new Element("img", {"src" : "/web/samples/presentation/_assets/images/javascript.jpg", "id" :"fadeMe", "style" : "display:none"}));

$("fadeMe").appear({ duration: 3.0 });

add element fade up2
Add Element, Fade Up

WIWND

var image = {

insert : function(){

if ($("fadeMe")) {

$("image").innerHTML="";

};

/*@cc_on

/*@if (@_win32)

var style= "filter:alpha(opacity=0)";

@else @*/

var style="opacity:0";

/*@end

@*/

$("image").innerHTML="";

image.fadeUp(0);

},

fadeUp : function(count) {

var fadeImage = $("fadeMe");

count = count + 5;

if (count < 100 ) {

/*@cc_on

/*@if (@_win32)

fadeImage.style.filter ="alpha(opacity="+ count +")";

@else @*/

fadeImage.style.opacity= (count/100);

/*@end

@*/

var callback = function() {

image.fadeUp(count);

}

setTimeout(callback,50);

}

}

};

add element fade up3
Add Element, Fade Up

YUI

var image = {

insert : function(){

if (YAHOO.util.Dom.get("fadeMe")) {

YAHOO.util.Dom.get("image").removeChild(YAHOO.util.Dom.get("fadeMe"));

}

var newImage = document.createElement("img");

newImage.src= "/web/samples/presentation/_assets/images/javascript.jpg";

newImage.setAttribute("id","fadeMe");

newImage.style.opacity=0;

YAHOO.util.Dom.get("image").appendChild(newImage);

image.fadeUp(0);

},

fadeUp : function(count) {

var fadeImage = YAHOO.util.Dom.get("fadeMe")

count = count + 5;

if (count < 100 ) {

/*@cc_on

/*@if (@_win32)

fadeImage.style.filter ="alpha(opacity="+ count +")";

@else @*/

fadeImage.style.opacity= (count/100);

/*@end

@*/

var callback = function() {

image.fadeUp(count);

}

setTimeout(callback,50);

}

}

}

pure javascript anecdotal
Pure JavaScript (anecdotal)
  • The Good:
    • Light. Fast. Standards based
  • The Bad:
    • More verbose. API awkward?
  • The Ugly:
    • Doesn’t work in 65% of the browsers worldwide
wiwnd anecdotal
WIWND(anecdotal)
  • The Good:
    • Light. Fast. Handles “big” x-browser stuff. Fun (for me)
  • The Bad:
    • Not clever / less convenient.
  • The Ugly:
    • Lots of heavy lifting. Lots.
dojo anecdotal
Dojo (anecdotal)
  • The Good:
    • Easy to pick up. HTML to include GZipped/CDN version right on download page
  • The Bad:
    • Slower. No JSON+Callback functionality. Need to learn to think in “Dojo”
  • The Ugly:
    • Documentation
jquery anecdotal
jQuery (anecdotal)
  • The Good:
    • Easy to pick up. Fast, succinct code. Chaining is fun. Solid documentation.
  • The Bad:
    • No JSON+Callback functionality. Need to learn to think in “jQuery.” CDN link not promoted.
  • The Ugly:
prototype scriptaculous anecdotal
Prototype/Scriptaculous (anecdotal)
  • The Good:
    • Feels more like JavaScript. Deep.
  • The Bad:
    • No JSON+Callback functionality. Promoted code is not minified. Slowest of the libraries.
  • The Ugly:
    • “Blototype.” Reading documentation was like being punched in the face.
yui anecdotal
YUI (anecdotal)
  • The Good:
    • Fast. Incredible documentation. CDN + single file functionality. Deep bench of advanced functionality. JSON+Callback functionality.
  • The Bad:
    • Limited, generic effects. Leaves more basic work than other libraries.
  • The Ugly:
    • Code.is.Awkward.To.Me()
ad