Il y a quelques années, quand je faisais du javascript, je codais un peu n’importe comment : l’important, c’est que ça marche.

On faisait un peu attention aux performances, mais dans l’ensemble, on s’en cognait un peu.

Mais depuis quelques années (et un passage d’un peu plus d’un an dans une équipe qui m’a appris XP, le développement agile et tout le bordel afférent), je ne veille plus seulement à coder propre, je veille à coder beau.

Ce qui nous en vient à parler de CoffeeScript.

Un peu après sa sortie, quand les devs ont commencé à parler de CoffeeScript, j’ai essayé et je n’ai pas aimé. Je le reconnais, j’ai essayé un peu vite, et mon avis était biaisé par des billets d’humeur assez partiaux et contre CoffeeScript, blâmant des problèmes de performance, de code généré, etc…

Et moi, comme un con, j’ai tout pris pour argent comptant.

Le temps passa, et ça nous ramène à quelques mois, début 2013.
J’avais pris un abonnement d’un mois au fantastique CodeSchool, pour réviser Node.js, que j’avais appris dans l’urgence des mois auparavant (c’est toujours une bonne chose de lire ou voir un tutoriel sur un langage qu’on connait - on apprend souvent des trucs utiles, ou de nouvelles façons d’appréhender le langage).

Bref, une fois les cours de Node.js terminés, et pour rentabiliser mon investissement, j’ai fait tous les cours du site, y compris celui sur CoffeeScript, mon point de vue encore un peu embrumé par mes expériences des années précédentes.

Et dès les 5 premières minutes du premier chapitre, je fus horrifié : en CoffeeScript, me disait le formateur, on ne déclare pas les variables !
Euh, quoi ?
Mais ça va pas, la tête ? Je me tue à essayer d’apprendre à mes étudiants à ne pas oublier de le faire, et en CoffeeScript, on ne le fait pas ?!

Et là, j’ai fais l’idiot : j’ai coupé le tutoriel.
Puis j’ai coupé mon ordinateur, toutes les lumières, et je me suis assis en serrant mes genoux et en me balancant doucement d’avant en arrière.
Enfin, pas tout à fait, mais vous comprennez l’idée.

C’était une réaction idiote, pasque quelques jours plus tard, poussé par je ne sais quelle force invisible, je relance ce tutoriel et vais jusqu’aux exercices, et exécute le premier, l’estomac au bord des lèvres d’avoir à utiliser des variables non-déclarées (on en viendrait presqu’à me prendre pour un fachiste).

Et dans la petite fenêtre de résultat, je vois, à ma grande (et positive) surprise, que si en CoffeeScript, on ne déclare pas les variables, c’est pasqu’à la compilation, CoffeeScript les déclare pour vous.
C’était beau, ma vie était de retour jolie, je n’avais plus qu’à nettoyer les larmes que j’avais mis un peu partout les jours d’avant.

Mais il y avait toujours un truc qui me chiffonait : c’était bien beau, tout ça, et écrire en CoffeeScript était éffectivement plus rapide et plus joli qu’en JS, mais quid des performances ?
Pasque le coup de la surcouche de langage toute jolie mais qui génère du code tout pourris, celle-la aussi, on me l’avait déjà faite, j’étais méfiant.

Et donc, j’ai fait des tests.
Et dans quasiment tous les cas, quand on compare du code CoffeeScript compilé en js, et le même code en js vanille, les performances sont similaires. Et quand il y a une différence elle est rarement de plus de 10%, ce qui est, dans la plupart des cas, acceptable.

Un p’tit exemple ?

Prennons le script suivant, en js vanille, qui récupère des images dans un document, et remplis un tableau avec la valeur de leur attribut src.
Ce script fonctionne et est déjà bien optimisé.

1
2
3
4
5
6
7

var aImageSrc = [],
    oAllImg = window.document.querySelectorAll( 'img' ),
    i = -1,
    oElement;
for( ; oElement = oAllImg[ ++i ]; ) {
    aImageSrc.push( oElement.getAttribute( 'src' ) );
}

En CoffeeScript, pour faire la même chose, on le fait ainsi :

1

aImageSrc = ( oElement.getAttribute 'src' for oElement in window.document.querySelectorAll( 'img' ) )

Ouais, une ligne. C’est beau™.
Compilé en javascript, ça donne ceci :

1
2
3
4
5
6
7
8
9
10

aImageSrc = (function() {
    var _i, _len, _ref, _results;
    _ref = window.document.querySelectorAll('img');
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        oElement = _ref[_i];
        _results.push(oElement.getAttribute('src'));
    }
    return _results;
})();

Faut dire ce qui est, niveau bonnes pratiques, c’est déjà tout bon.

Ensuite, les tests.
Pour celà, rien de mieux qu’un petit JSPerf.
Comme vous pouvez le constater, dans la plupart des cas, les performances sont au coude-à-coude, quand ce n’est pas carrément la version compilée par CoffeeScript qui est meilleure.

CQFD.

Pour ma part et après ces tests, j’ai laissé sa chance à CoffeeScript et depuis, je ne code quasi plus qu’avec lui.
Je songe même à en donner un petit cours d’introduction à mes étudiant de l’année prochaine, en fin de cursus, quand ils seront un peu plus à l’aise avec du javascript avancé.