Discover Dart by Google

Discover Dart by Google

On Monday 17th February, the second session of Dart Flight School, organized by GDG Paris, was taking place at Google French headquarters in Paris and more recently a presentation of Dart was made at Devoxx during the Hand’s on Lab “The Dart side of disruption”. It was an opportunity to discover and try Google Dart language.

Introduced in 2011, with an SDK 1.0 released late 2013, Google presents Dart as a class-based optionally typed programming language for building high performance Web applications. Since 2011 the language has evolved and is sometimes described as a JavaScript alternative or potential successor as a Web standard. We are going to deal with languages that Dart offers, its environment, syntax, assets and promises but also why Google chose to build a new language for the Web.

What is Dart ?

Dart has been designed and developed by Google after many years of programming Web applications. Google created Dart first to simplify and structure complex Web applications development, especially making cross device and high performance apps. Dart is a Web programming language that comes with libraries and tools. It is both a client and server platform. With Dart, you are able to write client side code as well as server side. Dart has optional types, meaning you can continue to declare untyped variable using var or use static type like in Java or C#.

Moreover, Dart is open source : you can therefore find its source code on Google Code. In addition to “dart:core”, Dart has many others libraries in the official Dart API, for different needs for example “dart:math” for mathematical functions, “dart:html” for DOM manipulation, “dart:io” for command-line apps. There are also third party libraries, which can be downloaded at pub.dartlang.org. A central package manager called “pub” manages all libraries.

Why Dart ?

Dart targets different project sizes from the simple individual project to large projects in need of code structuration and high performance. Lot of JavaScript frameworks allow that but Dart promises a better productivity and better performances. For Google, JavaScript is still the solution for Web development. Google still takes part to the language specification and evolution.

JavaScript is flexible and supports incremental development. It is quite easy to develop and deploy small applications and its execution is platform independent. But building a large scale and well-performing applications is sometimes hard, especially with diverse developer backgrounds, lack of types is sometimes disturbing for non-JavaScript developers, there is no support for native libraries and there are too many third parties libraries and frameworks which do not facilitate the choice.

To address these needs, Google decided to create Dart. Dart main goals are:

  • Be familiar and natural to as many developers as possible;
  • Be structured and flexible;
  • Be adaptable to all kind of Web enabled devices;
  • Ensure backward compatibility with JavaScript;
  • Have tools to support all major browsers and facilitate development.

Here are a couple of reasons to use Dart according to Google :

  • Dart should make Web development easier, structured, scalable, coming with a set of tools for writing, compiling, executing, testing and more;
  • Dart is designed as a language that can be used client-side as well as server side without using other framework or language and is presumably faster.

Ultimately, we can suppose that Google wants Dart to replace JavaScript, even if they are contributing to both projects. First because, even if Dart has a cross compiler, it is faster when running directly in Dart virtual machine. Then the language syntax is meant to satisfy as many developers as possible with optional static types, classes and so on.

What does it look like ?

Dart language looks familiar to Java, C# but also JavaScript programmers. At first, Dart syntax seems familiar, especially for a Java/C# developer. Dart actually takes a lot from Java. It even runs inside a virtual machine like Java. It also takes some syntax style from JavaScript and also jQuery, especially for the DOM library.

Here is a simple class example:

abstract class Animal {
  String name = "";
  String color = "";
  //untyped parameter
  var gender= "";
  num age = 0;

  // constructor with 2 required and 2 optional parameters
  Animal(this.name,this.gender, {this.color, this.age});

  makeNoise();
}

class Cat extends Animal {
  Cat(String name,var gender, {String color, num age}) : super(name,gender, color : color, age : age);
  makeNoise() => print('Meow');
}

class Dog extends Animal {
  Dog(String name,var gender) : super(name,gender);
  makeNoise() => print('Woof');
}

void main() {
  Cat felix = new Cat('Felix','Male', age : 4);
  felix.makeNoise();

  Dog lassie = new Dog('Lassie', 'Female');
  lassie.age = 3;
  lassie.makeNoise();
}

and here an exemple of DOM manipulation:

import 'dart:html';

