Dart dev mode cometh

As of yesterday, you can get “dev mode light” functionality in Dart using the frog compiler. The new frog “tip” will compile your Dart script to JS on the fly, so the workflow is

1. edit your Dart script
2. save
3. refresh in browser
4. see changes in 1 or 2 sec

You can already do this in the Dart Editor, but if you want the latest libs from Dart source, you’ll need to use frog instead. Here’s how to do it:

1. Install node as per the frog README
2. Pull latest from bleeding_edge
3. > cd dart/frog
4. > ./minfrog tip/toss.dart
5. Browse to a Dart sample under the http address you get back (like http://localhost:1337/client/samples/spirodraw/spirodraw.html). Navigation from the home page may not work yet, so you may have to append the path to the URL as shown here.
6. Now open dart/client/samples/spirodraw/Spirodraw.dart in the Dart Editor or your favorite text editor (probably vi).
7. Make a change (say, replace a color) and save it.
8. Hit refresh in the browser.

Note: currently, the server only serves up code under the dart source hierarchy. An option to point to an external location is coming soon.

How it works

Toss.dart is a tiny Dart script that runs an http server. When you request an html page that contains <script type=”application/dart”>, the server invokes the frog JS compiler on the fly and serves up the resulting JS inline.

You can also run frog on the command line. The compiler has been renamed from frogsh to minfrog and is checked into the Dart source repo so you don’t need to build it first. Just add the dart/frog directory to your PATH.

> cd dart/client/samples/spirodraw
> minfrog –compile-only –out=spirodraw.js Spirodraw.dart
Edit the <script> tag in spirodraw.html to point to the compiled JS
> open spirodraw.html (to launch the browser, works on Mac, anyway)

If you run frog directly like this, make sure the <script> tag in your html points to your compiled JS. If you instead run the frog toss server, the <script> tag should point to the Dart script directly with type=”application/dart”.

Coming soon

Running the frog server (toss.dart) is an easy way to see your changes quickly. Even better will be Dartium, a special Chromium build with the Dart VM integrated. With Dartium, no JS compilation is needed at all. Just edit, save, and refresh in the browser to see your changes “instantly.”