Posts

Showing posts from January, 2012

Chromium and Dart with Dev Tools

Image
There is a public branch of Chromium that embeds the Dart virtual machine, allowing you to run native Dart code directly in the browser. Unfortunately, only the Dartium source is available right now, but if you search hard enough, you might find an enterprisingly fellow providing pre-built binaries (warning: these may blow up your machine.)

The engineers have begun to add Developer Tools support with Dart, which starts to tell the debugging story. With a very recent build of Dartium (2012-01-24) you can try this for yourself. I found breakpoints are working, with a few caveats (eg not working with function callbacks yet.)
To see Chromium + Dart + Dev tools + breakpoints in action:



Dart is getting ready, please do try it out by learning more, browsing the API, using the Editor, or downloading the SDK. I also have a series of posts on Dart. Please let us know what you think!

Dart SDK Quick Tour

(This is part 9 in an ongoing series about Dart. Check out part 8, This is this in Dart.)

The Dart team quietly started to provide binary Dart SDKs for download. Without compiling or syncing large source repositories, you can now compile your Dart code to JavaScript with Frog, run the Dart VM, and browse the Dart libraries.

Download

There are two options for downloading the Dart SDK: continuous nightlies or integration releases.

Choose the continuous builds if you want to live on the edge, or choose the integration builds if you want more tested releases.

For the SDK, look for either dart-linux.zip, dart-macos.zip, or dart-win32.zip. The other files (starting with DartBuild) are the Dart Editor.

After you download and unzip the archive, you'll have a dart-sdk directory. The bin directory has dart, which is the Dart VM, and frogc, the Frog compiler.

The Frog compiler

When Dart was initially announced, we shipped a DartC compiler which turned your Dart code into JavaScript code. DartC…

JavaScript WAT moments and Dart

Image
There's a very funny 5 minute video by Gary Bernhardt from CodeMash 2012 which highlights a few WAT??!?! moments with some of our favoriate languages like Ruby and JavaScript. If you haven't seen this yet, take a few minutes and give yourself a chuckle.

Back? Cool. Let's map some of those JavaScript WAT moments to Dart and see how we do.

Example 1: Adding two empty arrays

Behold, the JavaScript:

[] + [] > "" // ?!?!?!
Not expected.

Behold, the Dart:

(note, List does not have a + operator, so here's the best we can do)

var result = []; result.addAll([]); print(result is List); // true.
Expected.

Example 2: Adding an empty array and empty map

Behold, the JavaScript:

[] + {}; > "[object Object]" // ?!?!?!
That's right, a string. Not expected.

Behold, the Dart:

(note, Map does not extend collection, so not only can't we use the + operator, it doesn't make sense to directly add a Map to a List.)

var result = []; [].addAll({}); // NoSuchMeth…

This is this in Dart

(This is part 8 in an ongoing series about Dart. Check out part 7, Strings in Dart.)

One of the things that's always confused me about JavaScript is the changing definition of this. This post will show how Dart avoids the confusion with more logical bindings.

The Problem

Here's some JavaScript code:

function Awesome() { } Awesome.prototype.cool = function() {     alert("inside awesome"); } Awesome.prototype.init = function(button) {     button.addEventListener("click", function() {         this.cool(); // this won't work!     }); } var button = document.getElementById("b"); var a = new Awesome(); a.init(button);
As you can see, I've created a simple Awesome object with two methods. The cool() method prints a simple message. The init() method adds an event listener to a button, which calls cool() when clicked.

At first glance, this seems like it will work. However, because the definition of this is relative to the current context of execut…

Strings in Dart

UPDATED: 2013-07-01

(This is part 7 in an ongoing series about Dart. Check out part 6, For loops in Dart.)

Dart brings some new ideas to Strings. If you think you know Strings, keep reading for a few surprises.

From the API docs: "A string is represented by a sequence of Unicode UTF-16 code units."

Immutable

String are immutable objects, which means you can create them but you can't change them. You can of course build a new string out of other strings, but once created, the string's contents are fixed.

This is an optimization, as two strings with the same characters in the same order can be the same object.

var s11 = "strings are immutable"; var s21 = "strings are immutable"; print(s11 == s21); // true, contain the same characters print(identical(s11, s21)); // true, are the same object in memory
If you look closely at the String API docs, you'll notice that none of the methods on String actually change the state of a String. For example, the …

For loops in Dart, or, Fresh bindings for sane closures

(This is Part 6 of an ongoing series about Dart. Check out Part 5, Generics in Dart.)

Dart has two forms of the for loop. While you may familiar with this form of iteration, the JavaScript developer will find one (surprisingly refreshing) difference. Read on!

Dart supports the typical for loop form:

for (var i = 0; i < 3; i++) { print(i); }
As well as the for-in form:

var collection = [0,1,2]; for (var x in collection) { print(x); }
The for-in form is sugar for the longer code which involves an iterator:

// this is the long form of for-in var n0 = collection.iterator(); while (n0.hasNext()) { final x = n0.next(); print(x); } // where n0 is an identifier that does not occur anywhere in the program.
This means that any object which implements Iterable can be used via for-in.

Hopefully this looks familiar so far. You might even be yawning. But wake up!

There is a subtle semantic difference between how Dart runs the for loop and how JavaScript runs the for loop.

To start, …

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 JavaScripthit 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 = docum…

Generics in Dart, or, Why a JavaScript programmer should care about types

(This is Part 5 in an ongoing series on Dart. Check out Part 4, Maps and hashes in Dart.)

Intro

Dart is, by most accounts, designed to be a familiar programming language. One of Dart's most interesting (and daring features for a mainstream language) is optional typing. Optional static types allow you to choose when to add the static types.

Dart has optional typing because it's a web programming language, and it's designed to scale from interactive scripts (which don't necessarily need lots of declared types) to complex, large web applications (which probably do need lots of declared types, which serve as a documentation annotation for tools and humans.)

An example of untyped Dart code:

smush(a, b) => a + b; main() { var msg = "hello"; var rcpt = "world"; print( smush(msg, rcpt) ); } > helloworld
As you can see in the example above, the var keyword is used to denote a variable. var is synonymous with the Dynamic, or "unknown", ty…

Maps and hashes in Dart

(This is Part 4 of our ongoing series about Dart. Check out Part 3: Lists and arrays in Dart.)

Warning: We expect the Dart libraries to undergo potentially sweeping changes before Dart goes to alpha. This document is relevant as of 2012-01-02.

Intro

Dart is not just a language, but a full "batteries included" effort to create a productive, familiar, and fun environment for the modern web app developer. The bundled libraries are one such "battery", including many common classes and utilities such as date manipulation, regular expressions, even asynchronous constructs like Future and Promise.

Probably the most used set of libraries will be the Collections, such as List, Map, and Set. In this post, we'll take a look at Map, which is a mapping of keys to values.

In Dart, a Map is an interface designed to manipulate a collection of keys which point to values. Maps can have null values, and can have parameterized types. Note, Maps do not subclass the Collection interfa…