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
- edit your Dart script
- save
- refresh in browser
- 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:
- Install node as per the frog README
- Pull latest from bleeding_edge
- > cd dart/frog
- > ./minfrog tip/toss.dart
- 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.
- Now open dart/client/samples/spirodraw/Spirodraw.dart in the Dart Editor or your favorite text editor (probably vi).
- Make a change (say, replace a color) and save it.
- 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.”
Jacek Laskowski said
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?
branflake2267 said
Good job Dart[ers]
Frog, Toss, Tip and in-browser compiling » DartWatch - Watching Google Dart said
[…] 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) […]
Graeme Merrall said
Note as of latest bleeding edge this has changed. It’s now $ ./minfrog ../utils/tip/toss.dart