BT

InfoQ Homepage News Dart-Compiled Dart Compiler Compiles Dart Code in Browser

Dart-Compiled Dart Compiler Compiles Dart Code in Browser

Bookmarks

Google has relaunched try.dartlang.org, the online playground that allows users try out Dart without having to download and install the Dart SDK. Unlike its predecessor, the new version compiles Dart code to JavaScript in the browser and, as a result, also works offline. It also supports dart:html, Dart's library for HTML DOM manipulation. However, its implementation is perhaps the most impressive aspect of try.dartlang.org.

try.dartlang.org screenshot

Peter von der Ahé announced the release on Google+:

We have revived try.dartlang.org. Compared to the old version, the new version features in-browser compilation, support for dart:html, and works offline.

If you have an iOS device, you can install Try Dart! as an app on your home screen.

While there are playground environments available for most languages -- for instance, try ruby, or repl.it which offers REPLs (Read Eval Print Loops) for many languages, including Python, JavaScript, Lua and many others -- most of these playground sites send the user's input to the server, execute the code there and send the result back to the client. Try.dartlang.org is different in that it both compiles and executes the code in the browser.

So, how does it work? How did the Dart team manage to host the Dart to JavaScript compiler (called dart2js) in the browser? A look at the source code repository of the try.dartlang.org project reveals the trick.

The dart2js compiler is itself written in Dart. Usually, it runs using the DartVM included with the SDK. However, to implement try.dartlang.org, the Dart team invoked the dart2js compiler on itself, thereby producing a compiler that translates Dart code to JavaScript in a single 457KB JavaScript file. This JavaScript version of the compiler is loaded into the browser and invoked every time the Dart code in the editor changes. The resulting JavaScript code is then evaluated and the result displayed.

While running the dart2js compiler in the browser is not a typical example of the type of web applications that one would build using Dart, bootstrapping the dart2js compiler in this way is an impressive technical feat.

Try.dartlang.org comes with a number of prepackaged example applications that can easily be run and tweaked to get a better understanding of how the language works. The examples range in complexity from a simple hello world application to the Delta Blue benchmark

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • repl.it

    by Amjad Masad /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Great article. However, small correction, repl.it doesn't have a backend, all languages are executed on the client. We cross-compiled Python, Ruby, and Lua's interpreters to JavaScript using emscripten. repl.it/about

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.