Riviera Dev : CoffeeScript par Bodil Stokke

Sans doute l’une des présentations les plus sympas que j’ai vu depuis longtemps. Sur la forme d’abord, très décontracté et ensuite sur le fond. En sortant on a compris l’utilité de Coffee Script. Bodil est une jeune femme pétillante et bien ancrée dans les technologies du Web, très sympa.

Bodil Stokke vient d’Oslo en Norvège, pour nous présenter CoffeScript. En quelques mots, CoffeeScript est un moteur javascript qui permet d’écrire autrement et plus simplement du code Javascript. Vous allez donc bien écrire du Javascript, avec cependant une approche plus propre, plus simple et en évitant les pièges de Javascripts. Car il y en a, en partie en raison de son histoire.

Pour débuter, un peu d’histoire. Brendan Eich inventeur de Javascript en 1995. A l’époque SUN Microsystems lance Java et pense fortement au Web. Netscape, une société qui a existé de 1994 à 2008, veut lancer un langage pour les navigateurs. La société décide de lancer un peu dans l’urgence à la fin de l’année 1995 un langage pour donner à son navigateur un coup de pouce sur le marché. Brendan Eich est mandaté pour écrire en quelques semaines les premières bases du langage. Ainsi est né Javascript. Pour la petite histoire, et je ne sais pas si Bodil le sait, Javascript s’appelait d’abord « Mocha » puis ensuite « Livescript » avant de prendre le nom au combien plus sexy de « Javascript ». La décision de changer de nom a été prise par l’équipe marketing de Netscape, qui a vite compris que Java allait faire du buzz… Microsoft mettra un an à sortir JScript avec IE3, on est alors en août 1996.

Bodil montre ensuite quelques pièges en Javascript. La portée des variables par exemple ou les pièges sur la portée.

function plus_two(n) { two = 2; return n + two; }
plus_two(3); // 5 - obviously, 3 + 2 = 5
two; // 2 - wtf, JS?


Un autre piège avec with, lorsque vous avez ou non des attributs sur une classe :

var foo = 5;
with (obj)
foo; // 5 unless obj.foo exists


La gestion de l’égalité est intéressante aussi

2 === '2' // false obviously a number is not a string
2 == '2' // true WTF JS ? ?


Enfin pour terminer, une question existentielle : est-ce que NaN est un number ? Et bien oui…

typeof NaN
==> "Number"


Ce qui s’est passé c’est que créer un langage comme Javascript à l’époque, en quelques semaines, c’était un vrai exploit. Il y avait une forte contrainte sur le temps. Bodil se demande quels ont été les facteurs pour décider du choix et des caractéristiques de Javascript.

Ensuite elle se lance dans un exercice qui était bien sympa, et qui a bien fait rire toute la salle.

Prenez la photo de John Mc Carty l’inventeur de Lisp en 1958

Dennis Ritchie Co-inventeur du C en 1973

Bjarne Stroustrup, inventeur du C++ 1983

Guido van Russom Inventeur de Python en 1991

James Gosling, co-inventeur de Java en 1995

Et revenons sur la tête du gars qui a inventé JavaScript, Breindan Eich :

Regardez chacune de ces photos et dites-moi ce qui cloche par rapport au gars qui a inventé Javascript ? Et bien notre speakrine fait rire toute la salle en disant : le gars qui a fait javascript n’a pas de barbe

Cela donne ensuite sa théorie très personnelle sur the « Facial hair theory of programming language design ». En bref : si tu n’as pas de barbe, tu ne vas pas faire un langage top qui restera dans les annales.

Prenez Anders Heljberg le fondateur de C# et allons-y, trollons comme des fous :

Ou Larry Wall l’inventeur de Perl

Bref on se détend, tout ceci est du second degrés. Mais quand même…

Si vous faites du javascript, il y a cependant quelques moyens simples pour éviter de tomber dans les pièges du langage. Par exemple, utilisez le mot clé strict afin de renforcer la qualité de vos scripts.

"use strict";
myUndeclaredVariable = 5; // throws a ReferenceError

