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.

 

Lecture de : Kanban pour l’IT

kanban

Kanban pour l’IT est un livre écrit par Laurent Morisseau. Il nous explique comment la méthode Kanban va nous permettre d’améliorer nos processus de développement. Dans une première partie, Laurent nous explique les concepts de Kanban. Dans la seconde partie du livre, Laurent met un place une équipe et une société fictive pour avoir un fil conducteur sur la mise en place de la méthode Kanban. On y voit les difficultés rencontrées ainsi que les bonnes pratiques a adopté. Cela permet également de rentrer dans le noyau de la méthode Kanban.

 

Introduction

Avant de parler des concepts de la méthode Kanban, je vais, comme Laurent l’a fait dans son livre, définir les mots de vocabulaire que je vais utilisé.

  • Kanban : Avec un K majuscule est utilisé pour désigner la méthode Kanban.
  • kanban : Avec un k minuscule désigne les outils de visualisation utilisé de la méthode Kanban.

Les concepts de Kanban

Objectif du Kanban

L’objectif de Kanban de réduire voir éliminer les situations de surcharge de travail et de gérer les flux de demandes variables. C’est donc un moyen d’équilibrer notre chaîne de processus pour l’accomplissement d’un projet. En d’autres mots, Kanban à pour objectif de trouver un équilibre entre la demande et la capacité d’un système kanban.

Capacité d’un système Kanban

La capacité d’un système Kanban est constitué de 3 indicateurs:

  1. Le débit du système : c’est le nombre moyen d’éléments produits par unité de temps(exemple : 10 éléments par semaine).
  2. le temps de traversé : c’est le temps moyen d’un élément passe dans le processus de réalisation(de la demande à la livraison).
  3. la performance à la date d’échéance : c’est le pourcentage d’éléments livrés à la date d’échéance par rapport au nombre total d’éléments.

Les fondations

Kanban repose sur trois piliers :

  1. Commencer par ce que vous faîtes maintenant
  2. Respecter le processus actuel, les rôles et responsabilités
  3. S’engager à changer de manière incrémentale et évolutive

Le premier pilier s’explique par le fait qu’un changement trop rapide entraîne de la résistance de la part  des membres de l’équipe. En contrepartie, Kanban peut ne pas donner des résultats immédiats. Le deuxième pilier signifie que Kanban s’applique dans un processus déjà existant(cycle en V, Scrum…). Enfin, le troisième pilier préconise l’évolution par petit pas, l’objectif étant de s’approprier une culture d’amélioration continue.

Les 5 pratiques

  1. Visualiser : La visualisation est une pratique simple mais essentielle. Elle se met en oeuvre par différents outils comme le tableau kanban ou les cartes kanban. Elle permet à tout l’équipe de visualiser l’état du projet.
  2. Limiter le travail en cours : Pour chaque activité de réalisation du projet, on va limiter le nombre d’éléments de travail. Ces limites doivent être équilibrée afin d’avoir un flux de travail fluide. Dans la pratique , on passera d’un système de réalisation à flux poussé à un système de réalisation à flux tiré.
  3. Gérer le flux de travail : Il faut être en capacité de pouvoir gérer les éléments en manipulant les indicateurs de capacité du système.
  4. Rendre explicites les règles de gestion du processus : Nos différentes activités sont soumis à un ensemble de règles et de caractéristiques. Il faut rendre explicites ces règles afin que toute l’équipe les visualise, les comprenne et les améliore.
  5. S’améliorer de manière collaborative : Les blocages mise en évidence par les différentes pratiques Kanban permettent d’augmenter les discussions entre les membres de l’équipe. Cela contribue au commencement de la démarche d’amélioration. Cette démarche d’amélioration s’appuie alors sur des modèles externes(Lean, théorie des contraintes, théorie des files d’attente, etc..) visant à comprendre et résoudre ces blocages.

 

Un développement en flux tiré

Afin d’appliquer la méthode Kanban, il faut pour cela mettre en place un flux de travail. Laurent suit les deux axiomes suivant définis par Corey Ladas pour définir le développement en flux :

  1. Il est possible de diviser le travail en petits incréments apportant de la valeur et pouvant être planifiés indépendamment les uns des autres.
  2. Il est possible de développer n’importe quel incrément apportant de la valeur dans un flux continu, des exigences au déploiement en production. Autrement dit, toutes les activités liées à un incrément peuvent être réalisées et s’enchaîner les unes après les autres.

Une fois  cette étape effectué, la seconde consiste en avoir un flux tiré. Contrairement à un flux poussé qui consiste à produire un travail sur la base de prédictions, le flux tiré consiste à ne travailler que sur le remplacement de ce qui a été consommé.

Le modèle PDSA

