JavaScript est devenu, qu’on le veuille ou non, un langage incontournable. Indispensable sur le poste client et plus précisément sur le navigateur, il prend sa place, peu à peu, sur le serveur avec notamment nodejs.

Bon nombre de développeurs sont donc amenés à écrire de plus en plus de JavaScript, pour cela il convient de s’équiper et de choisir un IDE adapté. Essayons de balayer les choix possibles.

Les IDE Java vétérans que sont Eclipse ou Netbeans supportent plus ou moins bien le JavaScript. On peut attribuer sur ce terrain un avantage à Netbeans qui s’en sort mieux que son rival de toujours. Dans la catégorie des environnements de développement généralistes, IntelliJ IDEA demeure un poids lourd. Il sait tout faire : du JEE, Android, Spring, Grails…et donc forcément aussi du JavaScript. JetBrains, l’éditeur, propose d’ailleurs une déclinaison de son logiciel phare, dénommé WebStorm, uniquement centré sur le JS, HTML et CSS. C’est un choix intéressant car moins onéreux qu’IDEA Ultimate Edition.

Au delà des outils historiques du développeur Java, d’autres éditeurs « pure player » ont fait leur apparition. Parmi ceux-ci Sublime Text tient le haut du pavé. Léger, performant, multiplateforme Sublime Text présente de nombreux avantages. Toutefois il pourrait dérouter les aficionados d’IDE traditionnels ; pour tirer la pleine puissance de Sublime il faut faire l’effort d’apprendre ses raccourcis clavier, de se plonger dans ses options de configuration et de parcourir la liste des plugins disponibles. Enfin, il faut savoir que si une version gratuite est disponible Sublime reste un logiciel propriétaire dont la licence coûte $70.

Pour ceux ne pouvant concevoir utiliser autre chose que des logiciels open source, je recommanderais d’essayer Brackets.

Il est proposé par Adobe et est développé lui même en JavaScript (il tourne sur WebKit). Assez jeune, il est néanmoins prometteur, il semble s’inspirer de Sublime avec sa barre latérale très ressemblante et son architecture modulaire visant à promouvoir un riche écosystème de plugins. L’édition de CSS avec une prévisualisation intégrée est particulièrement réussie. Une fonctionnalité intéressante de Brackets est son « Aperçu en direct » qui permet d’héberger les ressources du projet (fichiers JS, HTML, CSS…) sur un serveur embarqué (nodejs). Chaque modification est alors automatiquement prise en compte par le navigateur web sans devoir rafraîchir la page. En plus du gain de productivité que cela procure, servir les scripts JavaScript par HTTP évite les erreurs que l’on peut rencontrer en utilisant des URLs de type fichier.

Enfin, comment terminer notre petite liste d’outils sans parler des Chrome dev Tools. Connus de tous les développeurs web et disponible directement depuis le navigateur de Google, les dev Tools servent à examiner l’arbre DOM, le trafic réseau, positionner des points d’arrêt dans le code JavaScript…Bref, on ne présente plus ces fonctionnalités, essentielles à l’implémentation de clients HTML. Néanmoins depuis récemment Chrome s’est enrichi d’une nouvelle option le rapprochant encore un peu plus d’un éditeur de code. Effet depuis l’onglet « Sources », un simple clic droit permet de relier les ressources délivrer par le serveur à une arborescence locale de fichiers.

Une fois ce mapping établi, tout changement fait dans un source JavaScript ou CSS se persiste durablement par un rapide « Ctrl-s ». Plus besoin de copier/coller les modifications opérées dans Chrome pour les reporter dans le code.