"use strict";
var foo = 5;
with (obj)  // syntax error!
    foo;    // no more wondering what this evaluates to

Pour passer à CoffeScript, elle montre alors du code Node.js écrit en Javascript, qu’elle transforme ensuite en code CoffeScript. L’exercice consistera finalement à nous montrer que l’on peut exprimer la même chose, mais bien plus simplement et plus lisiblement. Retenez une chose : CoffeeScript permet d’écrire du code JS plus simple et plus facile à lire, qui est ensuite compilé en code JS classique.

Voici la version javascript :

server.listen(function(request, response) {
  database.open(function(connection) {
    connection.query("SELECT * FROM posts", function(cursor) {
      cursor.fetchAll(function(posts) {
        response.write(posts.forEach(function(post) {
          return post.title;
        }));
      });
    });
  });
});

Et voici la version CoffeeScript

server.listen (request, response) -> 
  database.open (connection)-> 
    connection.query "SELECT * FROM posts", (cursor) -> 
      cursor.fetchAll(posts) -> 
        response.write posts.forEach(post)-> 
          post.title

Notez au passage la simplification et l’énorme avantage d’avoir un code plus lisible. Simple non ?

Pour supprimer les accolades, CoffeScript prend le même principe que Python ou Yaml : les indentations permettent de séparer les blocs fonctionnels.

Pour ce qui est du mot clé function, il est remplacé par la flèche et permet de rendre le code plus lisible.

// Javascript
var sum = function(a, b) {
return a + b;
}


Et CoffeeScript

sum = (a, b) -> a + b

D’autres idées permettent aussi d’éviter les pièges de la portée des variables et de la comparaison d’objets. Bref CoffeeScript permet simplement d’éviter d’écrire du code Javascript de mauvaise qualité.

Cela va plus loin, puisque vous pouvez déclarer des objets, des tableaux, utilisez des techniques avancés sur le mot clé if comme dans cet exemple :

// The if statement:
if elvis.state == "alive"
  console.log "Hail to the King!"
else
  console.log "You lie!"

// It has a short form:
if power_level > 9000 then attack() else despair()

Un des features intéressants est la String interpolation, le remplacement d’une variable par sa valeur dans des chaînes :

pokemon = "Snorlax"
console.log "Wild #{pokemon} appeared!"
"Wild Snorlax appeared!"

Bodil montre ensuite différents exemples de code CoffeeScript, c’est très intéressant, difficile de vous en parler ici. Allez voir sa vidéo,le lien est à la fin de cet article.

La question que chacun se pose : mais comment s’en servir dans une page web ? Vous pouvez par exemple écrire ceci:

<script type="text/javascript" src="coffee-script.js"></script>
<script type="text/coffeescript" src="my.coffee"></script>

Vous pouvez aussi vous en servir pour écrire du code avec Node.js par exemple.

Bref CoffeScript est un outil qui permet d’écrire autrement du Javascript, de simplifier et d’éviter les pièges du langage.
Une bonne présentation que je vous conseille, si vous avez moins d’une heure. A regarder sur Vimeo ci-dessous.

Pour terminer, allez lire le blog de Bodil, et surtout allez voir par curiosité le nombre de projets GitHub qu’elle a écrit… Voilà et là tu te dis, j’ai pas de compte GitHub. Et là, je te regarde comme une boite de pâté pour chat et je te dis (gentiment) « bon, tu veux que je te créé un compte github pour t’aider ? »

Bref si tu as une barbe et que tu fais un langage, je crois en toi. Les chats c’est sympa, et comme de par hasard, le logo de github c’est un chat.

Fin de la retransmission en direct, à vous les studios.

Références
Si vous voulez voir la vidéo de cette présentation, regardez http://vimeo.com/28772382

Articles similaires:

Riviera DEV Web 2.0 et GWT Riviera DEV Node.js Riviera Dev : HOW GITHUB USES GITHUB TO BUILD GITHUB Conférence Riviera DEV à Sophia-Antipolis