Logo Ippon Technologies
JHipster dans la pratique
Front-end

JHipster dans la pratique

mpages 19 nov. 2014

Contexte:

Lorsque l’on débute un nouveau projet informatique se pose systématiquement la même question “De quel socle technique partir au regard des exigences clients ?”. Le choix du socle est un choix crucial pouvant garantir le succès du projet ou le vouer à l’échec.

Puisque ce choix est si important, ne doit-on pas systématiquement repartir sur un socle maîtrisé et utilisé par de nombreux autres projets similaires? Je pense qu’il faut se poser la question à chaque projet car les besoins et les usages évoluent au fil du temps. A titre d’exemple, il y a 20 ans la gestion du portefeuille client se faisait via un carnet d’adresses papier ou électronique. Aujourd’hui, il y a entre autre Salesforce.

Bien que les projets puissent avoir des similitudes, ils sont souvent différents par leurs exigences techniques et fonctionnelles. Cet article fait suite à un projet récemment réalisé en JHipster que nous aurons l’occasion d’aborder dans une prochaine publication.

JHipster :

JHipster est un framework de développement rapide dédié à la création de web-app. JHipster se veut performant, robuste et moderne.

JHipster framework / environnement de développement rapide:

JHipster n’est pas un framework au même titre que Spring ou Hibernate qui s’ajoutent comme une dépendance au build ou au runtime. JHipster est un assemblage d’outils pour faciliter la création/initialisation du projet, le développement et fournir des services standards d’une web app (authentification, mvvm, …). Pour utiliser JHipster il faut au minimum installer Nodejs, Yeoman, Maven ou Gradle et un JDK. Il existe également une image Docker pour tester facilement.

Le guide d’installation est simple et disponible ici : http://jhipster.github.io/installation.html

Démonstration de JHipster:

Création du projet:

Pour débuter un projet JHipster rien de plus simple, une ligne de commande et une série de questions sont posées pour nous guider dans la création du projet :

cd monProjet; yo jhipster

Capture du 2014-11-03 14:10:54.png

Suite à  13 choix pour initialiser et configurer le projet, yeoman se charge de télécharger le template projet et le configurer. Le projet résultant est directement utilisable et testable.

Pour un projet Maven :

mvn spring-boot:run

screenshot-localhost 9080 2014-11-03 15-16-01.png

Le projet ainsi créé gère 2 profils utilisateurs ayant accès à des écrans/fonctions dédiés :

  • user: info compte utilisateur, session, entité
  • admin: métrique de l’application, log, session, entité, statut de l’application

Retrouver la manuel complet de création de projet : http://jhipster.github.io/creating_an_app.html

Développement:

Choisir JHipster c’est adopter une stack technique moderne et robuste basée sur :

  • AngularJS : MVVM, gestion des interactions et traitement coté client
  • Boostrap : UX, ensemble de composant graphique et mise en page
  • Spring MVC : Communication Client/Server en Rest
  • Spring security : Sécurisation des services et gestion des authentifications
  • Accès à la base de donnée : spring-data-jpa ou bien spring-data-mongodb
  • Gestionnaire de mise à jour de base : Liquibase
  • …

Liste de tous les composants utilisés : http://jhipster.github.io/tech_stack.html

Le choix des technologies mises en œuvre dans JHipster peut être considéré comme minimaliste mais offre un très bon compromis entre fonctionnalités et contraintes.

