Blog Zenika

#CodeTheWorld

Web

Dart, un langage moderne pour le web

Dart est un langage de programmation Open Source, lancé en octobre 2011 par Google. Contrairement à d’autres langages qui ont pu apparaître ces derniers temps, Dart n’a pas comme cible principale le développement serveur mais vise bel et bien à concurrencer Javascript dans nos navigateurs.

Tout d’abord, de quoi est composé Dart ? D’une spécification du langage, de librairies dont notamment dart:html pour manipuler le dom, dart:json pour interagir avec des objets json, dart:math, etc. Dart c’est aussi une machine virtuelle standalone pour s’exécuter en dehors d’un navigateur, un éditeur, basé sur l’IDE Eclipse, une version du navigateur chromium embarquant une vm dart, surnommé Dartium, et enfin un compilateur Dart vers Javascript.
Dart fournit une VM standalone, afin de permettre de développer non seulement des applications tournant dans un navigateur mais des applications s’exécutant sur le serveur. On pourrait ainsi imaginer développer des applications entières dans un seul langage, ce qui est généralement apprécié par les développeurs (c.f. GWT).
Attention, Dart est encore une “technology preview”, il est donc susceptible de changer. Cependant, sa sortie précoce devrait permettre de recueillir le maximum de feedbacks de la communauté.

Les objectifs de Google avec Dart

Le premier objectif visé est de fournir des applications webs modernes (offline, html5…) sur l’ensemble des plateformes existantes (desktop, laptop, smartphones, tablettes…). Pour cibler toutes ces plateformes, Dart fournit un compilateur Dart vers Javascript, afin d’être compatible avec tous les navigateurs du marché, même ceux n’intégrant pas de VM Dart.
Le développement web prend une place de plus en plus importante, les navigateurs sont de plus en plus en puissants et rapides et l’intégration à l’OS s’améliore (GPU, accès aux fonctionnalités natives…). La multiplication des smartphones incite également les développeurs d’applications mobiles à envisager le web, notamment pour réduire les coûts de développement de multiples applications natives.
Partant de ce constat, Google considère donc que le développement web devrait être facilité, en s’appuyant notamment ici sur les faiblesses de Javascript. Dart vise à mieux structurer les programmes, permettre un meilleur outillage (ide, debug…), ainsi que faciliter le partage de code entre différents frameworks. Dart se veut un langage simple, facilement accessible à des développeurs de tous horizons, et arrive donc comme une alternative pour le développement web actuel, une option supplémentaire pour les développeurs.

Le langage Dart

Dart est un langage orienté objet, à base de classes, avec héritage simple, interfaces, génériques et permettant l’écriture de closures . Le typage est statique mais optionnel. Dart est mono-thread mais fournit un modèle de programmation pour gérer la concurrence, les Isolate. Voilà pour les lecteurs pressés.
Pour les autres, je vais tout d’abord vous parler du typage dans Dart, qui peut surprendre au début, un typage optionnel, et nous développerons ensuite certaines fonctionnalités du langage.

Le typage optionnel

Avec Dart, vous pouvez écrire une application entière sans jamais définir un seul type pour vos variables. Au contraire, vous pouvez tout typer si vous le souhaitez. Le typage porte donc bien son nom, “optionnel”. Ce qu’il faut bien avoir à l’esprit est que les types ne seront jamais vérifiés au runtime. il ne servent donc que pour la documentation, rendre le code plus facile à comprendre pour les développeurs, mais surtout pour les outils de développement, avoir des feedbacks d’erreur et de warning beaucoup plus rapides. Vos IDE pourront prendre en compte les types et vous afficher des messages explicites sans attendre la phase d’exécution. Pourquoi Google a-t-il fait ce choix original pour le typage ? Pour permettre une adoption massive par le plus grand nombre de développeurs, qu’ils soient habitués au typage statique ou au typage dynamique, Dart leur paraîtra familier.
Pour l’exemple, les deux méthodes suivantes sont strictement équivalentes.

multiply(x, factor) {
  return x * factor;
}
multiply(num x, num factor) {
  return x * factor;
}

Et maintenant un peu de code afin de présenter certaines des fonctionnalités intéressantes de Dart.
Note : La plupart des exemples qui suivent sont extraits de http://www.dartlang.org/docs/language-tour/

Codons !

Les constructeurs nommés

Tout d’abord, prenons une classe Point classique avec un seul constructeur

class Point {
  num x, y;
  // Syntactic sugar for this.x = x and this.y = y
  Point(this.x, this.y);
}

Notez la façon d’assigner les paramètres du constructeur aux variables d’instance.
Dart permet de rajouter des constructeurs nommés. Ainsi vous pouvez avoir deux constructeurs avec la même signature mais différenciés par leur nom. Cela permet également de documenter chaque constructeur sur son utilisation.

class Point {
  num x, y;
  // Named constructor
  Point.fromJson(Map json) : x = json['x'], y = json['y'];
  Point(this.x, this.y);
}