InputElement username = querySelector('#username');
HtmlElement paragraph = querySelector('#paragraph');
HtmlElement container = querySelector("#container");
HtmlElement link = new Element.tag("a");
ImageElement paloITLogo = new ImageElement(src: 'Palo-IT-logo.png');

void main() {
  paloITLogo.setAttribute("id", "paloITLogo");
  link.setAttribute("href", "http://www.palo-it.com");
  username..onChange.listen(update)
          ..onKeyDown.listen(update)
          ..onKeyUp.listen(update);
}

void update(Event e) {
  paragraph.text = "Hi "+ username.value;
  link.append(paloITLogo);
  container.append(link);
}
<html>
  <head>
    <meta charset="utf-8">
    <title>Dart DOM Example</title>
  </head>
  <body>
    <h1>Dart DOM Example</h1>
    <div id="container">
      <label for="username">Name : </label>
      <input id="username" type="text" placeholder="Your Name"></input>
      <p id="paragraph"></p>
    </div>

    <script type="application/dart" src="dartDomExample.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

dartDomExample

Dart Tools

Dart is also made to be fully tooled, not to be dependent of external tools. We have already seen some of the Dart tools :

  • Pub : Dart package manager;
  • Dartium : A special build of Chromium including Dart virtual machine;
  • Dart2js : Dart to JavaScript Compiler.

There is also:

  • Dartanalyzer : a static analyzer to check for errors and warnings
  • Docgen : a documentation generator

All these tools can be used, using command line, but Google also gives a full editor based on Eclipse, simply named Dart Editor, which uses all these tools and allow Dart code debugging and running.

How does it work ?

Dart code is directly excuted in Dartium, a virtual machine that is part of Chromium browser. Chromium is for now the only browser containing Dartium. Google hopes, with the growing interest on Dart and it’s usage, to make other browsers add Dartium support. For now, other browser can run apps built with Dart after converting Dart code to JavaScript. We’ve seen that the Dart project offers dart2js, a Dart-to-JavaScript Compiler.

Dart Editor uses dart2js to automatically compile Dart code to JavaScript. Dart2js produces a file that contains the JavaScript equivalent of your Dart code. It also produces a source map, to facilitate debugging the JavaScript version of your app. For now, only Chrome and Safari support source maps. Source maps are a way to map JavaScript code, even when minified, to the corresponding Dart source code. Generated when building your app, it keeps the information about the non-minified JavaScript and the correspondence in the Dart code.

Dart, when running in Dart virtual machine is quite fast. One of the keys is the Dart snapshotting system. A snapshot is a serialized version of the heap after initialization. Dart VM uses snapshotting to speed up application startup time, by keeping a complete snapshot of the entire Dart core library but also of the running application after the first startup. The startup can be up to 10 times faster (see performance benchmarks here).

howitworks

Conclusion

Google Dart is a new programming language and anything new takes time to get adopted. That is the most difficult phase for a language. The question is whether Google will have the tenacity and persuasion to make enough developer change their habits and move away from their existing JavaScript Code. Until now, JavaScript was the only language available for client-side scripting. During the last years, it has rapidly evolved and a lot of good frameworks use it. Now Dart has come to compete with JavaScript.

Google has good chance to force adoption. Google Chrome is a dominant browser and is now the default browser on Android device. Once Dart is available in its stable version and Google apps use it, it will probably make developers think about it. Google will encourage Microsoft and Mozilla to do the same. But getting Dart Virtual Machine integrated on all popular browers might take some time and if the dart2javascript compiler is good enough, Google will not even need their cooperation.

Google tries very hard to make Dart accepted by developers, developing useful tools, complete IDE, making the language as familiar as possible and guarantying backward compatibility with JavaScript. A lot of work has been done on Dart: the language spec, the Dart VM, the dart2javascript compiler, the IDE based on Eclipse, the integrated debugger but still a lot of work to compete with the popularity of JavaScript.

If you want to know more about Google Dart I suggest reading:

Websites:

Books:

  • Learning Dart  by Dzenan Ridjanovic and Ivo Balbaert (ISBN : 1849697422);
  • Dart for Hipsters by Chris Strom (ISBN : 1937785033).
Share
Selim SLIMANI HOUTI
Selim SLIMANI HOUTI

843

Comments

  1. interesting

Leave a Reply

Your email address will not be published. Required fields are marked *