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!
16 comments:
Thanks for the quick comparison Seth. It is nice seeing the different design approaches each one takes.
Great post. Thanks.
I like this post, thanks. Just one question... I always thought Dart is not running until the DOM isn't fully loaded. Now you showing me an approach to wait for that event - was I wrong with my assumption?
This is a nifty comparison, don't suppose CoffeeScript belongs in this mix?
jQuery still has the least surprising syntax in my opinion.
Good point, if you can provide it, I'll happily add it.
The Frog code that I've seen runs main() as soon as it loads the script. https://gist.github.com/1385015
The jQuery+CS are in https://gist.github.com/1594433
$("img").filter(":first").attr("alt", "My image");
is probably better written as:
$("img").eq(0).attr("alt", "My image");
Does it make sense to put the CoffeeScript examples directly under their corresponding JavaScript examples?
Christian's right. On the command line (your link), main would fire right away, but in the browser, it should wait for the DOM to be loaded.
Hi Vijay,
The Frog code says otherwise. Is that a bug with Frog?
I've created a bug for this, please star to track. Comments welcome!
http://code.google.com/p/dart/issues/detail?id=1161
Yeah, it was when I wrote the comment. It's been fixed.
For document load in jQuery, can't we just say $(function { code } ); ?
Here are MooTools snippets: https://gist.github.com/1671527
Post a Comment