Seth Ladd's Blog: Comparing Dart, jQuery, CoffeeScript, CoffeeScript+jQuery, and JavaScript

UPDATE: Thanks to Ayose Cazorla we now have CoffeeScript+jQuery examples. And thanks to js2coffee.org we have vanilla CoffeeScript.

A neat comparison between jQuery and vanilla JavaScript hit Google+ via +Eric Bidelman, so I thought it would be fun to add vanilla Dart to the mix.

This is a fun experiment, but please don't base your decision to use one option or another based on this isolated blog post. Take a holistic approach to your evaluation.

Document is ready

// jQuery

$(document).ready(function() {
  // code…
});


// vanilla JavaScript

document.addEventListener("DOMContentLoaded", function() {
  // code…
});


// vanilla Dart

window.on.contentLoaded.add((e) => code);


// CoffeeScript+jQuery

$ -> code


// vanilla CoffeeScript

document.addEventListener "DOMContentLoaded", ->
  # code

Find all divs

// jQuery

var divs = $("div");


// vanilla JavaScript

var divs = document.querySelectorAll("div");


// vanilla Dart

var divs = document.queryAll("div");


// CoffeeScript+jQuery

divs = $ "div"


// vanilla CoffeeScript

divs = document.querySelectorAll("div")

Create a new div

// jQuery

var newDiv = $("<div/>");


// vanilla JavaScript

var newDiv = document.createElement("div");


// vanilla Dart

var newDiv = new Element.tag("div");


// CoffeeScript+jQuery

divs = $ "<div>"


// vanilla CoffeeScript

newDiv = document.createElement("div")

Add a class

// jQuery

newDiv.addClass("foo");


// vanilla JavaScript

newDiv.classList.add("foo");


// vanilla Dart

newDiv.classes.add("foo");


// CoffeeScript+jQuery

newDiv.addClass "foo"


// vanilla CoffeeScript

newDiv.classList.add "foo"

Toggle a class

// jQuery

newDiv.toggleClass("foo");


// vanilla JavaScript

newDiv.classList.toggle("foo");


// vanilla Dart

// doesn't work yet, see bug http://code.google.com/p/dart/issues/detail?id=1063
// newDiv.classes.toggle("foo");


// CoffeeScript+jQuery

newDiv.toggleClass "foo"


// vanilla CoffeeScript

newDiv.classList.toggle "foo"

Add a click handler for each <a>

// jQuery

$("a").click(function() {
  // code…
})


// vanilla JavaScript

[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});


// vanilla Dart

document.queryAll("a").forEach((el) {
    el.on.click.add((e) => code);
});


// CoffeeScript+jQuery

$("a").click -> code


// vanilla CoffeeScript

[].forEach.call document.querySelectorAll("a"), (el) ->
  el.addEventListener "click", ->
    # code

Append a new <p> to <body>

// jQuery

$("body").append($("<p/>"));


// vanilla JavaScript

document.body.appendChild(document.createElement("p"));


// vanilla Dart

document.body.nodes.add(new Element.tag("p"));


// CoffeeScript+jQuery

$("body").append $("<p>")


// vanilla CoffeeScript

document.body.appendChild document.createElement("p")

Add attribute to an element

// jQuery

$("img").filter(":first").attr("alt", "My image");


// vanilla JavaScript

document.querySelector("img").setAttribute("alt", "My image");


// vanilla Dart

document.query("img").attributes['alt'] = 'My image';


// CoffeeScript+jQuery

$("img:first").attr "alt", "My image"


// vanilla CoffeeScript

document.querySelector("img").setAttribute "alt", "My image"

Get parent node

// jQuery

var parent = $("#about").parent();


// vanilla JavaScript

var parent = document.getElementById("about").parentNode;


// vanilla Dart

var parent = document.query("#about").parent;


// CoffeeScript+jQuery

parent = $("#about").parent()


// vanilla CoffeeScript

parent = document.getElementById("about").parentNode

Clone an element

// jQuery

var clonedElement = $("#about").clone();


// vanilla JavaScript

var clonedElement = document.getElementById("about").cloneNode(true);


// vanilla Dart

var clonedElement = document.query("#about").clone(true);


// CoffeeScript+jQuery

clonedElement = $("#about").clone()


// vanilla CoffeeScript

clonedElement = document.getElementById("about").cloneNode(true)

Clear child nodes

// jQuery

$("#wrap").empty();


// vanilla JavaScript

var wrap = document.getElementById("wrap");
while(wrap.firstChild) wrap.removeChild(wrap.firstChild);


// vanilla Dart

document.query("#wrap").nodes.clear();


// CoffeeScript+jQuery

$("#wrap").empty()


// vanilla CoffeeScript

wrap = document.getElementById("wrap")
wrap.removeChild wrap.firstChild  while wrap.firstChild

Check if element has child nodes

// jQuery

if($("#wrap").is(":empty")) { ... }


// vanilla JavaScript

if(!document.getElementById("wrap").hasChildNodes()) { ... }


// vanilla Dart

if (document.query("#wrap").nodes.isEmpty()) { ... }


// CoffeeScript+jQuery

if $("#wrap").is(":empty")
  code


// vanilla CoffeeScript

code  unless document.getElementById("wrap").hasChildNodes()

Get next sibling element

// jQuery

var nextElement = $("#wrap").next();


// vanilla JavaScript

var nextElement = document.getElementById("wrap").nextSibling;


// vanilla Dart

var nextElement = document.query("#wrap").nextNode;


// CoffeeScript+jQuery

nextElement = $("#wrap").next()


// vanilla CoffeeScript

nextElement = document.getElementById("wrap").nextSibling

Next Steps

Like what you see? Learn more about Dart, its HTML libraries, and join the discussion. File a new issue if you see something missing.

Also, follow @dart_lang and +Dart Bits for more info!

Seth Ladd's Blog

Thursday, January 5, 2012

Comparing Dart, jQuery, CoffeeScript, CoffeeScript+jQuery, and JavaScript

Disclaimer