Partager du code JavaScript client/server

Update : Pour ceux ayant lu l’article avant le 15/05/2013, la solution n’était pas bonne. L’article est mis à jour avec une autre solution qui elle, fonctionne 😀
L’avantage d’utiliser le JavaScript (CoffeeScript dans mon cas) côté serveur  (avec nodejs) et côté client, est de pouvoir partager du code.

Seulement un petit problème se pose. En effet, côté client, afin de créer un système de module, la solution la plus connue est d’utiliser RequireJS. Celle-ci s’appuie sur l’AMD (Asynchronus Module Definition) alors que côté serveur, nodejs repose sur CommonJS qui a une structure différente.

La première solution est de créer deux fichiers ayant la même fonction métier mais avec une structure différente. Pas très avantageuse, on a de la redondance alors qu’on travaille avec le même langage…

La deuxième solution consiste à importer la librairie requirejs dans node puis de l’utiliser. Je ne m’étendrais pas plus sur celle-ci dans ce billet.

Une autre solution consiste à modifier un peu nos fichiers JavaScript(ou CoffeeScript) afin qu’il soit compatible CommonJS du côté serveur et AMD côté client. Alors comment procéder ? Voici l’exemple de deux fichiers ayant la même fonction métier. C’est une simple classe avec une dépendance.

serveur :


client :


Le premier problème que nous voyons est que la classe Dog n’est pas au même niveau(en terme de scope) dans les deux fichiers. Côté serveur elle se situe dans le scope du “fichier” tandis que côté client, elle se trouve dans le scope de la fonction define.

Donc dans un premier temps, nous allons changer la structure du fichier sous RequireJS afin de faire ressortir la classe Dog afin qu’elle soit dans le scope voulu.


Petite parenthèse, lorsque je dis que le scope sera au niveau du fichier, cela ne signifie pas que le scope est le fichier. En effet, si on regarde comment est compilé ce fichier en JavaScript, on voit que le tout est englobé dans une fonction dont le scope est this(passé en paramètre de la fonction call) :


Notre scope “au niveau du fichier” est ce qu’est this à la dernière ligne (window par exemple du côté client). Si vous ne comprenez pas bien la manière dont fonctionnent les scopes, revoyez les notions de this, de scopes et de closures, c’est indispensable de bien comprendre ces notions lorsqu’on fait du JavaScript 🙂

Passons maintenant à la deuxième étape qui est de fusionner nos deux fichiers en un seul. L’astuce consiste à tester quelque chose qui nous permettra de déterminer de quel côté nous sommes. Ici j’ai choisi de tester la variable window. En effet côté serveur, celle-ci n’existe pas. On aurait pu aussi tester la méthode define : si celle-ci n’existe pas, alors nous sommes côté serveur. Bref, voici au final ce que ça donne :


Notre fichier est maintenant compatible AMD et CommonJS 🙂 On voit qu’il y a trois parties : la première concerne la déclaration de Burd ainsi l’import des dépendances avec CommonJS, la seconde notre code métier et la troisième l’import/export d’AMD ainsi que l’export de CommonJS.

Je vous met également la version JavaScript(qui sera donc utilisée côté client) :

Retour d’expérience TypeScript

Screen Shot 2013-04-26 at 10.13.51 PM

Aujourd’hui, j’ai commencé un nouveau projet nodejs. Cette fois-ci, j’ai choisi d’utiliser TypeScript pour voir ce que ça donne.

Je classerais ce post comme un “fourre-tout”. J’y metterais plusieurs choses que je remarquerais, mais que je n’ai pas encore approfondi. Je rajouterais petit à petit des retours. J’essaierais ensuite, de creuser chaque retour pour en faire un “vrai” post.

L’importation de librairies javascript :

Point noir de ce côté. TypeScript a un compilateur qui vérifie que les méthodes utilisées dans nos fichiers js sont existantes. Jusque là, aucun souci. Seulement, lors de l’utilisation d’une librairie, le compilateur typescript nous renverra une erreur nous disant que la méthode(de la librairie) n’existe pas…

Quand on y réfléchit, c’est tout à fait logique. Comment TypeScript peut-il savoir quelles sont les méthodes existantes dans un fichier js?

