Editions ENI Livres | Vidéos | e-Formations
Outils de développement
Introduction
Ce chapitre est consacré à l’exploration d’outils qui facilitent nettement le processus de développement. Ils sont tout aussi importants que Node lui-même : le gain de temps lorsque l’on dispose d’un processus propre et automatisé est considérable, sans compter qu’il peut éviter des erreurs et donc épargner des opérations de débogage. En définitive, une fois le processus mis en place, c’est tous les jours que l’on en profite. La première partie sera donc consacrée à Gulpjs, afin de vous faire profiter au maximum de cette capacité d’automatisation. Puis, la deuxième partie proposera une découverte de JSHint, pour vous aider à éviter certaines erreurs lors de l’écriture de votre programme. Et c’est aussi et surtout l’occasion de revoir certaines bonnes pratiques en JavaScript. Quant au redémarrage automatique via node-dev, il vous permettra d’éviter de perdre du temps à chaque modification de code. Et enfin sera décrit Browserify, vous permettant d’utiliser des paquets node directement dans votre navigateur !
Automatisation de tâches - Gulpjs
Il est classique d’effectuer des tâches de manière récurrente lors du développement d’une application ou d’un site web. Ce sont ces tâches, souvent chronophages, qui peuvent être réalisées automatiquement.
Gulpjs (http://gulpjs.com/) est un lanceur de tâches conçu principalement pour la compilation de sources. Il assiste le développeur dans son quotidien et limite les tâches manuelles et répétitives.
Il a été architecturé pour être facile à utiliser et à configurer, en se basant sur un modèle par programmation par opposition au principe de configuration. Autrement dit, la configuration ainsi que l’assemblage des différents greffons (plugins) se fait dans le code, dans un fichier JavaScript gulpfile.js.
Il existe d’autres lanceurs de tâches, comme Gruntjs (http://gruntjs.com/) qui est le plus connu. Cependant, ce dernier souffre de certains défauts, comme une configuration rapidement complexe et un manque de flexibilité dans l’enchaînement des tâches (entraînant du coup des répétitions désagréables). Il existe aussi d’autres outils de compilation, comme Broccoli (https://github.com/broccolijs/broccoli). Pour le livre, le choix a été fait de se concentrer sur Gulpjs, après avoir testé les deux précédents. Si vous êtes plus à l’aise avec le principe de configuration, n’hésitez pas à tester Gruntjs.
La communauté Gulpjs est en phase de croissance, et de plus en plus de plugins apparaissent. L’autre atout de Gulpjs, par rapport à ses concurrents, est d’utiliser massivement les flux (streams) de Node (voir le chapitre Flux).
Son fonctionnement s’articule donc autour du concept de tâches, qui sont propres à chacun des projets. On peut bien entendu réutiliser un modèle en le plaçant dans le dossier de l’application.
1. Installation
L’outil en ligne de commande gulp étant basé sur Node, il est donc publié sur npmjs.org. L’installation est triviale :
$ npm install --global gulp
Comme la définition des tâches est spécifique à un projet et à une version...
Analyse du code - JSHint
JavaScript étant un langage interprété, il n’y a pas de phase de compilation. Et donc pas de possibilité de détecter des erreurs de syntaxe, d’où le risque d’obtenir un code erroné et de ne voir apparaître les problèmes qu’en production et uniquement dans certains cas. Ce qui n’est guère plaisant.
JSHint est un linter : il analyse le code de façon superficielle et il détecte les erreurs de syntaxe (mais aussi tout un ensemble de problèmes potentiels). C’est un des compagnons essentiels du développeur JavaScript.
Dans cette section, nous expliquons comment installer, utiliser et configurer JSHint ainsi que toutes les règles (ou options) disponibles car celles-ci couvrent un vaste pan des bonnes pratiques du développement JavaScript... et par conséquent du développement Node !
Il existe d’autres linters pour JavaScript comme JSLint dont JSHint est issu. ESLint est certes plus récent, mais le livre se concentre sur JSHint, car il est le plus utilisé aujourd’hui.
Il existe des outils, comme fixmyjs (https://www.npmjs.org/package/fixmyjs), qui se basent sur JSHint pour corriger automatiquement certaines erreurs. Même s’ils ne sont pas parfaits, ils peuvent considérablement aider la mise en conformité d’un projet.
1. Installation et utilisation
L’installation est extrêmement facile car JSHint est lui-même développé avec Node et possède son paquet sur npmjs.org.
Étant un outil générique, non lié à un projet en particulier, il est généralement installé globalement :
> npm install --global jshint
Une fois installé, il suffit de lancer jshint en lui spécifiant les fichiers à analyser :
> jshint index.js
index.js: line 7, col 5, 'Duplex' is defined but never used.
index.js: line 24, col 28, 'size' is defined but never used.
index.js: line 50, col 30, 'size' is defined but never used.
index.js: line 75, col 42, 'size' is defined but never used.
4 errors
Un grand nombre d’éditeurs de code et d’EDI proposent une intégration de JSHint, par exemple via les greffons SublimeLinter...
Redémarrage automatique - node-dev
node-dev est un petit outil extrêmement pratique qui relance un script Node quand une de ses dépendances est modifiée. À chaque fois qu’un des fichiers JavaScript composant l’application est sauvé, l’application est arrêtée puis redémarrée.
node-dev ne nécessite pas de configuration car il détecte automatiquement les dépendances en surveillant l’utilisation des require() (voir la section Modules dans le chapitre Concepts).
L’installation se fait de façon tout à fait classique avec npm :
$ npm install --global node-dev
Attention : ne pas confondre node-dev avec le paquet nodedev qui ne fonctionne pas de la même façon.
L’utilisation est on ne peut plus simple puisqu’il suffit d’utiliser l’exécutable node-dev à la place de node.
Dans l’exemple suivant, on peut voir que index.js a été modifié deux fois :
$ node-dev index.js
foo
[INFO] 12:12:32 Restarting
bar
[INFO] 12:12:38 Restarting
baz
Browserify
Créer des paquets et s’en servir est vraiment pratique. Mais comment utiliser tout ce code depuis un navigateur et non pas uniquement dans Node ?
C’est là qu’entre en jeu Browserify. C’est donc un outil qui convertit du code pseudo-Node (CommonJS, utilisant certains modules standards et variables globales) pour être au final utilisable dans un navigateur.
Ses points forts sont les suivants : tout d’abord, on peut organiser le code sous forme de modules. Comme on l’a vu, la conception en « programmation orientée composant » est puissante et flexible. Mais ce n’est pas tout : en plus de pouvoir réutiliser des modules conçus pour Node (via npm), on peut partager du code dans un projet, entre le serveur (Node) et l’interface (le navigateur). C’est aussi pour cela que nous parlons de cet outil, qui casse des barrières entre développeurs frontend et backend.
S’il est possible d’utiliser un grand nombre de modules développés initialement pour Node dans le navigateur, c’est que Browserify fournit des modules assurant la compatibilité avec les modules de base de Node pour toutes les fonctionnalités utilisables dans un navigateur (mais pas pour les accès au système de fichiers par exemple).
Autre point digne d’intérêt : la concaténation du code, qui permet de faire...