Kanban s’appuie également sur le modèle PDSA(Plan, Do, Study, Act) qui est une variante du modèle PDCA(Plan, Do, Check, Act).

  • La phase plan(Concevoir) sert à définir le modèle et les hypothèses que l’on souhaite mettre en place.
  • La phase do(Mettre en oeuvre) est la réalisation du modèle.
  • La phase Study(Etudier) est la phase d’étude du système, on s’appuie sur les résultats obtenus ainsi que sur différents modèles de pensée : théorie des files d’attentes, théorie des contraintes, maîtrise des statistiques et gaspillage du Lean.
  • La phase Act(Améliorer) utilise la phase d’étude pour améliorer son système. Puis repars sur un nouveau cycle PDSA.

Schéma : 

Kanban

Conclusion

L’article ne résume que les concepts de Kanban, c’est à dire la première partie du livre. Dans la suite de celui-ci, Laurent Morisseau nous décrit le noyau de la méthode Kanban au travers du suivis d’une équipe dans la mise en place de la méthode. On aborde plus profondément les concepts en effectuant un cycle PDSA. Il y a plusieurs choses à retenir :

  • Le Kanban a pour but d’améliorer notre processus en se fixant un objectif sur un des indicateurs du système. Faire du Kanban sans objectif n’est pas la bonne approche.
  • Le Kanban ne résout pas les problèmes rencontrés, il se charge simplement de les mettre en évidence
  • Le Kanban n’est pas une méthode agile, elle peut très bien s’appliquer dans un contexte de cycle en V. Cependant, il est vrai qu’elle amène dans sa pratique à plus d’agilité. L’utilisation du Kanban dans un contexte Scrum est appelé ScrumBan.

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. 🙂

 

Agile Tour Nantes 2012

L’Agile Tour Nantes 2012 s’est déroulé hier(le 15 Novembre), c’était pour moi l’occasion de découvrir le milieu de l’Agilité. N’ayant très peu voir aucune notion d’agilité, celle-ci ne me paraissait juste qu’un ensemble de méthodes que l’on appliquaient à la gestion de projet. Cette journée m’aura cependant fait découvrir que l’Agilité, c’est bien plus que ça.

La Keynote : On est Agile!

La journée commence donc par une Keynote, et c’est Tremeur BALBOUS, coach agiliste, qui s’en charge. Tout d’abord il va nous parler de constats personnels qu’il a constaté lorsque les entreprises veulent se mettre à l’Agilité. Il nous dit que les bénéfices attendus ne sont pas la réalité. L’Agilité a pourtant fait ses preuves. Pourquoi donc les objectifs ne sont-il pas atteints?

Tremeur nous explique alors que l’Agilité ne sont pas de simples méthodes qu’il faut appliquer mais une philosophie. Vouloir employer l’Agilité au sein d’une équipe, c’est changer sa façon de d’être, de travailler. Nous sommes, explique-t-il habitué dès notre plus jeune âge a exécuter les tâches que l’on nous assigne (parents/enfants-professeur/étudiant-patron/employé). Il va falloir donc changer nos habitudes et c’est sur ce point là que se base le leit motiv de la keynote de Tremeur : le changement.

Tremeur nous fait part de son expérience et nous explique que c’est le manque de compréhension de l’Agilité qui a fait que les entreprises n’ont pas obtenu les résultats souhaités. L’Agilité est une philosophie qui doit d’abord être appliquer à soi-même. Or c’est ce point primordiale qui n’est pas respecter. Cependant, Tremeur va plus loin que de simplement mettre la faute sur ce point là. Il nous amène à nous interroger sur la cause de cette faute. Ce n’est pas un manque de volonté de notre part. Pour lui, cela vient du fait que l’Homme possède un système immunitaire contre le changement afin de se protéger. Ce système immunitaire est si efficace qu’il nous protège même des changements que l’on veut appliquer. Bien sûr, ce n’est pas une fatalité. Grâce à un travail sur soi, il est possible de “dompter” ce système immunitaire. Tremeur finis la keynote en nous invitant à suivre cette voie, il nous invite à changer nous même. C’est en faisant ce travail que nous comprendront la philosophie de l’Agilité qui est de favoriser le changement et donc à l’appliquer correctement.

 

Introduction à l’Agilité

Cécilia BOSSARD et Cécile ESPECEL nous font découvrir l’Agilité au cours de cette session d’une petite heure. Pour jouer le jeu jusqu’au bout, un tableau est mise dans la salle, ayant trois colonnes : A faire, en cours, Terminé. Au début de la session, une dizaine de post-it sont affichés dans la colonne à faire. Progressivement, ceux-ci passeront dans la colonne “en cours” puis “Terminé”.

Au cours de cette session, Cécilia et Cécile. Elle nous interrogeront sur les causes qui ont amené à un projet réussi. Les principales causes étaient la souplesse dans le projet, l’environnement dans lequel  travaille l’équipe, le proximité du client, etc… Elle nous expliquent alors comment l’Agilité va tenter de favoriser ces causes. Tout d’abord, elles nous présentent les concepts et les principes de l’Agilité pour ensuite s’attarder sur deux méthodes : Scrum et Kanban.

 

Immunothérapie pour le changement