Afin que le compilateur sache quelles sont les fonctions qui existent et dans quels “modules”; il va falloir créer un fichier qui les répertories. D’après ce que j’ai pu voir, le convention de nommage serait mylibray.d.js. Si ce fichier est déjà présent dans les sources de la librairie (comme nodejs,express ou jquery), l’effort n’est pas forcément énorme (il faut ajouter ///<reference path=’node.d.ts’/> au début du fichier ). Seulement, si votre librairie ne dispose pas de ce fichier…vous êtes bon pour l’écrire.

Apparemment, l’importation de fichier ts n’aurait pas ce problème. Je ne peux pas trop en dire plus, je n’en sais pas plus.

Je détaillerais ça dans un autre post avec des informations plus précises et plus exactes.

 

CoffeeScript

coffeescript-logo

Présentation

CoffeeScript est un langage qui, une fois compilé, donne du JavaScript. La règle d’or de CoffeeScript est d’ailleurs “it’s just JavaScript”. Créé par Jeremy Ashkenas, CoffeeScript a pour but d’écrire moins de code tout en étant plus lisible, plus compréhensible et plus facile à maintenir. Sa syntaxe s’inspire du Ruby.  Il est bien sûr possible d’utiliser des librairies JavaScript. Attention toutefois, il n’est pas possible d’écrire du JavaScript dans du CoffeeScript directement (contrairement à TypeScript). En effet afin d’écrire du JavaScript en CoffeeScript, il faut le délimiter par l’accent grave : ` .

Celui-ci est disponible ici  ou à installer avec le gestionnaire de packet node :

npm  install -g coffee-script

Pour écrire du coffeeScript, il suffit d’écrire un fichier en .coffee et de le compiler avec le compilateur coffeescript.

coffee -c fichier.coffee

Variables

Parce qu’un exemple est toujours plus parlant :


Que pouvons nous remarquer? CoffeeScript n’a pas besoin de déclarer une variable avec le mot clé “var”. De plus,nous n’avons pas besoin d’utiliser de point-virgule à la fin de la ligne.

Les commentaires en CoffeeScript sont définis par un “#”

Il est possible de placer une variable dans une chaine de caractère sans concaténation. Il suffit pour cela d’utiliser la syntaxe #{maVariable} :


 

Opérateurs

Voici un tableau comparatif des différents opérateurs existant en CoffeeScript.

CoffeeScriptJavaScript
==
is
===
!=
isnt
!==
not!
and&&
or||
true
yes
on
true
false
no
off
false

Comme on peut le voir dans ce tableau, certains opérateurs en JavaScript disparaissent tel que l’opérateur == ou !=. Pour expliquer ceci, il est important de revenir au JavaScript et d’expliquer  la différence entre == et ===. Avec l’opérateur ==, on vérifie uniquement la valeur de la variable tandis qu’avec l’opérateur ===, on vérifie également le type de la variable. Ainsi si on a deux variables : a = “2” et b=2. Le résultat a==b renverra true tandis que a===b renverra false. Les bonnes pratiques JavaScript veulent qu’on utilise l’opérateur ===. C’est pourquoi l’opérateur == n’existe pas en CoffeeScript.

D’autres on été rajouté tel que yes, on, off, no. Ces valeurs ont pour but de simplifier la lecture du code.

Conditions


Comme on peut le remarquer, en CoffeeScript on s’affranchit des parenthèses et des accolades. De plus, lorsque l’on veut tester qu’un nombre est situé dans un intervalle, inutile d’utiliser l’opérateur &&. Enfin, si il n’y a qu’une instruction, il est possible de l’écrire sur une seule ligne comment montrer ligne 13.

Une chose qui peut être troublante est l’absence d’accolades. Comment faire alors pour effectuer plusieurs opérations? En CoffeeScript, c’est l’indentation qui va déterminer ceci. Une indentation est représenté par une tabulation ou bien 2 espaces. C’est cette indentation qui va signifier un bloc d’instruction :


Il n’existe pas d’écriture ternaire en CoffeeScript, nous le remplaçons à la place par le mot clé then :


En CoffeeScript il est aussi plus facile de savoir si une variable est définis grâce au mot clé “?”:


Enfin voici la méthode pour créé un switch en CoffeeScript  :


 

Fonctions

Il existe 2 moyens de créer des fonctions en JavaScript mais qu’une en CoffeeScript :


Pour créer une fonction en CoffeeScript, nous utilisons “->”. Etant donné que nous avons qu’une seul instruction(la valeur de retour), il est possible de mettre tout sur la même ligne.

Voyons comment cela se passe lorsque la méthode reçoit un argument :


Comment nous le voyons ici, l’indentation est ce qui détermine le bloc concernant la fonction. La dernière instruction du bloc est sa valeur de retour(une fonction coffeeScript renvoie donc toujours quelque chose). Les argument de place entre parenthèses lors de la définition avant le ->. Cependant lors de l’appel de la fonction, si il y a des arguments, les parenthèses sont optionnelles. Il est également possible de rajouter des paramètres optionnelles comme le montre le deuxième argument.

Attention!

Regardons cet exemple :


On s’attend, à la fin du code, que a vaut toujours 3 et i vaut 10 car le sentiment qu’on a est qu’a la compilation, il y ait ce code JavaScript :


Et bien non, la compilation donnera ceci :


Je ne m’attarderais pas sur l’explication de ce fonctionnement dans ce billet, on est ici pour découvrir les bases de CoffeeScript. Cependant il me semblait important de souligner ce comportement. Je l’expliquerais dans un autre billet.

Nombre d’arguments variables

Il est possible d’avoir un nombre d’arguments grâce à l’emploi de “…” 


 

Tableaux

En ce qui concerne les tableaux, CoffeeScript suit toujours son leit motiv : écrire moins de code pour faire la même chose. Voici quelques exemples de création d’un tableau :


Chacune de ces façons d’écrire fournira un tableau contenant les chiffres 1, 2, 3, 4.  Reprenons chacune de ces lignes :

ligne 2 : C’est la même façon que la création de tableau en JavaScript
ligne 4 : les .. signifie de 1 jusqu’à 4 inclus
ligne 6 : les … signifie de 1 jusqu’à 5 exclus
ligne 8,9 et 10 : il est possible de créer un tableau à partir de variable. Si on inversait les variables a et b nous aurions un tableau égale à [4,3,2,1]

Afin de rendre plus lisible la création de tableau il est possible de le faire sur plusieurs ligne comme ceci :


De cette manière, c’est un peu plus lisible. Attention à l’indentation : si le premier élément n’est pas indenté correctement sur la ligne du dessous, le compilateur renverra une erreur.

CoffeeScript nous permet également de pouvoir de récupérer un tableau de valeurs à partir d’un autre tableau :


Simple non? 🙂

Passons à un comportement plus spécifique, regardons l’exemple ci-dessous :


Ici, nous nous attendons à ce que le compilateur nous renvoie une erreur. Et pourtant, la compilation se déroule bien et tableau2 contient [2,3,4,5]. En fait, le -1 va être traduit en tableau.length par le compilateur. C’est une sorte d’alias.


Il existe deux façons de parcourir un tableau en coffeeScript : avec une boucle foreach ou bien avec une boule for in :


 

Objets

Pour créer un objet en CoffeeScript, rien de plus simple :


Comme toujours en CoffeeScript, c’est l’indentation qui définit les “limites” de notre objet.

Il est possible de parcourir un objet grâce au mot clé “for of”  :

Les itérations

Arrêtons nous un peu sur les itérations. Tout comme en JavaScript, CoffeeScript utilise la boucle while :


Cependant, la boucle for n’existe plus et est remplacé par le parcours d’un élément appelé “compréhension”. Nous avons donc for in pour parcourir un tableau et for of pour parcourir un objet. Pour faire une boucle for classique, nous feront comme ceci en CoffeeScript :


Il est vrai que la “compréhension” d’un élément n’aurait pas grand intérêt si elle s’arrêtait là. Pour ceux venant de .net et utilisant linq, vous retrouverez quelques similitudes.En effet nous pouvons faire ceci par exemple :


Littéralement : lorsque le fruit contenu dans le tableau [“pomme”, “banane”, “poire”] n’est pas égale à “banane”, faire un alert de fruit. Etant donné que l’on ne fais qu’une opération, il est même possible d’écrire tout sur une seule ligne de cette manière :


La “compréhension” a également la possibilité de nous retourner une liste :


Cette ligne signifie :  sélectionne fruit pour fruit contenu dans [“banane”, “pomme”, “poire”] lorqu’il est différent de banane. Attention à ne pas oublier les parenthèses. Sans celles-ci, maListe contiendra uniquement le dernier résultat (poire).

CoffeeScript Orienté Objet

CoffeeScript simplifie beaucoup la partie Orienté Objet de JavaScript. Ainsi pour créer une classe il nous suffit d’utiliser le mot clé class :


Remplissons notre classe en lui fournissant des attributs, des fonctions et un constructeur :


Comme le montre l’exemple, afin de créer un attribut, il suffit de placer le sigle @ devant. Les méthodes sont comme de simples variables. Enfin le mot clé constructor indique la fonction qui sera exécuté lors de l’instanciation de la classe. Si un des arguments possède un @, le compilateur comprendra qu’il s’agit d’initialiser un attribut. A la compilation cela donne :


 

Il est également possible de mettre en place l’héritage grâce au mot clé extends :


Le mot clé super invoquera la méthode de la classe mère ayant le même nom que la méthode courante.

 

Voilà, ce billet touche à sa fin. Je n’ai pas tout expliqué sur CoffeeScript, il reste encore beaucoup de notions. Pour en apprendre plus, n’hésitez pas à vous rendre sur le tutoriel officiel . Celui-ci est très complet et très bien fait. 🙂

 

Devcamp #2 Rennes

Ce 14 novembre 2012 s’est déroulé le deuxième Devcamp à la Cantine Numérique Rennaise. Le thème de cette soirée était le déploiement d’application sur des serveurs. 5 intervenants nous ont fait découvrir leurs solutions dans des lightning Talk de 10min.

Fabric ton déploiement

Florian STRZELECKI nous fait découvrir Fabric, un logiciel python qui nous permet de déployer nos applications sur plusieurs serveurs. Fabric nous permet de définir des rôles pour chaque serveur afin de personnaliser ses déploiements. Fabric se configure à l’aide d’une fichier de configuration en python. Il ne nous reste plus qu’à utiliser les commandes Fabric pour lancer nos déploiements! Et tout ceci côté client, inutile d’installer Fabric sur chaque serveur.

Capistrano

Capistrano est présenté par Thierry HENRIO. Cette outils fait sensiblement la même chose que Fabric mise à part que celui-ci est développé en Ruby. Il utilise un système de plugin(ou Recipes) permettant de pouvoir utiliser des scripts déjà existant. Tout comme Fabric, Capistrano ne nécessite pas son installation sur nos différents serveurs.

GitHub Pages et IWantMyName

Guillaume COLLIC via un retour d’expérience sur la création de codeouest.org nous fait découvrir 2 services : IWantMyName et GithubPages

IWantMyName est un site web nous permettant de créer uniquement notre nom de domaine. Il possède ensuite un market (ou store) dans lequel différents services sont présentés. On peut alors lié un service voulu à notre nom domaine. Si la démarche ne peut pas se faire automatiquement, une explication précise sur la démarche est donné.

Guillaume nous présente ensuite Github Pages, un service qui nous permet d’héberger des pages web statiques sur un dépôt git. On peut utiliser ce service avec IWantMyName pour le lié à notre nom de domaine.

Puppet

Puppet est un outil également développer en ruby nous permettant le déploiement d’application sur les serveurs. Il nécessite son installation sur chaque serveur.

From scratch to deploy

Nicolas Ledez nous présente, à travers une démo en direct, la façon dont un administrateur système, un développeur et un intégrateur web travaille avec les outils découvert plus haut.

Conclusion

Ce deuxième Devcamp a été riche en échange et en découverte. Le regroupement de développeur passionné multi-techno donne une ambiance chaleureuse. Vivement le 12 décembre pour assister à la troisième édition! 🙂

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.