Accueil > Web > Tomcat, Maven, Angular, Grunt et Yeoman sont dans un bateau

Tomcat, Maven, Angular, Grunt et Yeoman sont dans un bateau

Depuis quelques mois, je développe (avec mon pote Jérémy ) une application web basée sur AngularJsangular

Au fil des itérations, nous avons :

  • Ajouté pas pal de dépendances Javascript, (d3.js, angularstrap, ..) il faut alors gérer les dépendances communes, les mises à jour, les conflits, …
  • Utilisé Twitter bootstrap en mode LESS, ce qui nous permet de définir le thème de notre application de manière centrale et facilite aussi la création de "composants" utilisables partout dans l’application
  • Utilisé CoffeeScript …. parce que la syntaxe nous plait bien. Une sorte de JavaScript un peu amélioré.
  • Concaténé les fichiers javascripts pour limiter le nombre de requêtes HTTP et la latence qui va avec.

Fans de CodeStory, nous avons adapté le mécanisme qu’il utilisent : gérer ces taches au runtime, coté serveur. Cependant au fur et à mesure que le projet avançait le code source grossit et les temps de compilation LESS et CoffeeScript devenaient désagréables et pénalisants pour le développement. Plus de 20 secondes d’attente pour tester la modification d’une feuille de style, …. ca laisse trop de temps pour twitter ! :).

Devoxx France  2012 est passé par la et pas mal de présentations autour des outils d’assemblage JavaScript : Yeoman, Grunt et Bower.

  • Bower est un outil de gestion de dépendances web (Javascript, Css, fonts, ..)
  • Grunt est le Ant de Javascript : enchainer des taches pour former une chaine d’assemblage ou de tests. Il peut servir de lanceur pour un serveur web de développement, qui surveille les changements dans les sources et recompile tout instantanément
  • Yeoman est un générateur de projets, qui permet de démarrer les projets rapidement. Il se base sur Bower et Grunt

Yeoman workflow

Enervé par une journée passée à trop souvent attendre que les transformations LESS ou Coffee se terminent, je passe une partie de mon WeekEnd à migrer nos sources vers une organisation "Yeoman", le bilan est extrêmement positif, la compilation est instantanée, la page se rafraichit immédiatement.

C’est clair, le moteur JavaScript utilisé sur JVM (Rhino.js) est beaucoup plus lent que le moteur V8 qui propulse node.js.

Maintenant, plus question de reculer, mais il va falloir résoudre plusieurs soucis :

  • Notre application doit être déployée sous forme d’un unique fichier War (je n’ose pas vous donner le nom du serveur d’app), embarquant à la fois le serveur (ressources REST) et le client (fichiers HTML, JS, CSS, …).

Au run, le client et le serveur sont donc déployés sous la même URL racine, alors qu’en développement, les fichiers "client" sont mis à disposition par un "serveur Grunt" et les ressources REST par un Tomcat local.

Pour résoudre ce soucis, nous avons paramètré le serveur web de Grunt pour que les appels REST soient délégués à Tomcat.

Pour cela : installer le module grunt-connect-proxy :

npm install grunt-connect-proxy --save-dev

Puis le déclarer dans le fichier Gruntfile.js

  • Tout le cycle de vie de l’application et de son système sont gérés par maven. Nous voulions donc intégrer le build Yeoman (Npm, Grunt et Bower en fait) dans le build maven. Pour faire rapide, le plugin antrun a fait le boulot dans un premier temps. Puis j’ai intégré tout ça dans un plugin maven, pour rendre le pom plus léger et partager ça avec une autre équipe.

L’organisation par défaut du projet est la suivante :

pom.xml
 - src
   - main
     - java
     - webapp
     - …
   - test
     - ..
 - yo
   package.json
   component.json
   Gruntfile.js
   - app
     index.html
     ...
   - test
     ...
   - dist
     ...

Et voici les modifications à apporter au pom.xml

Le bilan est très positif est nous sommes super satisfaits de cette plateforme de développement.

Le plugin yeoman-maven-plugin est disponible sur github et sur le repo maven central, j’ai également publié un projet exemple qui intègre tout ceci avec une application REST/JAXRS.

About these ads
  1. 11 juin 2013 à 16:18

    J’ai fait la même un peu différemment (je n’ai pas de sources java dans mon module embarquant le js).
    Je suis donc parti d’un projet YO dont j’ai ajouté un pom et changé les propriétés de source maven.
    J’ai aussi changé le répertoire de sortie de grunt pour aller dans le dossier target.
    J’ai finalement enlevé karma pour le remplacer par jstestdriver afin que les analyses de qualité sonar soient effectives.

    Bien joué pour le plugin, de mon coté ce sera un archetype ;)

  2. 12 juin 2013 à 14:06

    Bonjour Thomas,

    Hier j’ai essayer ton yeoman maven plugin. Il semblais exactement ce que je cherchais. J’ai commencer avec un nouveau projet dans IntelliJ avec le archetype de maven pour un webapp. Appret, j’ai configurer mon pom.xml pour inclure ton plugin. Quand j’essaye un "clean install" avec maven, le plugin me donne une erreur. J’ai aussi essayer d’aller par ma console dans le dossier "yo" dans le root de mon projet, j’ai fait "yo angular –minsafe" pour initialiser le projet. Appret quand j’essaye "clean install" avec maven encore, j’ai toujour la meme erreur.

    Bref, l’erreur que Maven produis est

    [ERROR] Failed to execute goal com.github.trecloux:yeoman-maven-plugin:0.1:build (default) on project map-trucks: Error during : npm install: Cannot run program "npm" (in directory "/Users/patrick/IdeaProjects/XTL/map-trucks/yo"): error=2, No such file or directory -> [Help 1]
    org.apache.maven.lifecycle.LifecycleExecutionException: Failed to execute goal com.github.trecloux:yeoman-maven-plugin:0.1:build (default) on project map-trucks: Error during : npm install

    Tu peut voir l’erreur au complet sur StackOverflow a ce lien http://stackoverflow.com/questions/17052813/using-yeoman-maven-plugin-fails-to-execute-build-with-npm-install-error

    Desole pour mes faute d’orthographe ;)

  3. Gaëtan Le Brun
    2 octobre 2013 à 11:27

    Cool le plugin.
    Exactement ce que je cherchais :)

  4. 3 octobre 2013 à 18:32

    Pourrait-il fonctionner avec d’autres OS que Windows?

    • 3 octobre 2013 à 21:38

      Oui, le fonctionnement a été testé avec Windows, Linux et MacOSX

  1. 13 juin 2013 à 00:30
  2. 23 juillet 2013 à 16:38

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Suivre

Recevez les nouvelles publications par mail.

%d bloggers like this: