Android is a trademark of Google Inc. Use of this trademark is subject to Google Permissions.

So I recently found out about this new programming language that Google created called Dart. It’s expected to be the next best thing after JavaScript. I decided to learn the language. And seeing as it’s a new language, not many people might be knowing about it. So I decided to make a tutorial. I figured you all can learn along with me. Well, enjoy.

What is Dart?

In October, 2011, Google introduced its Dart programming language to developers. Dart is Google’s solution to the problems inherint in the JavaScript scripting language, with an obstensive goal that said to be to “ultimately to replace JavaScript as the lingua franca of web development on the open web platform.”

Key Features of Dart

The Dart language, like any programming language, has certain key features that make it useful for particular applications. Among Dart’s features are:

• Classes – Dart’s clases and interfaces give developers what they need to effectively understand how to define APIs, and the constructs allow the encapsulation and reuse of data and methods.
• Optional Types – Unlike JavaScript, Dart allows developers to optionally add static types to the applications. Dart is very extensible, enabling the migration of an app from just a basic, untyped prototype to an extremely complex, modular app using types, which state the intent of the programmer using less documentation than JavaScript typically requires.
• Libraries – The libraries used by Dart will not change during runtime–it’s something that’s guaranteed inherintly by the language. Pieces of Dart code that are independently developed are thus able to rely upon those shared libraries.
• Tooling – Although the Dart language is still in its infancy and tools are still limited, Dart will include an extensive set of execution environments, libraries and tools that are designed exclusively for the language. One rumor is that Google will be providing a full-fledge Dart integrated development environment (IDE) which will include the ability to create and test Dart applications on-the-fly.

Instead of requiring browser makers to add Dart functionality into their browsers, Google has created Dart so that it compiles the Dart code into ECMAScript 3 (aka JavaScript) so that non-Dart compatible browsers (i.e. any brother other than Chrome) can still utilize the Dart code.

Dart will use a new script MIME type, “application/dart,” and can be included within a web page using a #import or #source statement to reference external files. It will look like this:


<script type="application/dart">
...
</script>


Alright, in order to create dart applications, you first need to download and install the Dart Editor. You can download the Dart Editor from the following link:

Click here to Download Dart

You have the choice between the 32bit and 64bit versions. You may choose the appropriate one based on your system’s architecture.

Next, we move on to installation. Installation is just a word here. There isn’t any installation to do really. All you’ve gotta do is copy the whole Dart Editor folder to any directory of your choice and start the program. However, you might need to download a Java Runtime Environment or Java Development Kit in order to be able to run the Dart Editor. You may download a JRE or JDK
from the following link:

Click here to Download 

If everything goes right, you’ve successfully “installed” the Dart Editor and should now be able to run it.

Next step, creating an application with the Dart Editor.

Creating your own Dart app:

Now you’re going to create your first Dart App. Run the Dart Editor application.

Step 1: Click File > New Application.

Step 2: Enter a name of your choice. This will be your Application Name. Select or enter the directory you wish to store the app in. This will be the location where your app will be stored. Uncheck the two check boxes below named ‘Generate content for a basic web app‘ and ‘Add pub support‘. Click Finish.

You have successfully created your first Dart App. A default Dart file appears in the Edit view, and its directory appears in the Files view. Your Dart Editor window should look something like this:

Step 3: Run the app. You may do so by clicking the Run button in the Toolstrip, or by clicking Run in the Menustrip and selecting Run. For command-line apps, the output of print() appears at the bottom right, in a new tab next to the Problems tab.

You have successfully created and run your first Dart app. Congrats.

Running a sample app:

The Dart Editor bundle comes with several samples. In this step, you’ll open a sample web app and run it in Dartium.

Step 1: Click the Welcome tab. Or choose Welcome Page from the Tools menu.

Step 2: In the Welcome tab, click the image labeled Sunflower.

Step 3: The Editor view now displays the contents of sunflower.dart, and the Files view lists the files in the Sunflower app’s directory. Dart Editor should look something like this:

Step 4: Click the Run button. Dart Editor launches Dartium, which displays sunflower.html.

Warning: Dartium is a technical preview, and it might have security and stability issues. Do not use Dartium as your primary browser!

In order for the app to work properly, you must be connected to the internet because the JavaScript file is located on the internet. In Dartium, move the slider left to right to see changes in the image.

Congratulations, you now know the basics of Dart and the Dart Editor.

In the next tutorial, we will learn how further about how to use Dart and the Dart Editor.

Part 2 COMING SOON!!!

You may also like::