Dart

Présentation

Dart est un langage développé par Google et dévoilé en octobre 2011. Il a pour objectif de remplacer JavaScript en apportant un langage plus structuré pour développer des applications web. Le SDK comprends :

  • Le langage Dart
  • Les librairies Dart
  • Le compilateur Dart-to-JavaScript
  • Pub : le gestionnaire de paquets pour Dart
  • La VM Dart

Deux outils viennent compléter le SDK : L’éditeur Dart et Dartium (un navigateur).

Le langage Dart

Dart est un langage client et serveur qui s’inspire de nombreux langages :

source

On retrouve donc tous les concepts de l’orienté objet de C# avec les classes et l’héritage. Le langage est mono-thread mais utilise le concept d’Isolates de l’Erlang (programmation concurrente). La syntaxe est proche du JavaScript. Les développeurs Java, C# et JavaScript n’auront  pas de mal à développer avec Dart. L’extension d’un fichier dart est « .dart ».

Pour plus d’info sur le langage : dart

Un exemple de code Dart :

Les librairies Dart

Le SDK Dart fournit de nombreuses librairies pour nous aider à développer des applications web. Voici  3 exemples de librairies. Pour plus d’info : Librairies

Dart : core

La librairie dart : core est automatiquement intégré à tous les programmes Dart, elle fournit des éléments essentiels comme l’objet Number, String, les collections ou encore les expressions régulières.

Dart : io

La librairie dart :io n’est pas utilisable par les applications basées dans le navigateur. Elle fournit des API afin de gérer les fichiers, les dossiers, les processus, les sockets et les ressources HTTP. Par exemple, on utilisera cette librairie pour créer un serveur HTTP.

Dart : html

Dart : html n’est utilisable que pour les applications web. Elle fournit des APIs pour manipuler le DOM et accéder aux APIs  HTML5 (Storage et WebSocket par exemple).

Pub

Pub est le gestionnaire de paquets pour Dart. Il permet de récupérer du code,  des bundles ou des librairies que la communauté Dart a partagées. Le gestionnaire fait partie du SDK et a été installé au même moment. Il faudra ajouter une variable d’environnement pointant vers le dossier bin de Dart.

Insérer un paquet dans un projet :

Il faut définir créer/modifier  le fichier pubspec.yaml. C’est ce fichier qui va servir à renseigner les paquets qui seront utilisés dans l’application. Voici un exemple de ficher pubspec.yaml :


Pour installer un paquet, on utilisera la commande « pub install ». Pub installe dans le projet les paquets renseignés par le fichier pubspec.yaml.


Il ne reste plus qu’à importer le paquet dans notre fichier à l’aide de la ligne suivante :


Pour plus d’info : http://pub.dartlang.org/

VM dart

Le langage Dart a besoin de la VM Dart pour être interprété. Celle-ci a fournis par le SDK. La VM peut alors exécuter le programme Dart en deux modes : checked et production.

En mode checked, le compilateur prend en compte les déclarations « assert » et lancera des exceptions si celles-ci sont égales à « false ».

En mode production, ces déclarations sont ignorées.

Pour lancer la VM Dart, autrement dit compiler un fichier Dart, la ligne de commande est la suivante :


Cette méthode n’est utilisable que pour les applications en ligne de commande.

Dartium

Afin de lancer une application web écrite en Dart, Google a modifié son navigateur Chromium (version de développement de Chrome) afin d’y installer une VM Dart donnant ainsi naissance au navigateur Dartium. Celui-ci peut donc nativement exécuter les fichiers Dart.

Attention, Dartium est une preview et n’est donc pas à utiliser en navigateur principale.

Le compilateur Dart-to-JavaScript

Etant donné que la VM Dart n’est pas installé sur les navigateurs. Google fournit un compilateur afin de transformer le code Dart en code JavaScript.  Le compilateur est fourni par le SDK actuel mais il est également possible de le télécharger séparément. Pour lancer le compilateur, il suffit d’utiliser la ligne de commande ci-dessous :


