Comment j’ai démarré avec AngularJS et Karma…

10 June 2013

Depuis quelques semaines, j’essaye de réellement sortir de ma zone de confort, et découvrir autre chose que .NET et C#. C’est ce que j’avais déjà entrepris en fin d’année dernière en développant une application que nous avons utilisée pour l’Agile Tour Montpellier en Java avec Play Framework. Je pourrai vous faire un retour sur cette expérience un peu plus tard. En attendant, j’ai souhaité poursuivre cette ouverture en redécouvrant JavaScript, et essayer d’avoir un aperçu de l’état de l’art de la plateforme.

Et je dois avouer que prendre le train en route n’est pas chose aisée. Quel foisonnement ! C’est incroyable de voir toutes les initiatives prises pour permettre le développement d’applications entières en Javascript, même côté serveur. Il est loin le temps où, peu avant l’avènement de frameworks comme jQuery, beaucoup de gens enterraient ce langage que peu de monde ne comprenait et n’avait vraiment envie de maîtriser. On peut se rendre compte de cette effervescence par exemple sur le site JSDB.io, ou encore à travers cette enquête de InfoQ. Difficile pour un néophyte, ou même quelqu’un qui redécouvre, de se faire une idée. En cherchant un peu, je me suis rendu compte que beaucoup de monde disait du bien d’AngularJS. J’ai donc décidé d’y investir du temps, et de monter une plateforme de développement.

Oui j’emploie le mot plateforme, pour désigner l’environnement de développement et les outils ou librairies pour faire du test et de l’intégration continue. Difficile pour moi d’évaluer quelque chose sans se poser ces questions, puisque écrire un test est la première chose à faire :). Avec AngularJS, votre plateforme peut être assez simple. Si vous n’écrivez pas de tests, elle peut même se résumer à un bon vieux Notepad, gedit ou vim. De mon côté, je me suis laissé tenter par l’expérience WebStorm, IDE Javascript conçu par l’excellent JetBrains, auteur d’IntelliJ et ReSharper. Côté librairie de tests, j’ai cherché avant tout de quoi avoir un feedback important. J’ai donc opté, pour le moment, pour Karma, ex testacular, un runner très intéressant. Enfin, pour les librairies, j’hésite encore entre QUnit, Mocha et Jasmine pour les tests unitaires, et entre Jasmine, Angular-scenario et CasperJS pour les tests UI.

En cherchant à mettre en place cette plateforme sous Ubuntu, j’ai rencontré quelques difficultés pour traverser la jungle des outils. Je vous propose donc ici un feedback de la mise en place de la plateforme jusqu’au premier test vert 🙂

Préparation

Sous ma version d’Ubuntu (12.04), relativement vierge, j’ai eu plusieurs outils à installer au préalable, à coup de apt-get : Curl, Git et Nasm.

apt-get install nasm
apt-get install curl
apt-get install git

Rien d’insurmontable. Je vous passe également l’installation de WebStorm. Les détails sont indiqués ici. D’ailleurs la plupart d’entre vous travaille déjà avec Sublime ou d’autres environnements.

NodeJS et Ruby

La plupart des outils que j’ai utilisé ont besoin de Ruby et NodeJS pour s’exécuter. Cela ne concerne que les outils, pas nécessairement le code que vous allez écrire. Pour installer ces outils je suis passé par RVM et NVM, ce qui m’a été conseillé. Pour NVM, la raison réside surtout dans le fait qu’au moment où j’ai réalisé ces actions, la suite d’outils Yeoman n’était pas compatible avec la version 0.10 de NodeJS.

\curl -#L https://get.rvm.io | bash -s stable --autolibs=3 --ruby

curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Je ne suis pas linuxien pour un sou. Donc pour une raison qui m’échappe, NVM n’est pas accessible une fois installé. Je n’ai pas trouvé d’autres moyens que de devoir recharger mon bash_profile manuellement. Au passage, je vous conseille de copier la ligne correspondant à NVM de votre bash_profile dans votre bashrc. Si j’ai bien compris, c’est nécessaire dans le cas d’une authentification autre que par le shell (donc typiquement par gnome).

. ~/.bash_profile

Il reste à installer la bonne version de Node. Comme je le disais, pour ma part j’ai dû installer la 0.9 pour faire fonctionner mes outils, alors que la 0.10 était déjà disponible. Vérifiez de votre côté si l’upgrade n’a pas été fait (notamment pour Yeoman).

sudo nvm install 0.9
nvm use 0.9