Toujours sur le même leit motiv que sa keynote, Tremeur BALBOUS nous explique les blocages qui nous freine dans le changement et comment y faire face. Ce n’est pas un manque de motivation mais notre cerveau qui fait trop bien son travail. Cette session ne peut être résumé avec mes simples mots, cela revient à tenter de résumer un cours de philosophie ce dont je suis particulièrement mauvais. Sachez seulement que cette session était intéressante et qu’y participer une seconde fois ne serait pas de trop. Je remercie Tremeur pour cette excellente initiation à l’immunothérapie.

 

1986 : Pourquoi Scrum

Dans ce ligthning talk de 15-20 minutes, Fabrice AIMETTI nous raconte l’histoire de la méthode Scrum. Il nous explique que l’étude faite par 2 japonais sur des équipes travaillant sur des produis innovants (donc en proie au changement) ont relevé 6 caractéristiques expliquant les résultats positifs de celles-ci:

  1. L’instabilité intrinsèque
  2. L’auto-organisation
  3. Le recouvrement des différentes phases de cycle de développement
  4. L’apprentissage globale et multiple
  5. Le contrôle subtile
  6. Le transfert de la connaissance dans l’organisation

Par la suite, 2 américain (Ken Scwaber et Jeff Sutherland) utiliseront cette étude pour créer une méthode de travail favorisant ces 6 caractériques qu’il vont nommé Scrum.

Dans un deuxième temps, Fabrice nous fera découvrir les diverses mutations que cette méthode à subit pour arriver à celle qu’elle est actuellement.

Agilité dans la mobilité

Dans ce second Ligthning Talk, Alvin Berthelot nous explique en quoi l’Agilité est particulièrement adapté au développement mobile. En effet, qui dit mobile, dit changement. Alvin relève plusieurs constats dans le développement mobile :

  • L’Interface Utilisateur est différents en fonction des terminaux.
  • De nouvelles fonctionnalité arrivent chaque année voir tout les 6 mois et nous contraint à changer nos projets.
  • La mobilité regorge d’opportunité qu’il faut saisir rapidement.
  • Il faut offrir les fonctionnalités dans un espace visuel réduit de 80% à l’espace habituel
  • Il faut affronté des écosystèmes parfois obscur (la validation des market par exemple)
Alvin nous explique comment l’Agilité tente de faire face à ces constats.

Le paradigme de l’ingénieur dans un imaginaire ubiquitaire

C’est par une Keynote un peu particulière que démarre l’après midi. Celle-ci est dispensée par Aurélien JEANJEAN et  Florent LAROCHE et nous présente l’association “La machine”. Cette association créait des proto-industriel qui devront prendre vie. A travers de témoignage, Aurélien et Florent nous montre que la science, la technique et l’humanité sont l’essence du métier d’ingénieur. Il nous feront découvrir la structure interne atypique de cette association.

 

Les agilistes anonymes, pourvu qu’il ne nous arrive rien!

Au travers un retour d’expérience, Guillaume CRASSARD nous fait part des difficultés qu’il a rencontré lors de la mise en place d’Agilité au sein d’une équipe. Il compare avec humour la différence de la mise en place d’agilité  entre les livres et la réalité plus particulièrement autour de la méthode Scrum. En effet sur le terrain, rien ne se passe comme prévu.

Au cours de cette session, Guillaume nous a donc fait part des obstacles rencontrés et comment il les a géré. Il nous explique par exemple comment l’enthousiasme de l’utilisation de Scrum a progressivement fait place à un certain essoufflement et comment il a redynamisé son équipe. Il nous à fait part également des réussites de l’application de Scrum comme l’auto-organisation ou bien de la flexibilité du nombre de personnes dans l’équipe.

Enfin, il nous expliquera pourquoi de la méthode Scrum, il est passé à la méthode Kanban.

Outils pour un développement agile

Ce Ligthning Talk présenté par Florian KLEIN nous présente quelques outils pour un développement agile. Il nous parlera alors de BDD (Behavior Driven Developpement), c’est à dire utiliser un langage compréhensible entre le client et le développeur au travers de tests fonctionnel de l’application.

Kanban Game

C’est avec un serious game encadré par Laurent MORISSEAU et Patrice BOISIEAU que je finis cette journée. Ce jeu nous permet de comprendre comment Kanban permet de mettre en évidence certains problèmes que l’on rencontre lors de la création d’un produit et comment il va nous aider à améliorer notre processus de développement.

Conclusion

Si je devais retenir une notion de cette journée, ce serait d’accepter le changement. Au cours de cette journée, j’ai découvert l’univers de l’Agilité et surtout ce que ce mot signifie. Je remercie tout les organisateurs et les speakers pour cette journée qui m’aura fait découvrir une nouvelle approche de la gestion de projet.

Les slides des sessions seront bientôt disponible.

Lien : http://at2012.agiletour.org/fr/nantes.html

Twitter : @atnantes, @agilenantes

Enfin le planning complet:

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.