Le compilateur nous donnera alors un fichier .js.

Dart Editor

Afin de faciliter le développement, Google a mis en place un éditeur spécifique pour Dart : Dart Editor. Celui intègre tous les outils énoncés plus haut : le langage, l’auto-complétion,  le gestionnaire de paquets « Pub », Dartium, le compilateur Dart-To-JavaScript, etc…

Synthèse

Points positifs

  • Dart est un langage structuré dont le but est de créer des applications web.
  • Dart est un langage client et serveur. Il est ainsi nécessaire de connaître qu’un seul langage pour développer coté serveur et côté client (bien qu’il faut tout de même connaître le langage HTML et CSS).
  • Dart  possède son propre éditeur rendant plus facile le développement et le  débogage.
  • Dart possède un gestionnaire de paquets rendant plus facile le partage de code.
  • Dart est open source.

Points négatifs

  • Dart nécessite une VM pour pouvoir être exécuté. Or celle-ci est indisponible pour les navigateurs principaux. Il nous faut donc convertir nos fichiers Dart en fichier js avec le compilateur Dart-to-JavaScript.
  • Dart est un langage très jeune (1 an) est n’est pour l’instant pas destiné à la production.

Conclusion

Bien que toujours en développement et donc inexploitable aujourd’hui pour de la production, Dart est un langage qui possède de réelles capacités à devenir un concurrent à JavaScript.

TypeScript

Présentation

