Tools to help you execute code

Before you get in to writing your own Dart programs you need to determine how you're going to execute your Dart code.  Because Dart is a new language, browser support is extremely limited so you simply can't execute your code in the same way you would Javascript.   Fortunately the Dart developers have given us several ways to execute code.

Javascript vs Native Dart
If you're writing programs in Dart, you're going to have trouble publishing code that can run because there's no native Dart support in browsers.   However, even though you can't execute Dart code directly in the browser, you can execute Javascript which is supported by all modern browsers.  Luckily you can can easily convert your Dart code directly in to Javascript using various tools supplied with Dart.
This means you can develop your applications in Dart, convert them to Javascript and create interactive websites users can use immediately. Then when Dart support is enabled in browsers, you can simply replace the Javascript with your Dart code and users will generally not notice any change except for improvements in performance and responsiveness.

So you get the best of both worlds. You get to develop robust and maintainable code, while your users still get to use your application.

Let's that a look at the various ways you can edit Dart code. We'll start by looking at tools that can generate Javascript.  With the exception of the IDE, most of these tools require getting and building the Dart code which we'll look at in the next post.

The Dart IDE
This is by far the easiest method. If you're new to Dart and uncomfortable with concepts such as checking out and compiling your own code, then this is probably the only method you want to use for now.

The Dart IDE allows you to write Dart code and preview it directly within your browser by converting it to Javascript.  When you're happy with your code you can even have the IDE create optimised Javascript that you can publish to the Internet.

The Dart IDE

htmlconverter.py
The htmlconverter tool is slightly different to all the other tools in that it not only converts Dart to Javascript but it also creates a single HTML file containing all of the converted Javascript.  Instead of passing in the Dart file to be converted, with the htmlconverter tool you provide the HTML file to be converted. The tool then uses the script reference to the Dart file to include the converted Javascript in the HTML output.

In reality, the htmlconverter tool is a wrapper for dartc and frogsh both which we'll cover below.

dartc
This is the Dart compiler and behaves much like any other compiler.  It operates from the command line  and like any compiler includes an array of command line switches that affects how your code is compiled.   You can use this tool to convert Dart code to Javascript but right now, the IDE does a slightly better job of creating smaller files.   If you do decide to use dartc however, ensure you call it with the --optimize flag to generate optimised Javascript.

frogsh
frogsh is an additional converter for Dart code that utilises node.js.  You can either use it directly but or you can use htmlconverter.py by passing in the --frog flag.  The advantage of using frogsh is that it generates Javascript that right now is far more optimised than dartc.

One option is to do your development using the Dart IDE, then instead of generating optimised Javascript using the IDE, process your Dart using frogsh.

The command line for frogsh is rather non-obvious. The basic command line is
frogsh --compile-only --out=<path to js file> <path to dart file>

There's a number of other options you can see if you investigate the source, however the most useful self-explanatory ones are --ignore-unrecognized-flags, --verbose, --suppress_warnings, --warnings_as_errors, --throw_on_errors and --throw_on_warnings


Tip

Tip is an extensionfor the Chrome browser that allows you to quickly edit, then convert and run Dart code.  You can see in the picture below that there are 4 panes. On the top left you can see the Dart code pane which is fully editable.  Once you compile your code, the Javascript output shows in the top left window.  The bottom panes show any compiler warnings in the left pane and the actual result is shown in the bottom left pane.

One ideal use for Tip is for quick testing and prototyping as it's very simple to test your code to check the output. You could create simple standalone classes and methods which you can then integrate into your main code once you're happy with it.

Toss
Toss is another handy tool for rapid testing and prototyping of your code.   Toss is a simple web server that converts form Dart to Javascript "on the fly". The beauty of this is that you can easily save your Dart code to disk and rapidly view it in the browser.  It's very new and functionality is bound to change so as of writing it's most definitely caveat emptor!

