Getting Started with Dart

Dart is an open source, scalable programming language, maintained by Google. It’s relatively easy-to-learn and can be used for building Web, server and mobile applications. It’s not only just a new programming language but also a powerful new platform for modern Web development.
Dart enforces a structured design for programs, which other client-side programming languages like JavaScript don’t do. Dart reduces most of the problematic issues with JavaScript such as the tendency towards sloppy, hard-to-maintain code.
JavaScript doesn’t come with features like class hierarchy and inheritance, which makes the programming of large projects difficult. Dart solves this issue. Native Dart is twice as fast as JavaScript and can also be compiled back to JavaScript for any modern browser to run. It comes with a huge collection of built-in libraries and a packaging system. Using Dart, you can quickly write prototypes that evolve rapidly, and you also have access to advanced tools, reliable libraries and good software engineering techniques.

Getting started
To get started with learning Dart, https://www.dartlang.org/ provides an interactive Dartboard, which lets us write and run Dart code in the browser itself. The website also offers the Dart Editor, a downloadable text editor which lets us create, modify and run Dart apps on local machines. An SDK, which includes various command line tools and the Dart VM, can also be downloaded.
If the browser doesn’t support an embedded Dart VM, you can use the built-in Dart-to-JavaScript compiler that comes with the Dart SDK to compile Dart code into JavaScript.
Dart is designed for mass adoption, so it has to have a familiar feel for both scripting language users (such as JavaScript users) and structured language users (such as Java developers).
Let’s now write a simple Dart program.
Don’t forget to go through the programming paradigms of Dart at https://www.dartlang.org/docs/dart-up-and-running/ch02.html#important-concepts.

Hello, Dart!
Let’s start writing a simple program in Dart by using the following commands. The syntax is very similar to any C based language.

//SimpleDart.dart
void main() {
print(“Hello, World!”);
}

One of the design goals of Dart is a simple and familiar syntax. 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. Second, rather than JavaScript being written just about anywhere you want, our Dart code lives within a main function. That provides consistency to the code.
Although the ‘Hello world’ script looks simple, Dart is technologically more advanced than JavaScript and since it aims to fix security and other problems of JavaScript, it definitely has an appeal.
Now let’s move on and write a more advanced Dart program.

Your first ‘real’ Dart program
The first thing you need to do is to set up the development environment for Dart, for which you have to install Dart Editor. It comes with the SDK and all the tools you need to get started. You can also configure any other IDE to support Dart by installing the required plugins.
We are going to keep this simple, but rather than using the command line, let’s say hello to the browser. Let’s create an HTML element that, when clicked, produces an alert with the text, ‘Hello, World!’
First, open Dart Editor and click on File -> New Application and name it SimpleDart. Make sure you select the command line application, and leave Generate sample content selected.
In your SimpleDart project, open the file called pubspec.yaml and select Source at the bottom of the editor. You need to add a dependency called browser. Here’s how it looks:

name: SimpleDart
description: A simple Dart program.
dependencies:
browser: any

Now, create an HTML file that you can use for your application’s display. Right click the bin directory in your Project navigator, and select New File. Name the file SimpleDart.html.
Once the file is created, you should see a very basic HTML file populated with some standard elements, as shown below:

<p id=”text”></p>
<script type=”application/dart” src=”SimpleDart.dart”></script>

The paragraph tag with the ID of the text gives you a placeholder, where you can put some text from your Dart code. Second, the script tag here is pointing to SimpleDart, and has a type of application/dart. This instructs the browser to load your Dart code and execute it from its Dart VM.
Now that you have an HTML page for your display, modify your SimpleDart.dart file to put some text in the paragraph tag. Before you can access the HTML though, import the appropriate library to give you HTML support, as follows:

//SimpleDart.dart
import ‘dart:html’;

Now create libraries that other applications can import. You are finally ready to write some code. Use a Dart method called query, which will search for an HTML element and allow you to modify it programmatically. Let’s search for #text, which will give you access to the paragraph tag we saw above. Within the main function, use the following command:

query(‘#text’).text = “Hey, Browser!”;

Go ahead and run this. You will notice that the Chromium browser opens up automatically, and shows you a blank page with the text, ‘Hey, Browser!’ printed on it.
To add a click-event, there are a couple of options. You could either query for the element again, store the element in a variable, or chain the commands.

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

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

void handleClick(MouseEvent event) {
print("Open Source For You.");
}

Rather than using a single dot (.), 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 been 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 ‘Hey, Browser!’ you should notice in your IDE’s console that the text, ‘Open Source For You’ 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.
Now let’s wrap up this application. Inside the handleClick event, create an alert dialogue box with the text, ‘Hello, World!’ by using the following code:

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

Run the application, click the text again, and you should see a pop-up dialogue box with the text, ‘Hello, World!’

Dart for servers
Apart from developing Web applications, Dart, like JavaScript, can also be used to code the servers. Dart VM server runs everywhere —from a Linux, Windows or a Mac prompt. It has been ported to i32, x64, ARM, ARM64, and MIPS. Asynchronous code is easy to write, with the new async/await/yield language features. Spawn an isolate to run Dart functions and libraries in an isolated heap, and take advantage of multiple CPU cores. Connect to your VM through your browser, and get real-time insights into your running app. You can also access files, UDP and TCP sockets, HTTP, WebSockets, and more. You can delve deep into https://dart-lang.github.io/server/codelab/ to learn more.

Dart for mobiles
The ability to write a Dart app for deployment on a variety of mobile devices is under development. Fletch, a Dart runtime that’s currently under development, aims to support app deployment on Android and iOS. Future versions of the Dart SDK will include Fletch.

What next?
What we’ve done here is developed a very simple Web application in Dart. There is a Dart Web UI library, which can be used to do templating and data binding to simplify our Dart code even further. If you are looking for a more in-depth coverage of the Dart language and want to see how to build a real application with Dart, check out https://www.dartlang.org/docs/tutorials/
To contribute to the Dart programming language or to stay updated on the latest Dart news, the official mailing list is at http://www.dartlang.org/mailing-list.