TypeScript est un langage de programmation développé par Microsoft(co-créé par Anders Hejlsverg, un des créateurs du C#]. Il ajoute une couche syntaxique à JavaScript en s’inspirant de C# et Java. On peut le comparer au CoffeeScript, celui-ci s’inspirant plutôt des langages Python et Ruby. L’avantage de TypeScript est qu’il apporte uniquement une couche syntaxique au JavaScript, il est donc possible d’écrire du JavaScript à l’intérieur du code TypeScript sans aucun problème contrairement à coffeeScript où il faut lui spécifier à l’aide de quotes particulières les lignes écrites en JavaScript.

TypeScript s’inspire également des standards de la future version de JavaScript basé sur Ecma 6.

Pour écrire en TypeScript, il y a deux solutions :

  • Télécharger le plugin pour Visual Studio 2012
  • En utilisant le gestionnaire de paquet de nodeJS : npm  install –g  typescript

Plus d’info : http://www.typescriptlang.org/

Types

TypeScript apporte au JavaScript un typage. JavaScript possède 5 types primitifs : string, number, boolean, null et undefined.

TypeScript définit quant à lui 4 types primitifs :

  • Number : Il correspond au type primitif number de JavaScript. Keyword : number
  • String : Il correspond au type primitif string de JavaScript. Keyword : string
  • Boolean : Il correspond au type boolean de JavaScript. Keyword : bool
  • Any : Il représente toutes les valeurs JavaScript(dont null et undefined) . Keyword : any

Le type peut être déclaré explicitement ou implicitement. A la compilation, tous ces types seront transformés en var. L’intérêt d’utiliser les types de TypeScript est le même intérêt qu’utiliser avec modération de var en C# : La clarté du code ainsi que l’aide de l’auto-complétion d’IntelliSense.

Classes et Héritage

Classes

TypeScript apporte une couche orientée objet au JavaScript. En effet il est possible de créer des classes. Un exemple est beaucoup plus parlant :


 

Une fois la compilation effectuée, voici le fichier js généré :Comme on peut le voir, on retrouve toutes les bases d’un langage objet à savoir le mot clé class, le constructeur, les méthodes de classe et les méthodes statiques ainsi que la portée des variables.


 

Héritage

La partie compilation expliquera plus en détails les différences entre le code JavaScript et TypeScript. Nous pouvons remarquer que le code TypeScript est un peu plus compréhensible et lisible pour un développeur venant de l’univers C# ou Java.

TypeScript apporte aussi la notion d’héritage. Il est possible d’implémenter une interface ou bien d’étendre une classe.

TypeScript :


 

Voici le fichier JavaScript généré :


 

C’est en commençant à faire de l’héritage que l’on voit comment TypeScript peut nous aider à rendre notre code plus compréhensible.

A la compilation, la notion d’interface disparaît et une variable __extends est créée. Cette variable contient le mécanisme JavaScript permettant l’héritage. Ainsi si l’on avait 2 autres classes A et B, B héritant de A. B et Point utiliserait la même variable __extends.

Modules

Une des dernière notion principale qu’apporte TypeScript sont les modules. Deux mots clés sont utilisés, module et export. module permet de définir les limites de note module et export permet de définir quels membres de ce module seront accessibles depuis l’extérieur. Les class étant au final des variables en JavaScript. Voici un exemple :


Le fichier JS généré :


 

Remarque : Le mécanisme d’héritage est créé au début du fichier et non dans le module.Ici, nous pouvons créer en dehors du module que des objets de type PointColor. Le export en TypeScript s’est en effet transformé en Geometrie.PointColor = PointColor. N’ayant pas cette ligne pour la variable Point. La variable Geometrie ne connait donc pas Point.

La compilation

Générer le fichier « .js »

Si Visual Studio est l’IDE dans lequel les fichiers ts sont écrits, alors la compilation se fait en même temps que la compilation du projet. Si ts a été installé avec le gestionnaire de paquet npm. La compilation se fait dans le terminal à l’aide de la commande tsc fichier.ts. Celui-ci générera alors un fichier « .js ». Dans les deux cas, c’est le fichier « .js » qui doit être utilisé pour l’application web.

TypeScript : seulement une surcouche syntaxique

TypeScript ne fournit qu’une surcouche syntaxique à JavaScript. La phase de compilation nous indiquera les erreurs(syntaxique ou sémantique) mais fournira tout de même le fichier JavaScript. De plus le fichier JavaScript généré ne comportera ni les commentaires ni les lignes vides.

Conséquence :

En reprenant l’exemple sur les class( ici ). La version TypeScript nous informe des éléments privés, publics et statiques tandis que la version JavaScript ne le fait pas. En effet JavaScript ne possède pas les concepts de « public », « private » ou même « static ». Après la compilation, le fichier reste du JavaScript. Il est donc possible de récupérer des attributs mis en « private » ou bien une méthode static en se trouvant dans une instance.


 

Synthèse

Si l’on travaille avec Visual Studio, IntelliSense nous fera remarquer que l’on cherche à accéder à un élément privé ou bien que la méthode n’existe pas. Le compilateur nous alertera également qu’il y a des erreurs dans notre code TypeScript. Cependant en JavaScript, ce qui est écrit plus haut est autorisé donc le code sera exécuté sans problème.

Points positifs

TypeScript apporte une syntaxe proche du C# et du Java apportant au code JavaScript une meilleure lisibilité. Ainsi même les développeurs C# et Java peuvent rapidement développer en JavaScript.

TypeScript n’est qu’une couche syntaxique, il ajoute juste une aide au développeur pour mieux structurer son code en ajoutant des concepts. Le développeur n’est pas contraint de respecter ces concepts et peut ignorer les erreurs soulevées par le compilateur.

TypeScript est une surcouche au JavaScript et non un langage à part. Ainsi il est tout à fait possible de faire du JavaScript dans du code TypeScript. Il est possible également de définir un module dans un fichier et de l’utiliser dans un autre.

Le code étant plus structuré, le temps de débuggage est plus court et moins complexe. La rapidité de développement est nettement améliorée. L’application web est plus robuste et a moins de risques d’être boguée.

Points négatifs

Il n’est pas possible de débugger les fichiers TypeScript. Si un problème survient, ce sera sur le fichier JavaScript généré ce qui peut rendre plus compliqué le débogage.

La gestion de l’asynchrone aurait pu être améliorée en utilisant les concepts de développement asynchrone sur Windows 8 avec les mots clé async et await.