Débuter avec Node.js partie 2

Note de la rédaction : cet article a été publié en février 2011. Entre-temps, Cloud9 a significativement évolué (ainsi que les versions de Node) et certaines informations présentes ici sont désormais dépassées.
Pour autant, nous avons malgré tout décidé de le publier car la présentation faite de l'IDE nous semble utile dans les grandes lignes ainsi que pour garder la continuité de la série d'articles de Romain.

Un précédent article de Web Tambouille avait déjà détaillé comment déboguer une application Node avec Eclipse ou à l'aide de node-inspector. Moyennant l'installation du Eclipse debugger plugin for V8, il sera donc possible d'utiliser tout IDE qui s'appuie sur le noyau Eclipse : Eclipse Classic, Eclipse for JavaScript Developpers, Aptana et bien d'autres encore. De même, en choisissant de faire le débogage de l'application dans node-inspector, tout éditeur de texte pourra être utilisé pour le développement : VIM, TextMate ou votre éditeur préféré !

Je vais donc vous présenter un tout autre IDE à savoir Cloud9. Il est spécialement conçu pour le développement d'applications JavaScript avec le gros avantage d'inclure nativement le débogage d'applications Node. Voyons cela de plus près.

Cloud9page d'accueil du site est un IDE spécialement conçu pour les développeurs JavaScript. Comme le rappelle la , de nombreux environnements de développement incluent un support de HTML / CSS / JavaScript avec coloration syntaxique, complétion… mais cela reste souvent assez décevant.

