If you are wondering what is dart ? It’s Google’s latest programming language which can be used for developing web, mobile and server applications. The original name dartlang or now just known as dart is finally hitting the blocks with web applications optimized for the Chrome browser. In the previous tutorial we learnt how to setup Intellij IDEA. In this tutorial we will learn how to write our very first program in DART and how to run it all in the very same IDE.
Intellj IDEA IDE is one of the best available IDE’s in the market, there is a Community edition as well as a Pro edition (pay-to-use). IntelliJ IDEA provides dart programming code completion, error and syntax highlighting and much more.
Create a new Dart project in Intellij IDEA
Head towards your Intellj IDEA install and start the IDE.
In the main interface
Click on File > New > Project...
to create a new project. Select Dart on the left side pane and click on Generate sample content (if not already), select a Bare-bones Web App. Click Next to continue.
Enter the project name as you like and the location where you would like to save it.
Click on Finish and the project will be loaded onto your IDE.
Core components of a Dart Web application
Alright so now you should be able to see the project structure as follows. (Note the project name would be the name you gave it initially).
As show above the pubspec.yaml file contains the project settings which includes the dependencies.
Click on the web folder in the Project View to see the contents within it and you will find the above shown files there.
As you may be aware a DART web project has a main function ( similar to C, C++ and Java) which is the first function to execute and contains the code which is injected at runtime into the index.html. This file is also created in the project by default by the IDE.
main.dart : The main core of your program
This is where you write your main code and the place most of your business logic will be located along with branches to other dart programs. Dart programs need to be compiled before they can be run.
You may see some import statements in the code which basically import any external libraries into the program and almost always will have the dart:html dependency which is the dart library.
Tip: Other libraries can be also be imported for e.g dart:async for asynchronous requests and dart:math for mathematical applications.
The main function is the first function to be executed in the program and works similarly to a java program.
querySelector('#output').text = "Your Dart app is running"
You are free to change the above contents to your requirements for the text you would like to show on your first dart web application.
This line just selects an HTML element on the index page in our case the id=”output” which will hold the text ‘Your dart app is running..’. Now lets have a look at index.html
index.html : The presentation layer
This is a regular HTML file which is used as the front-end of your application and is the file which gets loaded on to a browser when the user requests it. You can find the index.html file in the web folder which is the folder served up to web browsers.
The PUB tool : Dependency management of dart applications
PUB is a tool developed by google for dependency management in the dart programming environment.
Pubspec.yaml is the file which contains the dependencies (libraries) and settings that are specific to your project. These dependencies are downloaded and placed as precompiled before running your project.
So in essence the index.html loads the dart js which provides it with the main function code. Alright so in order to see this working lets perform the following steps.
Now in order to run our dart program we will need to create to first grab the dependencies listed in pubspec.yaml.
Right click on the file pubspec.yaml and select the option "PUB: Get dependencies"
In the console window you shall see a flurry of activity with the dependencies getting downloaded and precompiled.
As you can see several libraries are downloaded and precompiled for the program to run.
Dart applications and the Chrome browser
Dart applications can be run in the Chrome browser, for other browsers dart support is still evolving and soon most of them would be able to run the dart code directly.
Earlier Google provided the Dartium browser which could be used to run the dart applications but the requirements were to install the Dartium browser on the client side. This requirement has gone away with Chrome now supporting dart applications natively.
Run the Dart Web application in Chrome
In order to run a dart application Intellj IDEA uses the pub serve command or the now used :
The above command starts a small web server on http://localhost:port which serves the application HTML on Chrome browsers. the port is automatically assigned at runtime or manually assigned.
However, we do not need to run this command as Intellij IDE provides us with run capability right out of the box. So perform the following steps.
Right Click : index.html > Open in browser > Chrome
And that’s it ! Your first dart application should load on the Chrome browser and show you a line of text as below. You can now play around with it by adding new code and learning the basics of the language.
If you already know a front-end framework like Angular 2+ you can also try the official AngularDart language which is used for programming web applications.