[Devoxx FR 2013] Du JavaScript propre ? Challenge accepted !

À l’heure où les applications web se veulent plus dynamiques et réactives, JavaScript s’impose comme un langage incontournable. Cette tendance se confirme depuis quelques années déjà par l’émergence de nombreux frameworks tels que Backbone.js, AngularJS ou encore Ember.js qui permettent de mieux structurer le code JavaScript.

Le développement web s’oriente vers davantage de code côté client et nécessite donc une meilleure structuration. Fini le JavaScript utilisé de façon marginale !
C’est dans cette optique que Julien Jakubowski et Romain Linsolas ont présenté « Du JavaScript propre ? Challenge accepted ! » lors de l’édition 2013 de Devoxx France. Au programme, un tour d’horizon des bonnes pratiques à adopter pour ne plus avoir peur d’écrire 100.000 lignes de code JavaScript.

Le JavaScript effraye le développeur

Bien qu’ultra répandu, ce langage souffre paradoxalement d’une réputation négative chez les développeurs. Un des gros reproches qui est fait au JavaScript est son côté « sale » et déroutant. De nombreux concepts le rendent difficile à appréhender, parmi lesquels :

• La pollution de l’espace de nommage : une fonction (ou variable) non encapsulée risque d’être redéfinie par une fonction (ou variable) de même nom.

• Le scope des variables : par défaut une variable est déclarée dans le scope global, tandis qu’une variable déclarée dans une fonction sera accessible à l’ensemble de la fonction (et non pas au seul bloc d’instructions dans lequel elle a été déclarée !).

• Tout est public par défaut : toutes les variables et fonctions sont publiques par défaut, il n’existe pas de mot-clé « private » en JavaScript. Pour définir des variables privées, il faut les encapsuler dans un espace de nommage.

• L’utilisation de « this » : la valeur de « this » dépend du contexte d’appel de la fonction. À utiliser avec précaution !

Ces particularités, lorsqu’elles ne sont pas maîtrisées, rendent forcément compliquée l’utilisation du langage pour un développeur Java.

Ecrire du code propre, c’est possible !

Heureusement, certaines solutions permettent de mieux structurer son code.
La plus connue est jQuery, qui est devenue presque incontournable aujourd’hui lorsqu’on fait du JavaScript. En plus de simplifier grandement la manipulation du DOM, ce framework permet de rendre le code plus simple, plus concis, plus expressif.

Il est également conseillé de modulariser son code pour bien découper les responsabilités. Un module JS correspond à un ensemble de code isolé dans son propre espace de nommage, on évite ainsi de polluer le scope global et on encapsule les variables et fonctions qui sont propres au module.

Une fois le code bien découpé dans des modules distincts, il faut gérer les dépendances entre tous ces modules. Pas simple. La solution classique consiste à enchaîner les imports des scripts dans votre page HTML. Cependant, dès lors que votre application contient beaucoup de scripts, cela devient vite le bazar. Un autre problème concerne le chargement des scripts. Chaque fichier JavaScript est chargé séquentiellement ce qui a pour effet de ralentir considérablement le chargement global de votre page.

Pour pallier ces problèmes, il existe la norme AMD (Asynchronous Module Definition) dont l’implémentation la plus connue est RequireJS. Son rôle est de simplifier la gestion des dépendances entre les modules et de les charger de manière asynchrone. Avec RequireJS, vos modules seront chargés en parallèle, au moment adéquat, et exécutés dans le bon ordre.

Un autre bon réflexe à prendre lorsqu’on fait du JavaScript côté client est de faire du templating. Le développement web implique souvent de générer des éléments du DOM et de les ajouter dynamiquement à une page. Plutôt que de faire cela en plein milieu de votre code métier à base de concaténation de chaîne (ce qui devient vite inmaintenable), il est préférable de l’isoler. En JavaScript aussi on peut faire du MVC !
De nombreux moteurs de templating existent : Mustache, Handlebars, Underscore.js ou encore doT.js.

Enfin, des outils d’analyse statique de code source comme JSLint ou JSHint sont utiles pour éviter les « ugly parts » et s’intègrent très bien aux principaux IDE. La qualité de votre code n’en sera qu’améliorée.

Et les tests dans tout ça ?

Un des plus gros fléaux du développement JavaScript est le manque de tests automatisés. Pourtant, même s’ils ne sont pas forcément simples à mettre en place, les outils existent. Nous testons notre code Java, pourquoi ne pas en faire de même avec JavaScript ? Avec une quantité de code JS qui devient de plus en plus importante, les tests sont indispensables sous peine de faire face à de nombreuses régressions non maîtrisées

Les bibliothèques pour faire des tests unitaires ne manquent pas : Jasmine, JsTestDriver ou Mocha pour les plus connues. Jasmine dispose notamment d’une syntaxe élégante qui permet d’écrire des tests facilement lisibles.
Une autre bibliothèque qui peut s’avérer utile est PhantomJS. Ce navigateur WebKit sans interface graphique permet d’exécuter facilement du code (et donc des tests) en ligne de commande.

Ces outils se marient très bien à Maven, Jenkins ou Sonar pour faire de l’intégration continue. Ils vous permettront d’assurer une bonne couverture de code, vous n’aurez donc plus aucune excuse pour ne pas tester votre code JavaScript !

Conclusion

Cette conférence était intéressante pour des développeurs non initiés au développement JavaScript et souhaitant découvrir ses particularités. Julien Jakubowski et Romain Linsolas ont présenté de manière objective les faiblesses du langage tout en apportant les solutions nécessaires pour mieux structurer son code. Comme cela a été souligné, ce langage souvent dénigré et pris à la légère mérite d’être mieux considéré et d’être utilisé avec plus de maîtrise pour construire des applications web dignes de ce nom.