Accueil Nos publications Blog Dart – Getting Started

Web Front

15/01/2013 10 min

Dart – Getting Started

Dart, le nouveau langage orienté Web de Google, a été dévoilé au monde en octobre 2011. Il se veut un langage structuré, non pas révolutionnaire mais facile d’apprentissage pour tout développeur, quelque soit son background (C#, Java ou JavaScript) puisque Dart est un agrégat de ces trois langages avec d’autres, tel que Smalltalk. Ce nouveau langage a pour objectif d’être tout ce qu’aurait pu être JavaScript s’il avait été inventé aujourd’hui. En d’autres termes, garder la nature dynamique du JavaScript, tout en offrant un langage et des outils facilitant le développement de grosses applications.

Néanmoins, cet article n’a pas pour but de faire une comparaison entre Dart et JavaScript, ou Node.js qui a une démarche très proche. Je laisse à chacun faire les recherches nécessaires pour se forger sa propre opinion.

Cet article est le premier d’une série ayant pour objectif de présenter Dart et ses différentes utilisations en détail. Les articles actuellement en cours de préparation, qui seront publiés très prochainement sur notre blog ont pour sujet «Dart – Le langage» :

Dart – Le Langage – Types et Opérateurs
Dart – Le Langage – Fonctions
Dart – Le Langage – Classes
Dart – Le Langage – Futures

Note importante : Dart étant encore en version béta, il est possible qu’il y ait des différences entre les fonctionnalités décrites dans cet article et les fonctionnalités proposées dans la version finale.

Acteur de la révolution ?

Dart étant encore jeune – la version 1 n’étant pas encore disponible -, il est difficile de dire s’il participera à la nouvelle révolution du Web. Cependant, nous pouvons applaudir la démarche de Google nous offrant une solution aux différentes problématiques du développement Web, notamment pour ceux à qui Javascript donne des boutons mais pas uniquement.

Dart s’inscrit dans une mouvance de nouveaux paradigmes Web tels que JavaScript MVC, TypeScript, CoffeeScript ou encore Node.js. qui ont tous pour objectif de simplifier les développements.

Il est important de noter qu’avec Dart, Google n’a pas l’intention de casser le web puisque l’un des pré-requis de Dart est d’être compilable en JavaScript, pour être utilisé dans tout navigateur Moderne (IE 6/7/8 étant donc exclus) n’ayant pas de Machine Virtuelle Dart.

Principales caractéristiques du langage

Dart en quelques mots :

Dart est un langage orienté objet avec un héritage simple, des classes concrètres et abstraites, des interfaces et très prochaînement des mixins.
Dart est optionnellement typé que ce soit dans l’assignation d’une variable ou la définition d’une fonction.
Dart est gouverné par des fonctions de haut niveau, c’est à dire des fonctions non encapsulées dans une classe ou un objet. Des fonctions encapsulées dans une classe ou un objet sont aussi appelées méthodes.
Toute application a au moins une fonction de haut niveau, la fonction main().
Dart permet d’utiliser des Generics.
Dart est par défaut mono processus à l’instar de JavaScript. Néanmoins, il a un modèle de concurrence appelé « isolates », permettant une exécution parallèle avec un système de passage de messages.

Différences majeures avec JavaScript :

Dart n’utilise pas de prototypes.
Dart ne permet pas de créer et d’exécuter du code à la volée. Il n’y a ni de fonction eval(), ni de possibilité de « monkey patching ». Seuls les isolates permettent d’exécuter du code dynamiquement dans ce que j’appelerai une architecture orientée plugins.

L’écosystème

Dart n’est pas seulement un langage, c’est une plateforme de développement qui comprend :

un SDK avec une VM serveur
un IDE (DartEditor), mais aussi des plugins pour Eclipse et IntelliJ
une VM cliente (Dartium)
un outil de gestion des dépendances (Pub Package Manager)
un compilateur Dart vers JavaScript (dart2js)
un générateur de documentation à partir du code (dartdoc)

Dart Editor

Bien qu’il soit possible d’utiliser un simple éditeur de texte pour écrire du code Dart, utiliser un IDE est assez pratique. Dart Editor est basé sur Eclipse Rich Client Platform (RCP), un framework permettant de créer facilement des IDE. Par conséquent, son aspect est très similaire à Eclipse. En revanche, ne vous attendez pas aux mêmes fonctionnalités qui se limitent à une auto-complétion (sommaire), une analyse de code statique montrant erreurs et warnings, et une navigation facilitée entre les fichiers, classes, méthodes, etc.

Il est bien sûr possible d’exécuter le code avec ou sans debug, ou bien de le convertir en Javascript.

A l’heure où j’écris ces lignes, Dart Editor est loin d’être parfait, mais il s’améliore de version en version.

Les Machines Virtuelles

Les Machines Virtuelles Dart sont le cœur du langage. Il en possède deux pour des usages différents. La première (VM Serveur) permet d’exécuter une application côté serveur en ligne de commande dans une console. La seconde (VM Client) est embarquée dans un navigateur tel que Dartium, comme nous le verrons dans le point suivant, au même titre que la Machine Virtuelle JavaScript. Ceci permet d’avoir la partie cliente et la partie serveur d’une application codées dans le même langage.

L’unique différence entre ces deux versions est leurs librairies. La VM Serveur contient la library dart:io, qui permet d’effectuer les opérations d’entrée/sortie habituelles (manipulation de fichiers, sockets, etc.). La VM Cliente contient la library dart:html, permettant de manipuler le DOM (tags, events, etc.).

Cette distinction est nécessaire pour des raisons de sécurité évidentes concernant la library dart:io. En revanche, bien que compréhensible, l’absence de la library dart:html de la VM Serveur rend compliqué, – mais pas impossible -, l’exécution en ligne de commande de tests unitaires validant du code utilisant cette library.

Pour exécuter des tests unitaires de classes utilisant la library dart:html, il faut utiliser Dartium, ce qui est déconcertant, voire un problème pour l’industrialisation.

Dartium

Dartium est une version modifiée de Chomium (la version Open Source de Chrome), avec une Machine Virtuelle Dart embarquée.

Il reconnaît la balise <script type=”application/dart” …> et exécute le code Dart dans le navigateur sans avoir à le convertir en JavaScript.

Associé à Dart Editor, il permet de débugger simplement. Il vous suffit d’ajouter un breakpoint dans l’éditeur, rafraîchir votre page dans le navigateur, et le débugger de l’éditeur s’arrêtera au breakpoint lorsqu’il l’aura atteint, vous permettant d’inspecter les variables et d’avancer step par step sur les instructions qui vous intéressent.

dart2js

dart2js permet de compiler du Dart en JavaScript, depuis Dart Editor ou en ligne de commande.

dart2js compile toutes les sources de votre application, ainsi que les librairies utilisées, en un seul fichier JavaScript.

Par défaut, le code n’est pas minifié. Pour ce faire, il suffit d’ajouter l’option –minify.

A noter qu’avant compilation, après construction de l’Abstract Syntax Tree du code, toutes les branches non utilisées (code mort ou fonctionnalités d’une librairie non utilisées dans notre application) sont « élaguées » ce qui permet de réduire considérablement le code généré. Ce mécanisme est connu sous le nom Tree Shaking.

pub

La gestion de dépendances (librairies) est une fonctionnalité indispensable pour tout langage, de Java à Maven, .NET à NuGet et Node.js à npm. Dart a donc appelé le sien pub. Dans un fichier pubspec.yaml, sont indiquées différentes informations sur l’application, mais aussi les librairies utilisées, ainsi que leur version.


name: pacifista_rocks
description: The best application in the whole world
version: 0.0.1
dependencies:
  great_lib: any

A l’aide de pub, il est aussi possible de publier son code sur GitHub, BitBucket ou pub.dartlang.org.

Note importante : sous Windows XP pub ne fonctionne pas très bien.

dartdoc

dartdoc permet de générer une documentation au format HTML à partir des commentaires présents dans le code.

Un commentaire de type doc est identifié par un triple slash (///).

Exemple :


        /// This is a Dart doc
        void main() {
          print("Dart");
        }

La documentation générée aura la même forme que celle de la documentation de l’ API Dart.

Premières applications

Dans un premier temps, je vous conseille d’utiliser le package « Dart Editor », contenant tout ce dont nous avons besoin pour les applications présentées dans cet article. Avec un peu plus de pratique, vous pourrez n’utiliser que la SDK et Dartium, voire utiliser les plugins Dart pour Eclipse ou IntelliJ.

Notes:

Pour utiliser Dart Editor, il est nécessaire d’avoir une JRE installée.
Le répertoire de Dart Editor est créé dans le répertoire suivant : <user_home>/DartEditor. Si vous ne souhaitez pas qu’il soit créé à cet endroit, il faut modifier la ligne @user.home\DartEditor du fichier DartEditor.ini. Mais attention, le répertoire de Dart Editor ne peut être dans le même répertoire que votre workspace.

Au premier lancement de Dart Editor, vous devriez voir quelque chose ressemblant à l’écran suivant :

Comme déjà évoqué, il est possible de créer deux types d’applications Dart : des applications en ligne de commande (serveur) et des applications web (cliente).

Création d’une application serveur

Pour créer une application : File -> New Application ou dans la fenêtre Files , clique droit -> New Application .

Application Name : Nom de l’application (doit commencer par une lettre ASCII, les caractères underscore ‘_’ ou dollar ‘$’, puis des lettres ASCII, des chiffres ou les caractères underscore ‘_’ ou dollar ‘$’. Comme par exemple, helloworld, $hello_world1, _hello$world2, etc.).

Parent Directory : Répertoire contenant la nouvelle application

Generate content for a basic web app : Génére deux fichiers supplémentaires (.css et .html). Cette ligne doit être décochée.

Add Pub support : Génère un fichier pubspec.yaml (Décochée).

Après avoir cliqué sur Finish, la nouvelle application apparaît dans la fenêtre Files avec un fichier pourtant le même nom et se terminant par .dart .

Le code généré est extrêmement simple :


    void main() {
      print("Hello, World!");
    }

Au minimum, une application Dart a un fichier .dart avec une fonction main(), qui est généralement présente dans le fichier portant le nom de l’application, mais ce n’est pas une obligation.

Comme de nombreux langages, la fonction main() est le point d’entrée d’une application Dart. Elle ne retourne rien (void) et ne prend aucun paramètre.

La fonction print() affiche du texte dans la console. Elle appartient à la librairie dart:core importée implicitement par la Dart VM.

Pour lancer l’application, sélectionnez le fichier .dart et faites Ctrl-R, ou clique droit sur le fichier et Run.

La Machine Virtuelle Dart exécute le code Dart sans compilation intermédiaire contrairement à d’autres langages (Why Not a Bytecode VM?).

Dans la console, nous voyons tout d’abord la commande utilisée pour exécuter l’application, et ensuite le message issu de la fonction print().


    dart --enable-checked-mode helloworld.dart

    Hello, World!

L’option « checked-mode » contrôle le type des variables et active les assertions.

Bien que la fonction main() ne prenne pas de paramètres, il est possible d’en fournir au démarrage de l’application.

Avec Dart Editor, nous pouvons passer des paramètres à notre application de la manière suivante :

choisir « Manage Launches… »

puis dans « Script arguments », ajoutez les paramètres que vous souhaitez fournir à votre application :

A noter que dans cet écran, vous pouvez désactiver le « checked mode ».

Pour finir cliquez sur Run.

Comme vous pouvez le constater, les paramètres ont été ajoutés à la suite du nom du fichier de notre application :


    dart --enable-checked-mode helloworld.dart Foo Bar

Il nous faut à présent les récupérer. Pour se faire, nous avons à notre disposition l’objet dart:core#Options :


    void main() {
      Options options = new Options();
      List<String> args = options.arguments;
      String firstArg = args[0];
      print("Hello, $firstArg ${args[0]} ${options.arguments[1]}!");
    }

La ligne 5 montre comment insérer des variables dans une chaîne de caractères en utilisant le symbole dollar ($), et des accolades pour les collections et membres d’objets (de type collection ou non).

Création d’une application cliente

La raison première d’exister de Dart est de pouvoir créer facilement des applications web de type « page unique » (single-page web app). Cela signifie qu’une page html sera chargée dans le navigateur, avec plusieurs scripts Dart ou un seul script JavaScript formant notre application. La partie serveur devenant principalement un fournisseur de données.

Pour créer une application cliente (web), il suffit de procéder comme précédemment et de cocher Generate content for a basic web app . Trois fichiers portant le nom de l’application sont créés : un fichier .css , un fichier .html et un fichier .dart .

Le fichier .css étant une feuille de style standard, je ne m’attarderai pas dessus. Concernant le fichier .html , seules les deux lignes de fin du body méritent que l’on s’y intéresse.

Fichier *.html

Le fichier *.html est le point d’entrée de notre application.

La ligne suivante indique à la VM Dart dans quel fichier se trouve la fonction main() (j’ai appelé mon application « helloweb ») :


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

Nous avons ensuite un script JavaScript :


    <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>

Dans le cas où le navigateur utilisé n’a pas de VM Dart, le script dart.js remplace la première ligne par :


    <script src="helloweb.dart.js"></script>

Breaking change : Le fichier dart.js va être supprimé du repository SVN. Il est dès à présent disponible dans une library. Pour l’ajouter, il est nécessaire de créer un fichier pubspec.yaml à la racine de votre projet :


name:  helloweb
description:  A sample application
dependencies:
  browser: any

et remplacer dans le fichier *.html :


    <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>

par :


<script src="packages/browser/dart.js"></script>

Fichier *.dart

Le fichier .dart est, quant à lui, beaucoup plus intéressant puisqu’il contient le code Dart.


    import 'dart:html';

    void main() {
      query("#text")
      ..text = "Click me!"
      ..on.click.add(reverseText);
    }

    void reverseText(Event event) {
      var text = query("#text").text;
      var buffer = new StringBuffer();
      for (int i = text.length - 1; i >= 0; i--) {
        buffer.add(text[i]);
      }
      query("#text").text = buffer.toString();
    }

#1 : Importe la library dart:html permettant de manipuler le DOM.

#4 : La fonction query() appartient à la library dart:html . Il s’appuie sur les sélecteurs CSS tout comme le fait la fonction $() de jQuery, ce qui permet dans le cas présent de récupérer l’élément portant l’id « text ».

#5/6 : La notation « .. » est une « syntactic sugar » permettant de simplifier l’écriture.

Les lignes 4 à 6 auraient pu être écrites de la manière suivante :


    var element = query("#text"); //ou Element element = query("#text");
    element.text = "Click me!";
    element.on.click.add(reverseText);

#6 : Ajoute un listener à l’événement DOM « onclick », sous la forme d’un callback (fonction exécutée au fire de l’événement).

A noter que prochainement l’ajout d’un listener s’effectuera de la manière suivante :


element.onClick.listen((e) {
});

Quant à elle, la fonction reverseText() est sans surprise. Elle récupère le texte de l’élément ayant l’id « text », inverse toutes les lettres et remplace le mot de l’élément « text ».

Pour résumer, un clic sur le texte inverse les lettres et affiche le nouveau texte.

Aller plus loin

Si cet article vous a plu et souhaitez en savoir plus sur Dart, n’oubliez pas que la suite sera disponible sous peu…

En attendant vous pouvez consulter les sites des communautés Dart FR et US.

DartLangFR

La communauté Dart française est actuellement au stade embryonaire et ne demande qu’à avoir plus d’adeptes. DartLangFR se réunit généralement tous les premiers mercredi du mois.

Pour toute question n’hésitez pas à poster sur la mailing-list, nous nous ferons un plaisir de vous répondre.

DartLang

Pour suivre au jour le jour les évolutions du langage ou si vous avez des propositions d’évolutions, de nombreuses sources sont à votre disposition.

Site officiel : www.dartlang.org
Mailing-list : dartlang
Google+ : Dart
Google+ : Dartisans
Twitter : @dart_lang
Blog : blog.dartwatch.com (maintenu par Chris Buckett auteur du livre Dart in Action)
Newsletter : Dart weekly