David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler

    Web app developer since 1994 and Google Cloud Platform Instructor now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 224 other followers

  • Sleepless Nights…

    December 2011
    S M T W T F S
  • Blog Stats

    • 1,034,589 hits

Dart dev mode cometh

Posted by David Chandler on December 9, 2011

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.”


4 Responses to “Dart dev mode cometh”

  1. I meant to give it a try, but after having visited many sites how to get the tools right, I ultimately gave up. I started with “from Dart source” and that’s where the “fun” begun. Would you point me to a doc where all the necessary stuff are easily to be found and follow?

  2. branflake2267 said

    Good job Dart[ers]

  3. […] And then navigate to your html file.  The toss server will detect that your html file is referencing type=”application/dart”, and will “magically” convert that to javascript on the fly which will execute in your browser.  (There’s more about how this works on David Chandlers blog) […]

  4. Graeme Merrall said

    Note as of latest bleeding edge this has changed. It’s now $ ./minfrog ../utils/tip/toss.dart

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: