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!

Popular posts from this blog

Lists and arrays in Dart

Converting Array to List in Scala

Null-aware operators in Dart