Welcome to Part 1 of my Programming with Dart tutorial. In this series I will help you get started writing Dart code by teaching you the fundamentals of the language, and give you a little background on it as well. So, without further ado, let's get started.

What's Dart

Dart is a programming language actively developed by Google, and is intended to ultimately replace JavaScript. I think the Dart developers explain it best:

Dart is a class-based, object-oriented language with lexical scoping, closures, and optional static typing. Dart helps you build structured modern web apps and is easy to learn for a wide range of developers.

Think JavaScript with a little less Script, and a little more Java (I know JavaScript has nothing to do with Java, just go with it, OK?). Once you have written your code in Dart, you have one of two options. You can either compile it into JavaScript, or execute it as Dart code and run it in a Dart VM. Dart code is intended to be much faster and more efficient than JavaScript, but more browsers understand JavaScript than Dart at the moment, so you lose reach. At the time of writing this only Chromium supports native Dart code, and no other major browsers (not even Blink) have plans to adopt Dart.

Whether or not Dart succeeds in it's goal of replacing JavaScript remains to be seen, but in the meantime it remains a very intriguing language to learn, if for nothing but curiosity's sake.

For a more in-depth and technical look into Dart, I highly recommend taking a tour of Dart.

Let's Get Started:

The first thing we need to do is set up our development environment:

1. First up: Download the Dart Editor, and unzip it to a location of your choosing. I picked ~/dev/dart, so the rest of this tutorial (and subsequent tutorials) will assume you did as well.

2. You're done. Seriously, that's it. Dart Editor comes with the SDK and all of the tools you need to get started. Easy enough, huh?

For more information on setting up your Dart environment, or for using Dart with another IDE, click here.

No matter which development environment you choose, once you are ready to get coding, we can start with a simple Hello World program.

Hello, Dart!

Open up you're new Dart Editor and let's get started.

For the purposes of this tutorial we are going to create two simple Hello World applications. The first will run in the command line, and the second will run in the Chromium browser that we downloaded as a part of the Dart development environment (~/dev/dart/chromium).

Command-Line

1. Click File -> New Application and name it HelloDart. Make sure you select Command-line application, and leave Generate sample content selected.

2. Once the application is created, the Hello World sample will be ready for us. It's really quite basic, and contains only a main function and a print statement.

   //hellodart.dart
   void main() {
     print("Hello, World!");
   }
   

3. Click Run (the green circle with a white arrow, top left of the IDE window) and you should see the classic Hello, World! printed in the console at the bottom of your IDE.

This application may be very basic, but it gives us some information about how Dart is written. First off, we can see that it uses a C-style syntax. Secondly, rather than JavaScript being written just about anywhere you want, our Dart code lives within a main function. If we take it out of the main function, it won't run. Go ahead and try it.

Browser

Now lets get to something a little bit more exciting, shall we. We are still going to keep this simple, but rather than printing to the command-line, let's say hello to the browser. We will create an HTML element that, when clicked, produces an alert with the text Hello, World!

1. In your HelloDart project, open the file called pubspec.yaml and select source at the bottom of the editor. We need to add a dependency called browser, like so:

   name: HelloDart
   description: A sample command-line application
   dependencies:
     browser: any
   

2. Next up we need to create an HTML file that we can use for our application's display. Right-click the bin directory in your project navigator, and select New File. Name the file hellodart.html.

   Once the file is created, you should see a very basic HTML file populated with some standard elements. However, there are two elements in particular that are of interest to us:

   <p id="text"></p>
   <script type="application/dart" src="hellodart.dart"></script>
   

   First, the paragraph tag with the id of text gives us a placeholder where we can put some text from our Dart code. Secondly, the script tag here is pointing to hellodart.dart, and has a type of application/dart. This instructs the browser to load our Dart code and execute it from it's Dart VM. As I mentioned earlier, only Chromium is capable of running Dart code, so we know that's the browser we will have to run our code in.

3. Now that we have an HTML page for our display, we can modify our hellodart.dart file to put some text in the paragraph tag. Before we can access the HTML though, we need to import the appropriate library to give us HTML support:

   //hellodart.dart
   import 'dart:html';
   

   Pretty standard import statement right? Well, we have learned that we can create libraries that other applications can import. I'd say that's pretty neat.

4. Okay, now we are finally ready to write some code. We are going to use a Dart method called query which will search for an HTML element for us, and allow us to modify it programmatically. Let's search for #text, which will give us access the to paragraph tag we saw above. Within the main function:

query('#text').text = "Greetings!";

Go ahead and run this. You will notice that the Chromium browser opens up automatically, and shows us a blank page with the text Greetings! printed. This is all well and good, but lets add that click-event we talked about.

5. To add the click-event, we have a couple of options. We could either query for the element again, store the element in a variable, or chain the commands. Let's take a look at how Dart handles chaining:

//hellodart.dart
import 'dart:html';

void main() {
  query('#text')
    ..text = "Greetings!"
    ..onClick.listen(handleClick);
}

void handleClick(MouseEvent event) {
  print("//TODO");
}

Rather than using a single dot (.), we use two dots (..) to indicate that the commands are going to be chained. Only after the final command do we enter a semi-colon to indicate that the chain has completed.

You will also notice that we have defined a new method that accepts a MouseEvent parameter. When the #text element is clicked, it will invoke handleClick and pass with it the click event that caused it.

Go ahead and run this, and when you click on the Greetings! text, you should notice in your IDE's console that the text //TODO has been printed. It's good to know that even in web application mode we can still log to the command-line. This will be great for debugging applications down the line.

6. Now let's wrap up this application. Inside the handleClick event, we are going to create an alert dialog with the text Hello, World!

   void handleClick(MouseEvent event) {
     window.alert("Hello, World!");
   }
   

   Run the application, click the text again, and you should see a big ol' popup dialog with the text Hello, World!

Conclusion

Well, there you have it: a command-line and web based Hello World tutorial for Dart. Play around with the code, and see what you can come up with. I will be posting a second part to this tutorial shortly which goes into more depth on Dart, and where we will create a more advanced web application.

Update: Part 2 is now available