Dans cet exemple, on ajoute un constructeur nommé fromJson qui comme son nom l’indique va construire un point à partir d’une source Json, ici un objet Map. Et voici le code permettant d’appeler ce constructeur.

var jsonData = JSON.parse('{"x":1, "y":2}');
var point = new Point.fromJson(jsonData);
Les parametres optionnels

Chaque constructeur et chaque méthode peuvent posséder un ou plusieurs paramètres dit optionnels. Les paramètres entre [ ] sont optionnels.
dans l’exemple suivant, la méthode myMethod comporte deux paramètres obligatoires et un paramètre optionnel. On peut voir dans le main les différentes manières d’appeler cette méthode. Dans le cas où une méthode comporte plusieurs paramètres optionnels, il est possible de nommer explicitement les paramètres que l’on souhaite passer lors de l’appel, comme dans le troisième exemple de la méthode main.

String myMethod(String param1, String param2, [String optionalParam]) {
  var result = "$param1:$param2";
  if (optionalParam != null) {
    result = "$result:$optionalParam";
  }
  print(result);
}
main(){
  myMethod("a", "b");                                 //prints a:b
  myMethod("a", "b", "c");                            //prints a:b:c
  myMethod("a", "b", optionalParam : "c");            //prints a:b:c
}
Les closures

Tout comme en Javascript, avec Dart, une fonction est un objet. Il est donc possible de stocker une fonction dans une variable, de passer une fonction en paramètre d’une autre fonction… Voici un exemple classique d’utilisation des closures, qui nous permet également de voir la méthode forEach sur l’objet List. La méthode forEach prend en paramètre une fonction qui sera appliquée à chaque élément de la liste.

list.forEach((element) => print(element));
String interpolation

Il est possible avec Dart de définir des valeurs directement à l’intérieur d’une chaîne de caractères à l’aide du symbole $, ce qui s’avère vraiment très pratique à l’usage. Dans les changements en vue de la milestone 1 de Dart, l’opérateur + sur les String a été enlevé (donc plus possible de faire var s = "Hello "+"Julien". Pour faire cela, il faut soit passer par l’interpolation quand nos String sont des variables, soit utiliser la concaténation adjacente). Rien de mieux qu’un exemple :

var name = "Julien";
print('Hello ''Julien'' !!');  // prints : Hello Julien !!
print("Hello $name"); // prints : Hello Julien
print("Hello ${name.toUpperCase()}"); // prints : Hello JULIEN

Attention, la concaténation de String adjacente ne fonctionne pas sur try.dartlang.org mais fonctionne correctement dans l’éditeur
Voici donc un panel minimal des fonctionnalités de Dart. Pour un aperçu beaucoup plus complet du langage, je vous invite à regarder A Tour of the Dart Language.

Les librairies

Dart fournit un ensemble de librairies complémentaires, l’ensemble des fonctionnalités est documentée dans A Tour of the Dart Librairies. Je vais simplement présenter les plus importantes dans cette section

dart:core

Dart Core contient l’ensemble des classes et utilitaires de base pour la gestion des collections, des dates, des chaines de caractères, des nombres… cette librairie est importée par défaut dans chaque application Dart.

dart:html

La librairie html permet la manipulation du DOM. Par exemple, la recherche d’éléments du DOM de façon simplifiée (semblable à JQuery)

#import('dart:html');
var elem1 = query('#id');               // Find an element by id.
var elem2 = query('.class');            // Find an element by class.
var elems1 = queryAll('div');           // Find all elements by tag.
var elems2 = queryAll('[data-role="button"]'); // Find button widgets.

Il est bien évidemment possible de faire toutes les manipulations de DOM classiques : créer des éléments, ajouter des noeuds à des éléments, etc… L’exemple suivant montre la façon de gérer les évènements sur un élément html, ici, nous ajoutons un handler sur un click de myButton

myButton.on.click.add((e) {
  // When the button is clicked, it runs this code.
  submitData();
});

ou de façon plus concise

myButton.on.click.add((e) => submitData());
dart:isolate

Les Isolate sont une partie importante de Dart. Il s’agit du modèle pour la programmation concurrente (Pour les interessés, ce modèle est inspiré d’Erlang). Tout code Dart est exécuté au sein d’un Isolate. Il est donc possible de créer d’autres Isolate, pour gérer la concurrence ou tout simplement pour exécuter du code d’une librairie tierce. Une chose importante à retenir, les Isolate ne partagent aucun état, aucun espace mémoire, leur seul moyen de communication est par passage de messages. Lors de la compilation en Javascript, ils sont compilés en WebWorkers HTML5.
Après avoir découvert le langage, nous venons maintenant de voir quelques unes des librairies fournies par Dart. Nous allons maintenant nous intéresser aux différentes façons de faire tourner une application Dart.

Comment exécuter une application Dart

Sur le serveur

Dart fournit une machine virtuelle standalone capable d’être lancée en ligne de commande. Cette VM permet d’accéder aux fichiers, répertoires, gérer des sockets, lancer un serveur HTTP, un serveur websockets… Comme déjà mentionné, on peut ainsi imaginer dans le futur développer la partie serveur de notre application entièrement en Dart, et réutiliser le code pour la partie cliente.