To run Toss, you'll need to have downloaded the Dart course code.  Once you have it, you can run Toss from within the frog directory with the command line ./frogsh ../utils/tip/toss.dart which will create a server running on localhost for you to browse to.

Note that the web server is pretty basic and doesn't support directory/file browsing.  By default, the document root of the server is the top level directory of your Dart source code directory and it's best if you type the location of the file directly e.g http://localhost:1337/client/samples/Clock.html.  If you want to change the document root, some judicious editing of toss.dart will do the job (hint: change the value of homedir in the main() method)

Dartium/Chromium
This is real bleeding edge stuff but you can actually execute native code by running a version of Chromium with Dart support built in.  It's called Dartium, get it?  For the uninitiated, Chromium is the open source version of Chrome. it has its home at http://chromium.org/
To run Dartium, from within your Dart source execute the command client/tests/drt/Chromium.app/Contents/MacOS/Chromium from the top level directory of your Dart source code assuming you're using a Mac.

Next steps
I bet you want to try some of these cool tools out right?  Next we'll cover checking and building the Dart source.

What is Dart?

Well I'm glad you asked.  Dart is a new language currently in development by Google and made available to the community via an Open Source language.  You can read all about Dart at the Dart website or you can check out the actual source code itself at dart.googlecode.com

Dart is a browser based language. That is, it's designed to run in your browser like Javascript already does. Unlike Javascript however, Dart does not currently in in a browser. One day Dart may be added to browsers so it runs natively, but until that happens you need to find an alternate way to run Dart. Luckily the Dart developers have come up with a way to do just that by creating tools that converts Dart code to Javascript.

Goals of Dart
Dart was developed because of perceived issues with existing browser based languages. In reality there's really only one browser based language, so these perceived issues are really issues with Javascript.

• As applications get larger they get more difficult to maintain.  On top of maintaining the code, other problems such as testing become apparent.  Dart attempts to prevent this by allowing the developer to create well structured and maintainable code. In addition, because you can run Dart from the command line it's possible to write testing harnesses the can execute as part of your development process
• Like all mature languages, Javascript has grown up over time and can be seen to lack certain features or the features have to be implemented in a non-standard way. Dart takes inspiration from many languages and adds a number of useful features that developers will find useful.
• Dart is designed to be a very fast language with high performance 

Features of Dart
Dart has many new and interesting features, many of which exist in existing languages. Don't worry if you don't understand some of these terms, we'll get to those as we go.

Optional typing of variables
By default a variable can be of any type e.g. an integer, a string, a  float and so on.  If your variables are untyped you can have a variable that is a number, then change it to a string and there's no issues.  As your scripts become more complicated, this may be unwanted and even lead to bugs.  By typing your variables you're saying that your variable is a number and nothing else. This means that you can't inadvertently assign something else to it.

Interface and Class definitions
Classes are the cornerstone of any modern programming language. Dart provides not only a robust Class syntax but also provides Interfaces (a sort of super class) along with inheritance which allows you to extend existing classes

Libraries
As your code becomes more complex, you can split functional blocks in to multiple files.  This allows you to re-use features and helps with maintainability. You can also split your testing up so you test each set of functionality individually.

String Interpolation
This might seem simple but it can be incredibly useful as a time saver.  You can use your variables directly inside other strings.   You can even perform other actions such as applying methods directly within your string.

Concurrency and Isolates
By default, Dart in single threaded. however you can implement concurrency using a feature called isolates. Isolates have their own memory and run independentl and you can securely pass data in and out of a isolate.

Factories
Factories are a way to allow you so create a class "on the fly" by protecting you from the details of how to actually create the class. For example you may have to call two different classes that do two very different things but happen to share the same methods.  The problem becomes worse if you have to choose the right class based on some dynamic condition. You could instantiate each class yourself or you could simply have a factory you call with a parameters and the factory will instantiate the right class for you and pass you back the object. That way your program doesn't need to know which class it's using, it just nows it has a object it can now call methods on.

There's many more subtle features we'll get to along the way.