AngularJS : développement de projet et intégration continue

Pour bien démarrer un projet avec AngularJS vous trouverez sur GitHub : angular-seed, un squelette de projet bien pratique. Une bonne approche est de créer un fichier js pour chaque type d’objet : directives, services, filters, controllers. Dans chacun de ces fichiers les objets sont déclarés au sein d’un ou plusieurs modules comme je le précisais dans mon article précédent.

Pour mettre en oeuvre des tests il faut pouvoir les exécuter facilement. Angular-seed propose des scripts à lancer manuellement. Les tests sont à créer dans le répertoire test sous forme de fichiers js. Le répertoire config permet de définir le contexte des tests et notamment les dépendances. En l’état c’est intégrable dans Jenkins, la team AngularJS l’utilise d’ailleurs comme le montre cette vidéo.

Pour les dépendances c’est pas encore ça. Bien qu’il existe un plugin maven pour gérer des dépendances JavaScript, il ne convient que dans un contexte de développement purement JavaScript. A l’éxecution dans une page HTML il faut reprendre ses dépendances dans les balises <script>.

A l’inverse require.js permet de charger dynamiquement des dépendances JavaScript, et je vous invite à vous inspirer du projet AngularFun pour voir une implémentation avec AngularJS, mais ne s’appuie pas sur un repository et les libs JavaScript doivent être récupérées et déclarées manuellement.

Bref c’est pas encore aussi simple qu’en Java dans Eclipse ou Intellij avec le plugin maven qui vous gère vos dépendances et démarre vos applications. Il y a là plugin à développer pour améliorer nos IDE aux développements JavaScript/HTML/CSS. Les morceaux sont la ils faut les assembler 😉

Vous retrouverez sur le blog de Romain Linsolas une mise en oeuvre de maven avec JavaScript intégrant la gestion des tests avec Jasmine.

Enfin pour ceux qui utilise node.js et le framework web Express, une version d’angular-seed est disponible : angular-express.

J’attends avec impatience la sortie de yeoman.io dont l’objectif est justement de permettre l’intégration continue d’un projet HTML/CSS/JavaScript. yeoman.io ne réinvente pas la roue et s’appuie sur des outils existants (GruntTwitter BootstrapPhantomJSJasmineNodeHTML5 BoilerplateMochaCompass) en les combinant entre eux.

J’ai entendu dire que chez FullSix ils auraient mis en place une intégration continue avec maven pour leur projet JS mais je laisse mon acolyte blogueur vous présenter ça …