Dans le navigateur, nativement

Les ingénieurs de Dart ont intégré dans un build spécial de Chromium une VM Dart. Cette version est communément appelée Dartium. Elle permet d’executer nativement une application Dart en appelant simplement le script depuis la page html ainsi :

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

 
L’avantage de cette solution est de pouvoir débuguer directement dans votre navigateur.

Dans le navigateur, compilé en Javascript

Evidemment, tous les navigateurs du marché ne vont pas intégrer une VM Dart aussi rapidement que peut le faire l’équipe Chromium. C’est pourquoi une partie importante de Dart est la possibilité de compiler votre application en Javascript, sans aucune configuration, et ainsi de l’exécuter sur n’importe quel navigateur moderne (tout comme peut le faire GWT ou CoffeeScript). Le compilateur permet de la même façon l’optimisation du code, l’élimination du code mort… Celui-ci est toujours en phase d’amélioration mais reste une priorité afin de faciliter l’adoption du langage.

Développer avec Dart

Comme Google ne fait généralement pas les choses à moitié, ils fournissent également un éditeur complet basé sur Eclipse, le Dart Editor. Cette éditeur arrive avec tout un tas de fonctionnalités, complétion du code, refactoring, debug dans l’IDE, compilation vers javascript…
Et enfin pour vous aider à démarrer, plusieurs ressources utiles

Conclusion

Dart est encore une “technology preview”, le langage et les librairies sont donc susceptibles de changer avant la première release. Certains points sont par exemple en cours de développement comme le support de la réflexion et d’autres encore en discussion comme l’ajout des mixin au language (voir cet article de Gilad Bracha). La première version, Milestone 1 est en cours de finalisation.
J’espère avec cet article vous avoir convaincu du potentiel de Dart. Google investit beaucoup dans ce nouveau langage, on retrouve parmi les créateurs du langage et les membres actuels de l’équipe certaines têtes connues (Joshua Bloch, Gilad Bracha, David Chandler…), on peut également voir le nombre de sessions Dart au dernier Google I/O, alors que le langage a moins d’un an. Enfin, la communauté Dart, déjà importante, ne cesse de grandir et de se diversifier, avec par un exemple un podcast nommé Dartisan, animé par Seth Ladd, qui permet de se tenir au courant des dernières nouveautés, ou encore la page Google+ du langage. Enfin, pour les francophones, je vous conseille la page Google+ non-officielle mais très active dartlangfr

Auteur/Autrice

5 réflexions sur “Dart, un langage moderne pour le web

  • DART me donne le sentiment que Google sonne la fin de GWT. En tout cas pour développer de nouveaux projets de webapp, GWT ne sera plus un choix pour l’IHM. Je ne sais pas si d’autres partagent le meme sentiment que moi!

    Répondre
  • Julien Vey

    GWT est une technologie mature qui a fait ses preuves et qui est utilisée massivement actuellement. Dart est encore à l’état incubation, le langage n’en étant pas encore à sa première version. Il va falloir du temps avant de voir si Dart va réussir à s’imposer et peut-être qu’à ce moment là, on pourra se poser la question entre GWT et Dart. En tout cas, pour le moment, GWT reste encore un très bon choix, même pour des projets à long terme. Pour moi, GWT a encore de beaux jours devant lui.

    Répondre
  • Nicolas

    Bon article !
    Je suis assez d’accord avec Julien sur le positionnement de Dart par rapport à GWT. Il est vrai qu’avant de me plonger dans Dart, j’avais ce sentiment de voir Dart comme un GWT Killer. Mais en ce plongeant dans Dart, on voit effectivement, qu’il est loin d’être mature. En effet, de nombreux points sur la syntaxe et idées changent au fur à mesure des builds (comme les getter, les catch, concaténation … ). C’est très mouvant, il arrive ainsi qu’un morceau de code ne fonctionne plus suite à la sortie d’un nouveau build. A l’inverse GWT, a pris un peu plus de maturité ces derniers mois en ouvrant le framework autour d’un comité de pilotage auxquels participent des contributeurs externes à Google. Bref, GWT a encore de beau jour devant lui.

    Et aussi merci pour le lien sur notre page Google+ 🙂

    Répondre
  • mathieu

    Quand on voit que gmail est tricoté main, je ricane un peu en regardant GWT. Enfin bon, si ça peut rendre service pour faire des pages d’intranet, c’est toujours bon à prendre.
    L’arme secrète de Dart, c’est surtout son système de congélation/décongélation de son état, comme smalltalk, une arme secrète pour les environnements avec peu de mémoire et pas de swap. C’est donc Android, sa cible.

    Répondre
  • Merci pour cette présentation qui donne envie d’essayer le langage. J’avoue qu’un langage qui offre à la fois la possibilité de faire du typage faible ou fort, c’est tentant. Et puis, en plus d’Androïd, on pourrait imaginer un support de Dart sur GAE et dans la suite Google Docs (pour la partie macro).

    Répondre

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.