J'ai beaucoup travaillé avec Eclipse et côté Web, il faut bien admettre que ce n'est vraiment pas sa force, que ce soit avec la version classique ou des versions plus orientées Web comme Aptana ou E4JD. Depuis plusieurs mois, je suis passé sur IntelliJ IDEA et dans sa version Ultimate (la C.E. n'est malheureusement pas concernée), force est de constater que le support de JavaScript est très bon : une coloration syntaxique qui va plus loin que la simple couleur sur des chaînes de caractères, une complétion assez évoluée, des outils intégrés pour déboguer côté client et côté serveur du code JavaScript, etc. Tout ceci fait qu'IntelliJ IDEA est actuellement un des meilleurs IDE JavaScript du marché (pas forcément son but premier, mais c'est bon à prendre). À noter aussi qu'IntelliJ propose un IDE complètement dédié au Web : Web Storm. N'hésitez pas à faire vos retours en commentaires si vous avez pu jouer avec.

Mais depuis peu, un autre IDE fait du bruit : Cloud9, l'IDE fait par des JavaScripteurs pour des JavaScripteurs. Ses principales caractéristiques sont :

• IDE en ligne (pour l'instant en bêta fermée) qui sera donc accessible par votre navigateur ;
• propose, en termes de fonctionnalités d'éditeur, au moins aussi bien que la concurrence ;
• facile à étendre pour rajouter toutes sortes de plugins ;
• support du débogage d'applications Node ;
• test et déploiement sur le cloud.

Techniquement, Cloud9 c'est : un serveur Node ; de l'AJAX dans tous les sens ; des Web Sockets ; du HTML5… En gros, un condensé de nouvelles technologies ! Il est d'ailleurs un très bel exemple de ce que l'on peut faire avec toutes ces nouvelles technologies.

L'objectif de l'IDE est clairement annoncé :

We want to be to Eclipse what Google Docs is to Microsoft Word (citation)

Pour l'utiliser, deux possibilités :

• avoir un compte pour la bêta privée en ligne ;
• cloner le projet sur git.

Pour ma part, j'ai choisi, après cinq secondes d'attente de ticket, la deuxième solution. Cela se résume donc très simplement par :

rmat0n:~$ git clone https://github.com/ajaxorg/cloud9.git
rmat0n:~$ node bin/cloud9.js -w /path/to/your/workspace

Cloud9 dépend de plusieurs autres projets github (Socket.IO…), donc le premier lancement sera un peu long avec un nombre assez important de git clone. Une fois tous les téléchargements terminés, vous devriez voir ce joli log dans votre console :

                         .  ..__%|iiiiiii=>,..
                          _<iIIviiiiiiiiiillli<_.
                       .ivIvilli%||+++++|iillllvs;_
                     ..nvlIlv|~`.......... -<*IIIvv=
                    .)nvvvvv-.... .   .. ...  ~nvvvo=.
         .__i<iiiii><vvvvn(= .  . ..i>, .  ... +)nnnv..
      _i%vvvvllIIlIlIvIvvv(   .. . lnnsi  .    :)vnvnsissvisi>__.
   .<vnvvvvvvIvvvvvvvlvvII;. .     |nnvv:  . . -)lvvlIIIIlvvIvnnns=_.
.:vnvvvvvvvvvvvvvIvIvIIvv>:  . . . |{}l.    . :<lvIvvvvvvvvvvvvvvnov.
|)nvnvnvnvnvnvvvvvvvvvvvvis .            . .  =ivvvvvvvvvvvnvnvnvnvnn..
.nnnnnnvnnvnvnvnvvvnvvvvvvvnv_   .    .       :vnvvvvvvvnvnnvnnnnnnnnov;
:2oonnnnnnnnnvnvnnvnvvnvvvvvIvvi==_i..    .  .vvvvvvvvnvnnvnnnnnnnnooooc
:nnooonnnnnnnnnnvvnvvvvvvvvIvIlIvvnI-      .=vvvvvvvvnvnvnnnnnnnnnnooo2(
|{XooooonnnnnvnvnvvvvvvvIIIIIIIIv|-      .<vIlIIvIvvvvvnvvnvnnnnnooo2v(
.){2ooooonnnnvnvnvvvvvIIIIIIlll+-     . =)lllIIvIvvvvvvvnvnnnvnnooo22-`
   -{2oooonnnnnvvvvvvvlIIlllllil==_   ._iIllillllllIvvvvvvnvnnnnoooo*-
  . -."11oonnvvvnvvIIlIlliliiiiillii||iliiiiiiililllIIvvvvvnnnnn2}(~.
      . -+~!lvvnvIvIIllliiiii|i|||i||i|||i||iiiiilillIIvvvvvv}|"- .
          . ..--~++++++++~+~+~+~+-+-+~+~+-+~+~++~++++++~~~-:.. .
               . .  . . .... . . .... .. ... .. ... . . . .
 
                           Ajax.org Cloud9 IDE
                              version 0.2.0

Votre Cloud9 est prêt ! Rendez-vous alors immédiatement à l'URL suivante : http://127.0.0.1:3000 et après création de votre projet JavaScript dans le /path/to/your/workspace, vous devriez voir l'interface suivante :

Pour l'heure, si vous avez le dernier Node 0.4.0 installé, l'IDE démarre et plante instantanément. Il a fallu que je downgrade vers un ancien Node (0.2.6) pour que Cloud9 refonctionne. Il faudra donc attendre un peu pour que la version sur github soit compatible avec le dernier Node.

Pour l'instant, l'IDE dispose de quatre menus :

• File : new (file, folder...), open, save, save as, save all, settings… ;
• Edit : undo, redo, cut, copy, paste, search, search & replace, go to line… ;
• View : theme, syntax highlighting, select full line, highlight active line, show print margin… ;
• et Windows : layout, status bar, toolbar, editors, tree, debug, console, close tab, close all tabs, close all but current tab…

On voit que l'on est donc face à un menu assez standard pour un environnement de développement mais qui reste toutefois assez léger par rapport à ce qu'Eclipse, IDEA ou autres nous proposent actuellement. On peut donc faire de la recherche (avec gestion de la casse, regexp…), du remplacement ou aller directement à une ligne précise. Côté préférences, il est possible de définir que l'on retourne à la ligne à partir d'un certain nombre de caractères, si l'on affiche les fichiers cachés, le nombre d'espaces par tabulation… En ce qui concerne les thèmes, une petite dizaine sont à votre disposition. J'aime beaucoup, pour le confort de lecture, le thème Monokai :

Notez aussi qu'il existe un raccourci clavier pour toutes les actions du menu (changement d'onglet…).

Nous sommes d'accord, cela reste très bas niveau comparé aux IDE que nous avons actuellement.

Mais la puissance de Cloud9 réside dans son intégration native de Node et de pouvoir ainsi lancer et déboguer son application Node directement dans Cloud9 sans aucun plugin additionnel. Si vous retournez deux images plus haut, vous verrez des petites icônes run / debug / stop. Il vous suffit de vous placer sur votre fichier serveur JavaScript et de faire un run pour lancer le serveur Node ! La console s'active alors et l'on voit dans mon exemple que Socket.IO est prêt à recevoir des clients. On profite dès lors d'une vue variable qui affiche l'état de toutes les variables à l'endroit où d'éventuels points d'arrêt ont été posés. On peut aussi faire de l'inspection avec des expressions que l'on peut définir soi-même. On peut donc tout déboguer dans l'IDE, que ce soit un fichier client ou un fichier serveur.

Cette intégration est extrêmement bien faite et, pour le coup, bien supérieure aux autres IDE du marché. Donc si vous faites du Node, Cloud9 est fait pour vous…

Mais attention quand même, car pendant les semaines qui viennent il va falloir tolérer de revenir un peu à l'âge de pierre en termes de fonctionnalités. J'exagère à peine…

Côté points forts :

• run et debugnatif d'applications Node (définitivement la fonctionnalité phare de l'IDE) ;
• vue console ;
• vue variable avec l'état des tous les objets et la possibilité de définir des expressions spécifiques ;
• thèmes et coloration syntaxique.

Pour les points faibles (qui sont très liés à la jeunesse de l'outil) :

• pas de complétion ;
• pas de refactoring possible (renommage) ;
• peu de plugins ;
• peu de documentations pour créer ses propres plugins.

Mais attention, la roadmap est encourageante et corrigera plusieurs points faibles cités ci-dessus :

• une version en ligne ouverte à tous ;
• meilleure intégration avec git et github ;
• outils de refactoring JavaScript ;
• complétion ;
• débogage chrome.

Donc pas de panique, les points faibles seront corrigés dans les prochains mois.

Alors faut-il utiliser Cloud9 dès aujourd'hui ?

Si vous faites du développement Node, la réponse est clairement oui : l'intégration est vraiment très bonne et les points faibles s'oublient assez vite. De toute façon, JavaScript étant dynamique, on a l'habitude depuis longtemps d'avoir une complétion et du refactoring très limités.

Si vous ne faites pas de Node, tout dépendra de votre tolérance aux points faibles cités : certains développeurs ne supportent pas de ne pas avoir de complétion. Pour ceux-là, il sera difficile de s'y mettre avec la version actuelle. De même, si vous êtes un accro aux nombreuses fonctionnalités de votre Eclipse ou IntelliJ IDEA, le passage à Cloud9 vous fera certainement sourire.

Mais dans tous les cas, c'est vraiment un IDE à essayer, que vous l'adoptiez ou non !

Connaissez-vous d'autres IDE Web / JavaScript ?

Cet article a été publié avec l'aimable autorisation de Web Tambouille, l'article original (Node.js partie 2 - Cloud9 : IDE pour le développement JavaScript et Node.js) peut être vu sur Web Tambouille.

Nous tenons à remercier ClaudeLELOUP pour sa relecture attentive de cet article.