Google recently took the covers off of a new language that they have been working on called Dart. Dart is designed to be used in client-side processing scenarios for Web applications. Now, before you roll your eyes and say, “Sheesh, didn’t Microsoft fail a few times with this?” there is something you need to keep in mind: Dart actually compiles down to JavaScript, so unlike previous attempts at a JavaScript replacement, no changes or plugins to existing browsers is needed. As a result, you can start developing with Dart today and know that your time will not be wasted, and the specification can change (it is still in beta) and your existing deployments will not suddenly change their behavior. More simply, if Dart looks good to you, using it will not back you into any corners. I want to take you on a brief tour of Dart to get an idea of how to get started with it.

To start, you should get the Dart Editor and install it. The Dart Editor is based on Eclipse, so if that is an environment you use often, you should feel right at home. Something that hung me up in my initial tests was that IE9’s security settings were so strict that the JavaScript that Dart emitted wouldn’t run. I switched to opening the files in Firefox and they worked fine. Another annoyance is that the generated JavaScript is quite large; the default “Hello World” application was over 9 MB large! The Dart team says that they are working to correct this.

Once you have a Dart environment up and running, it is time to get to work. The beginning of any Dart application is the function main() (which should return type void). In case main() didn’t give it away, Dart is indeed a C-style language, so expect the usual syntax conventions (curly braces for block delimiters, semi-colons for statement ends, and declaring variables with the form of type proceeding name). Dart has a simplified concept of scope; there is public and private scope, and to declare something as private, you prefix its name with an underscore. Typing is optional; you can declare a variable type using the “var” keyword or you can use an explicit type. It doesn’t get any easier than that. You can declare classes or interfaces, and of course, classes and implement interfaces (keywords “class” and “interface” respectively). To link a piece of Dart code to an HTML file so that its DOM is exposed to the application, you use the #import pragma, and pass it the name of the HTML file (for example, “#import(‘dart:html’);”).

Let’s look at a quick, sample Dart application. First, we define an interface (“doubler”) with a single method, “doubleAsString”. This is then implemented by two classes (numDoubler and stringDoubler). numDoubler takes the input, converts it to a number of type double, multiplies it by two and outputs the result as a string. stringDoubler takes the input and outputs it concatenated with itself. The application, when run, instantiates a variable of each of these two classes, calls, the doubleAsString function passing “2” as the input, and then it injects the results of each one into an HTML document.

Code Sample A: The Dart code

#import('dart:html');
interface doubler {
  String doubleAsString(String) {
  }
}
class numDoubler implements doubler {
  String doubleAsString(String input) {
    double number = 0.0;
    try {
      number = Math.parseDouble(input);
    }
    catch (BadNumberFormatException ex) {
      return ('');
    }
    return (number * 2).toString();
  }
}
class stringDoubler implements doubler {
  String doubleAsString(String input) {
    return input + input;
  }
}
void main() {
  var numDub = new numDoubler();
  var strDub = new stringDoubler();
  document.query("#doubledNum").innerHTML = numDub.doubleAsString('2');
  document.query("#doubledString").innerHTML = strDub.doubleAsString('2');
}

Code Sample B: The HTML file

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <h1>Test</h1>
    <h2 id="doubledNum"></h2>
    <h2 id="doubledString"></h2>
    <script type="text/javascript" src="Test.dart.app.js"></script>
  </body>
</html>

This produced the following output, as expected and hoped for:

Figure A: Output from the test application

Keeping in mind that this is early beta software and some of the tools are considered alpha, while the Dart language itself is “working” to the point where you can use it, the overall experience is not production quality yet. Unless I really overlooked something, the best you can do for debugging is to either use your browser’s JavaScript console and hope to relate JavaScript errors to your code (I did this successfully a few times), or to use the fairly primitive “Dartboard” online VM to hopefully get details (it did not do well when there were multiple errors, I found). The Dart Editor is slow; the only time it checks my code is when I save (including a “Run”), but it took a number of seconds to display compilation errors, and the real-time checking I am used to in Visual Studio isn’t there at all. Running the code in Firefox took about 10 seconds for this simple, sample application. I had also just upgraded to Firefox 8, so it is possible that Firefox 8 is just a dog, but I suspect that the nearly 10 MB of emitted JavaScript was the real culprit.

Over all, I like Dart as a language from what I’ve seen. It’s stripped down and simplified, but with enough of the things that JavaScript lacks but many developers want (like type safety). It integrates with the DOM nicely too. I hope that the tools can catch up to the point where I would consider this to be usable in a professional setting.