Thursday, December 29, 2011

Getting Started with the Dart Editor (and Dart Mode)

‹prev | My Chain | next›

While my Dart-enabled browser continues to download and build (seriously, do I really need 4.5G of "LayoutTests" to do that?), I think it wise to skip ahead and try alternate means of running actual Dart code.

That means downloading the latest, stable (for now) version of the "Dart Editor":
➜  Downloads  wget
Bah! I hate ZIP files. I never know if they contain a single directory with everything in it or a bunch of files and sub-directories that are going to get mixed up with my current working directory. No doubt there is a tar tzf equivalent, but I know I will never remember it. So I create a temporary directory into which I can extract the ZIP file:
➜  ~  cd ~/tmp
➜  tmp  mkdir dart-editor
➜  tmp  cd !$
➜  tmp  cd dart-editor
➜  dart-editor  unzip ~/Downloads/
It turns out that there is a single directory, dart, in the ZIP which contains:
➜  dart-editor  ls -1 dart
I normally install local code like this in my $HOME/local directory (rather than risk a sudo install). That directory seems a reasonable place for this:
➜  dart-editor  mv dart ~/local 
➜  dart-editor  cd ~/local/bin 
➜  bin  ln -s ../dart/DartEditor
The ~/local/bin directory path is already in my $PATH, so, by sym-linking the editor in there, I can run DartEditor from anywhere (including Gnome Do):
➜  ~  DartEditor
When I do that, I get a lovely splash screen:

Followed by a very IDE looking editor:

Which contains some simple getting started instructions:

Following those instructions, I would like to experiment with simple iterators:

Quite nicely, that creates a new iterator.dart file and an iterator.html file that will load the Javascript compiled version of that Dart code. The generated Dart is a pretty decent start. It simply appends "Hello World!" to the "status" element in the calling web page:

Since I desire to try a simple iterator, I modify the code slightly:

class iterator {

  iterator() {
    document.query('#status').innerHTML = '';

  void run() {
    [0,1,2,3,4,5,6,7,8,9].forEach((i) {
      write("Hello World #" + i + "!<br/>");

  void write(String message) {
    // the HTML library defines a global "document" variable
    document.query('#status').innerHTML += message;

void main() {
  new iterator().run();
In there, I blank out the "status" <div> in the iterator() constructor. Then, in run() I iterate through a list of integer elements (I will have to explore ranges another day) with the forEach() method. There seem to be a number of different ways to express an anonymous function in Dart. Here, I use the argument list followed by curly braces. Last up, I change write() to append to the "status" <div>.

When I try to run that code with the "Run in Browser" button, however, I am greeted by:

So I manually compile the dart into Javascript by selecting "Generate Optimized Javascript..." from the "Tools" menu and supplying the output path as: /home/cstrom/dart/iterator/ That seems to work (at least it didn't error out).

Checking it out in my browser, I see:


In the end, I am going to use Emacs to edit Dart code just like I use Emacs to edit everything else. Happily, there is an Emacs wonk or two at Google, meaning that there is already a dart-mode major Emacs mode. It is not in elpa yet, so I have to install it the old-fashioned way:
➜  ~  cd ~/.emacs.d 
➜  .emacs.d git:(24) ✗ 
➜  .emacs.d git:(24) ✗ wget
2011-12-29 22:35:48 (169 KB/s) - `dart-mode.el' saved [15705]
Then, in my dot emacs file, I require and auto-load dart-mode:
(require 'dart-mode)
(add-to-list 'auto-mode-alist '("\\.dart\\'" . dart-mode))

With that, I have beautiful Dart code (well, not hideously ugly) in a beautiful editor:

That is a good stopping point for tonight. Hopefully tomorrow "Dartium" will have finished compiling.

Day #249


  1. Man, I hate to say this, but better you than me. Dart code makes me want to fall asleep, it's so generic-Java-or-C#. Thanks for doing this.

  2. You're judging a language based on the Hello World! program from a novice? Tsk.

    Just wait until you see the Elephant Plop pattern in Dart. It'll blow your mind :P

  3. Actually I wrote it off as soon as I saw the semicolons.

    I kid!

    Looking forward to seeing where this goes.

  4. unzip ~/Downloads/ -d ~/tmp/dart-editor/ is a lifesaver. Could you tell me what font that is in emacs? I likes :)

  5. That's the Liberation Mono font. I used to use inconsolata, but Liberation is a tad narrower (without feeling compressed). Fits especially nicely when doing split screen.

  6. Chris, Try closing the project and re opening. If that doesnt work, then try deleting the workspace directory and relaunching DartEditor. Also, if you start doing library type code expect that to happen a lot.