Il est ainsi tout à fait possible d’ajouter les librairies de son choix pour avoir des composants graphiques plus riches (angular-strap, angular-ui, ng-table … ou n’importe quel module présent sur le site http://ngmodules.org/).

Ce qui est vrai pour la partie graphique l’est également pour la partie java. Seules les briques techniques pour la sécurisation et la communication sont imposées. Libre à chacun d’utiliser Lombok  pour simplifier ses pojos, d’utiliser Guava  pour les collection, Selma pour le mapping de pojo …

JHipster, c’est également un générateur de code pour faciliter la création d’écran type CRUD et standardiser l’organisation des composants. (Cf. /2014/05/06/devoxxfr-2014-sauver-son-code-angularjs/)

JHipster propose aujourd’hui 2 générateurs :

Exemple:

yo jhipster:entity author

Capture du 2014-11-03 15:29:44.png

A l’issue de la génération les classes java et composants html et js sont créés.

Everything is configured, generating the entity…
create src/main/java/fr/ippon/demo/jhipster/domain/Author.java
create src/main/java/fr/ippon/demo/jhipster/repository/AuthorRepository.java
create src/main/java/fr/ippon/demo/jhipster/web/rest/AuthorResource.java
create src/main/resources/config/liquibase/changelog/20141103143142_added_entity_Author.xml
create src/main/webapp/views/authors.html
create src/main/webapp/scripts/author/router_author.js
create src/main/webapp/scripts/author/controller_author.js
create src/main/webapp/scripts/author/service_author.js
create src/test/java/fr/ippon/demo/jhipster/web/rest/AuthorResourceTest.java

Ces générateurs sont clairement un gain de productivité, car ils produisent une matière directement utilisable et testable. Le développeur peut alors se concentrer sur les adaptations à faire : implémenter les règles de gestion, personnaliser l’écran…

Tips : en cas de retour arrière il suffit de supprimer ses ressources et supprimer l’import dans le fichier index.html

Attention: JHipster est un outil de génération oneshot, il n’y a pas de boucle de retroaction et il n’est pas possible actuellement d’utiliser ses générateurs pour modifier l’existant.

Services :

A travers la stack proposée par JHipster et via les choix faits sur les différents générateurs, JHipster propose entre autres les services suivants :

Sécurité:

  • gestion de l’authentification basée sur un cookie ou bien en base de donnée (Cf. choix lors de la génération du projet)
  • sécurisation de service rest
  • gestion d’inscription / validation utilisateur, débrayable (changement de la page de login, et modification de la configuration Spring-Security) par exemple pour s’intégrer sur un LDAP d’entreprise.

Productivité:

  • fonction de CRUD native, 0 ligne de code mais offrant la possibilité d’ajouter facilement des requêtes personnalisées sans écrire de SQL : par convention  de nommage (http://docs.spring.io/spring-data/jpa/docs/current/reference/html/#jpa.query-methods)
  • moteur de template HTML avec thymleaf : des exemples dans la partie mail de souscription
  • possibilité d’utiliser grunt pour avoir du livereload : possibilité d’éditer la partie IHM et constater en temps réel ses modifications
  • un agent pour améliorer la prise en compte à chaud du code java et permet ainsi d’éviter de perdre du temps à redéployer ses modifications
  • gestion de plusieurs profils de packaging et d’exécution. Cela permet notamment d’utiliser une base de donnée mémoire volatile pour les TU, une base de donnée physique pour les dev & prod.

Performance :

  • gestion de plusieurs profils de packaging et d’exécution. Le mode production optimise les ressources statiques et met en oeuvre différentes optimisations spécifiques.
  • gestionnaire de pool JDBC : https://github.com/brettwooldridge/HikariCP – cela permet d’avoir un war autonome pour l’accès à la base et indépendant du conteneur d’exécution. De plus ce pool offre des performances très intéressantes.
  • une gestion de cache de niv 2 pour JPA via ehcache sur environnement non distribué ou bien hazelcast en mode distribué  (Cf. choix lors de la génération du projet)

Le petit plus JHipster:

  • écran de supervision technique : métriques d’utilisation (mémoire, cache, session), statut de l’application
  • war autonome pouvant tourner sans conteneur (cf. http://jhipster.github.io/production.html)

JHipster sur un projet:

JHipster est un vrai gain de temps pour la création d’un nouveau projet via ses générateurs et permet d’initialiser le socle de développement rapidement.

Une fois cette phase terminée, on apprécie avant tout les choix techniques effectués permettant de développer et avancer dans le projet sans contrainte.

Boostrap est un vrai accélérateur grâce à ses nombreux composants répondant à la majeure partie des besoins pour un site web et quand cela ne suffit pas il suffit de chercher sur ng-module. La plupart des composants ng-module étant également basés sur Boostrap, l’intégration est naturelle et la personnalisation Boostrap s’applique également à ces composants.

A titre d’exemple : nous avions besoin de tableaux triables et filtrables. Cela a été facile grâce à ng-table. Nous avons utilisé Angular-strap pour avoir de meilleurs datepicker ou encore ng-upload pour gérer l’envoi de fichier et prendre en compte IE9 (qui ne gère pas le File API).

AngularJS pour sa part est un framework Javascript très puissant et plutôt facile à prendre en main. Le modèle fourni par JHipster basé sur des modules tels que angular-routerui, angular-cookie, angular-translate… permet d’avoir un projet bien découpé et d’avoir accès à de nombreuses fonctionnalités.

La communication en REST JSON est des plus naturelle, que ce soit en JS (angular) ou bien Java grâce à un mapping automatique JSON <-> Object (framework Jackson).

Le reste des développements Java est des plus standard avec Spring Core et JPA.

Conclusion

A l’heure où cet article est écrit JHipster vient de produire la 1.6. Hors lors du projet nous avions développé avec la version 1.0 fraîchement sortie. Certaines fonctionnalités actuellement présentes nous auraient été bénéfiques (possibilité de définir les attributs des entités par exemple).

Non contents de certains comportements nous avons pu sans problème faire les adaptations nécessaires (gestion d’authentification via token http), apporter quelques fonctionnalités transverses (amélioration de la gestion des droits coté client) et corriger certains bugs. Comme JHipster est un projet Open-Source, ces modifications/corrections sont partagées et discutées sur GitHub (exemple : https://github.com/jhipster/generator-jhipster/pull/703).

JHipster est une très bonne stack HTML5 + Java et bien que moins populaire que Spring Grails ou Play Framework, JHipster sait se distinguer en restant simple (pas de plugin, pas de Groovy, Scala ou de convention spécifique) et  peu contraignant (l’architecture technique est suffisamment simple pour l’étendre et l’adapter à tout besoin).

Liens de référence :

Author image
mpages