Débuter avec Dart

Dart est le nouveau langage crée récemment par Google et encore en développement. Il se veut comme le successeur du JavaScript, avec des objectifs de simplicité et d’efficacité. Orienté objet, les développeurs qui viennent de langages tels que le Java ou C# ne seront pas trop dépaysés.

Je vous propose une introduction au développement Dart. Pour cela, il vous faudra télécharger sur le site officiel l’éditeur Dart (sorte d’Eclipse du Dart) qui inclut le SDK et Dartium, qui est un navigateur Chromium avec une machine virtuelle Dart intégrée. Cliquez sur le premier bouton, cela fera l’affaire.

Dézippez l’archive et mettez là dans Program Files, et lancez DartEditor.exe.

Nous allons créer un nouveau projet File -> New Application et donnez lui le nom que vous voulez. Personnellement, je l’ai appelé avec beaucoup ‘inspiration « Test ». On se retrouve donc avec le projet crée, qui contient 3 fichiers : 1 .html, 1 .css, et 1 .dart, qui contiendra notre code dart.

JS

#import('dart:html');
 
num rotatePos = 0;
void main() {
    query("#text").text = "Click me!";
    query("#text").on.click.add(rotateText);
}

void rotateText(Event event) {
    rotatePos += 360;
    var textElement = query("#text");

    textElement.style.transition = "1s";
    textElement.style.transform = "rotate(${rotatePos}deg)";
}

Déjà, il faut importer des librairies. Ici, on importe la librairie dart:html. Si on veut travailler avec du JSON par exemple, il faudra importer la librairie dart:json. La liste des librairies est disponible dans l’API.

Tout le code qui sera exécuté se trouve dans la fonction main(). Le code ici parle de lui même. On récupère grâce à la fonction query la div #text et on lui rajoute le texte « Click me! ». Ensuite, on reprend cette div et lorsque l’on clique dessus on.click.add(rotateText), on appelle la fonction rotateText, qui va appliquer une rotation à l’élément.

Tout cela est plutôt compréhensible assez facilement et je ne m’attarderais pas dessus, je souhaite juste vous montrer deux trois trucs et astuces que j’ai découvert au fur et à mesure. Ces articles sur Dart se multiplieront surement par la suite sur le site.

Au lieu d’appliquer une rotation lors d’un click, voyons quelles sont les autres méthodes à notre disposition. Pour cela, placez votre curseur sur click et appuyez sur F3. L’éditeur devrait vous ouvrir un autre onglet vers un fichier dart.

On a ici accès à toutes les méthodes que l’utilisateur peut effectuer avec la souris (doubleClick();, mouseOver), avec le clavier (keyDown, keyPress, keyUp), etc… Si on change maintenant notre code et qu’on met mouseOver :

JS

query("#text").on.mouseOver.add(rotateText);

On clique sur la flèche verte dans la barre des menus et cette fois-ci, le texte fait une rotation lors du survol de la souris et non plus du clique.

Je vous encourage donc à utiliser F3 pour connaître à quoi le code fait référence, et s’il existe d’autres méthodes similaires.

Ensiote, une autre astuce est le débuggage. Personnellement, j’aime bien savoir en JavaScript la valeur d’une variable à grand renfort de console.log(). Pour Dart, c’est la même chose pour les alert(), les console.debug, sauf, qu’il faut faire précéder console ou alert() de window.Alors je ne sais pas si c’est encore officiel ou pas, en tout cas, en JS pas besoin de référencer le window.

Une dernière chose pour finir cet article, on va utiliser une autre librairie, dart:web. Cette dernière ne contient qu’une seule méthode htmlEscape() qui prend en paramètre une chaine de caractère. On voit dans la capture d’écran que cette fonction change tous les caractères spéciaux en entités HTML. Il y a même un commentaire des developpeurs qui dit qu’il faudra faire une implémentation plus efficace.

Ecrivons dans notre void main()un petit code qui va utiliser cette librairie.

JS

print(htmlEscape(''));

Cela va afficher le résultat dans la console :

HTML

<strong></strong>

Et si on essaie pour finir de supprimer l’import de la librairie au début du fichier #import('dart:web');, on se rend compte que l’éditeur nous met une erreur, et cela est très agréable pour trouver les erreurs dans le code.

J’espère que cet article vous aura plus, et vous donnera l’envie de vous mettre à Dart. En tout cas, n’hésitez pas à commenter, et à dire votre ressenti sur le contenu ou la forme !