Gardez bien à l’esprit la dernière commande, car il vous faudra la réexecuter pour faire fonctionner vos outils à chaque ouverture d’un shell.

Installation de Yeoman, Karma et des templates

La suite consiste à installer l’ensemble des outils que l’on va utiliser pour développer notre application : Yeoman, Karma et des templates de génération de code.

Yeoman est une suite de 3 outils très pratiques et complémentaires pour aider dans son développement en JS. Yo, le premier outil, est un bootstraper. Il s’appuie sur des templates pour bootstraper l’application que vous allez développer. Il vous initialise les répertoires, les dépendances, un premier morceau d’application, des fichiers de configuration, et tout un tas d’autres fichiers comme le robots.txt, le 404.htm ou le .gitignore… Bref, des choses en moins à se farcir ! Bower est le 2e outil de la suite, réalisé par Twitter. Ce n’est ni plus ni moins qu’un gestionnaire de packages, spécialisé dans le front-end. Il s’appuie sur git et sur un fichier de manifeste pour aller chercher la bonne version du package que vous souhaitez installer. Enfin, le dernier outil, Grunt, est un runner de tâches spécialisé également dans le front-end. En une commande, il peut exécuter toutes les tâches de compilation de coffeescript, de compass, de concaténation et minification de CSS et JavaScript, d’exécution des tests, d’ouverture d’un petit serveur de test, etc. Tout bonnement indispensable !

npm install -g yo grunt-cli bower

Karma, c’est l’ancien Testacular, un runner de tests bien pratique pour tester son application sur différents navigateurs. Personnellement, j’utilise sa fonction autowatch qui permet d’exécuter tous les tests à l’enregistrement d’un fichier : feedback rapide garanti ! Enfin, les templates de génération sont generator-angular et generator-karma. Avant d’installer ces derniers, vous devez créer votre répertoire de projet et aller dedans. A l’heure de ces lignes, l’installation en mode global par NPM ne fonctionne pas (remplacez my-new-project par ce-que-vous-voulez) :

npm install -g karma
mkdir my-new-project && cd $_
npm install generator-angular generator-karma

La dernière chose à installer, mais optionnellement, c’est Compass. Voilà la ligne de commande :

gem update --system
gem install compass

Bootstrap de votre application

Et c’est parti pour le bootstrap de votre application ! Vous allez donc lancer la commande yo et suivre le wizard (remontez d’un cran si vous êtes dans le répertoire de votre projet) :

yo angular my-new-project

A vous de suivre ensuite le wizard comme vous l’entendez. Personnellement, j’ai utilisé Bootstrap et Sass/Compass, pour voir :). Certaines dépendances Angular ne sont pas incluses dans le bootstrap. Il faut donc les installer explicitement si on souhaite les utiliser :

bower install angular-cookies
bower install angular-loader
bower install angular-resource
bower install angular-sanitize

Il est possible également de rencontrer un bug lors de l’utilisation d’angular-mocks. On peut, de la même façon, forcer son installation avec bower.

Le projet est maintenant généré ! Il n’y a plus qu’à l’ouvrir dans son IDE. Pour ma part, j’ai utilisé WebStorm pour faire tourner une tâche Karma en autowatch. Ainsi, la suite de tests s’exécute à l’enregistrement d’un fichier. Feedback total ! Pour cela, il faut déclarer une tâche de type Node, et la configurer pour faire exécuter la commande :

karma start karma.conf.js

Il ne faut pas oublier de modifier le fichier de conf karma.conf.js et passer la configuration à autowatch. A ce moment-là de l’installation, on a bien avancé ! Il ne reste plus qu’à tester l’application avec Grunt. Soit avec le paramètre test, pour lancer les tests, soit la commande server, pour tester l’application dans un navigateur.

grunt test
grunt server

Voilà donc pour cette installation ! Comme je le disais, j’ai voulu documenter ici tout ce que j’ai été amené à faire pour réaliser cette installation. Je ne prétends pas dire que c’est la meilleure façon de fonctionner. D’ailleurs, à ce sujet, si vous avez des remarques, n’hésitez pas à utiliser les commentaires, c’est fait pour ! J’ai notamment le problème de devoir relancer mon bash_profile à chaque ouverture (ou presque) d’un terminal, pour pouvoir réutiliser la commande NVM… J’avoue que c’est un peu pénible, et si vous avez une solution, ça m’arrangerait !

Bon courage ! Notamment à @vinyll, qui avait pas mal galéré lors de Mix-IT 🙂