Introduction to JHipster

Developing a production grade, cloud-ready modern web app with JHipster

By P. Mohan

www.pmverma.com
Agenda

Introduction
Section I : Installation and application generation
Section II : Working with generated application
Section III : Testing the generated application
Section IV : Going to production
Section V : Tooling & sub-projects
Section VI : Getting Help
Section VII : Q&A
Introduction

Spring Boot + Angular JS application generator

Fully Open Source

+250 contributors

+5300 Github stars

+320,000 installations

+100 companies officially using it

Server side frameworks

Spring Boot Spring Security Netflix OSS Maven Gradle

Consul Kafka

Liqui Base Hibernate MySQL PostgreSQL Oracle MongoDB

Cassandra

EhCache Hazelcast Elastic Search Gatling Cucumber ThymeLeaf

Swagger

Docker Kubernetes ELK Stack

Client side frameworks

HTML 5 CSS3 Bootstrap AngularJS JQuery Websockets

Bower Gulp Sass BrowserSync Karma

Protractor
Section I Installation & Application
Generation
Installation

Installation with NPM

● Alternative installations: Docker, JHipster Devbox

$ npm install -g generator-jhipster@3.9.1

Creating an application

Questions & answers to generate an application tailored to your needs

● Questions depend on the previous answers

● Validation & help to avoid mistakes

$ mkdir myapp && cd myapp

$ yo jhipster
IDE configuration

Intellij IDEA, Eclipse, Netbeans

○ Specific “IDE” profile for MapStruct

● Visual Studio Code

○ Usage with Maven/Gradle or JHipster App

What has been generated?

● Spring Boot application

● AngularJS application

● Liquibase changelog files

● Configuration files
The generated screens: security

● Several generated screens

○ Login, logout, forgot password…
○ Account management
○ User management
● Useful for most applications
○ Pages must be tuned depending on business needs
○ User roles will be added/extended
● Provide also good examples of working screens
○ Forms, directives, validation...
The generated screens: administration

● Administration screens
○ Monitoring
○ Health
○ Spring Boot configuration
○ Spring Security audits
○ Log management
● Very useful in production
● Will probably be a separate module in JHipster 4
Maven / Gradle usage

● Maven/Gradle wrappers

● Available goals: clean, compile, run, test...

● Specific profiles: “dev” and “prod”

SQL Database support

● Can use different development & production databases

● H2 disk-based and in-memory

● Supported databases: MySQL, MariaDB, PostgreSQL, Oracle

● Spring Data JPA

● HikariCP
Liquibase

● Liquibase manages database updates

○ Using changelogs
● Great for working in team
○ After a “git pull”, your database is always up-to-date!
● Tables, relationships, data are all created by JHipster at generation time,
and applied when the application starts
Hibernate 2nd level cache

● 3 options
○ No cache
○ Ehcache
■ Default for monoliths
■ Upgrade soon to Ehcache 3
○ Hazelcast
■ Default for microservices, with a specific configuration for clustering
● Automatically monitored
○ Production defaults are low, should be tuned depending on your business/hardware
MongoDB

● Alternative to SQL databases

● Faster startup, works great for cloud applications

● Spring Data MongoDB

● Changelogs are managed by Mongobee

Cassandra

● Another alternative to SQL databases

● Custom implementation using the DataStax Java Driver

● Custom changelog implementation

● Spring Boot Cassandra support comes from JHipster!

Elasticsearch

● Optional add-on to the other options

○ Very popular

● Use Spring Data Elasticsearch

● Add server-side and client-side code for searching entities

● Uses by default an embedded server in development, we recommend the

Docker image for faster turnaround

Kafka

● Optional add-on

○ For handling very large amount of events

○ Some people use it to handle load and failover with microservices

● Use Spring Cloud Stream

● Simple integration for the moment

Security

● Session-based authentication
○ Stateful
○ Classical “form-based” authentication with Spring Security
○ Improved remember-me over the standard Spring Security implementation
● OAuth2
○ Stateless
○ Needs a specific back-end, only works with SQL and MongoDB
● JWT
○ Stateless
○ Very good for microservices
Internationalization

● i18n is managed by Angular Translate on the client-side

● “normal” Java i18n is used on the server-side

● 26 langages out-of-the-box, easy to extend

Swagger

● Automatic documentation for all REST APIs

● Executable and easy-to-use

● Great for AngularJS developers (no need to read the Spring MVC REST

code!)
WebSockets

● Optional add-on

● Uses Spring WebSockets

○ Easy to integrate

○ Hard to scale on several nodes

● Sample generated screen to track users live

○ Tracks who is logged in, their current screen, all in real time
Creating an entity

● The entity sub-generator is our more complete and more popular

sub-generator
● Creates an entity, with full CRUD support
○ Liquibase changelog
○ Spring Data JPA repository
○ Spring MVC REST endpoint
○ AngularJS router/controller/service/view
○ i18n
○ Tests
● Tip: use Git to save your work before/after running a sub-generator!
Creating fields

● Fields are created one after the other

● Lots of types are available
○ Types depend on the underlying database (SQL/MongoDB/Cassandra)

● Validation is available
○ AngularJS validation on the client side

○ Bean validation used by Spring MVC REST and Hibernate

○ Database constraints
Managing relationships

● Relationships only work for SQL databases

● All JPA relationship types are supported

○ one-to-one, many-to-one, one-to-many, many-to-many

● Unidirectional and bidirectional relationships

● Multiple relationships on the same 2 entities

The “User” entity

● Specific entity, generated with the core application

○ Used by Spring Security
○ Can be extended
● Supports many-to-one, many-to-many (non owner side) and one-to-one
(non owner side) relationships
● Tip: some people do a one-to-one relationship to a specific “CustomUser”
entity, which they modify/extend (modifying the User entity can cause
issues when upgrading the application)
Using DTOs

● DTOs = Data Transfer Objects

● Very useful in business applications, where basic CRUD entities are not
enough
○ Add business logic
○ Separate the view layer from the persistence layer
○ Helps with lazy-loading
● Uses MapStruct to generate the mapping
○ Java annotation processor
Using a service layer

● Very useful in business applications, where basic CRUD entities are not
enough
○ Like DTOs
○ Usually both options are selected at the same time, but it depends on what you want to do
● Service beans are Spring beans: security, transactions, monitoring are
available
● Option to use just an implementation, or an interface + an implementation
Pagination options

● 3 pagination options are available:

○ Simple pager
○ Pagination links
○ Infinite scroll
● Depends on your business needs and database capabilities (Cassandra
can’t do pagination links)
● Very useful if you have data (all situations except reference tables)
○ Common pitfall is to do Gatling tests on non-paginated entities
Re-generating an entity

● The entity sub-generator can re-generate an existing entity

○ Just call it again with the entity name

○ Fields and relationships can be removed/added

● Tip: advanced users modify directly the .jhipster/*.json files

○ Internal JHipster configuration files

○ In fact just the answers serialized in JSON - easy to understand and modify if needed
Upgrading an application

● Upgrades can be done automatically with the Upgrade sub-generator

● Use Git branches to generate the application with a different version
● Automatic merge if there is no problem
● Conflicts must be resolved manually

$ npm install -g generator-jhipster@3.11.0

$ yo jhipster:upgrade
Section II Working with the Generated
Application
Setting up a good development environment

● “Developer Experience” is very important for JHipster

○ Lots of effort to make your development environment great

● Hot reload should work everywhere

● IDEs should work automatically

● Docker Compose for all 3rd-party tools, so they are easy to manage
Spring Boot devtools

● Automatically reloads the application when a compilation occurs

○ The application classloader gets refreshed
○ The JVM and third-party libraries are not refreshed
● Hot reload is very quick: 2 to 4 seconds depending on your setup
● Liquibase being managed by JHipster, the database schema is also
automatically updated
● Tip: configure your IDE to do automatic compilation, and everything is
updated automatically!
Spring Data JPA

● Easily generate SQL requests from Java method names

○ List<Product> findByOrderByName()
○ List<Item> findByUser(User user)
○ List<Customer> findByLastName(String lastName)
● Tip: type the method name in the REST controller that uses it, and then use
your IDE to automatically generate the method
Fluent methods in JPA entities

● JPA entities generated by JHipster have fluent methods

● Allows to chain method calls on entities

Post post = new Post()

.title("Fluent methods are cool!")
.createdOn(LocalDate.now())
.addPostComment(postComment);
Liquibase

● Changelogs are generated by JHipster, and can also be hand-coded

● Another solution is to use the Maven “liquibase:diff” goal
○ Modify the JPA code
○ Compile the application
○ Run “./mvnw liquibase:diff”
○ This will generate a changelog to update your database schema
○ Add the resulting changelog to the master changelog
● Changelogs are applied at application start-up (also works with Spring
Boot hot reload)
Gulp & BrowserSync

● Gulp allows to run many JavaScript tasks: minification, injection, tests…

● One of its main usage with JHipster is to run BrowserSync
● BrowserSync has 2 great features
○ Synchronizes clicks, scrolls and inputs on different browsers: great for testing with several
screen resolutions!
○ Reloads the browser(s) when a file changes: great for doing web application development!
● Tip: combined with Spring Boot devtools and Liquibase, a correct JHipster
development environment should have everything hot reloaded
automatically!
Bower

● Installation and update of JavaScript/CSS libraries for the client-side

application
● If BrowserSync runs in the background, libraries are automatically injected
in the index.html page (otherwise, do a “gulp inject” to force the injection)
● Tip: in JHipster 4.0, Bower should disappear, and will be totally replaced by
NPM
> bower install bootstrap-material-design#0.3.0 --save
Profiles

● JHipster manages profiles both at runtime (Spring profiles) and at build

time (Maven/Gradle profiles)
● 2 main profiles
○ “dev” for development: focuses on great Developer Experience
○ “prod” for production: focuses on the best performance for production
● Other profiles are for specific situations
○ “swagger” Spring profile to enable/disable Swagger
○ “no-liquibase” Spring profile to disable liquibase
○ “ide” Maven profile to help configuring the IDE (for MapStruct usage)
Working with AngularJS

● JHipster follows the John Papa style guide

○ Official guide, endorsed by the AngularJS team
○ Lots of rules and best practices, clearly explained
○ Gives a migration path to AngularJS 2
● JHipster uses a few third-party libraries
○ UI Router for routing
○ Twitter Bootstrap
○ Datepicker, infinite scrolling
● All other libraries are supposed to be installed easily through Bower
A word on Angular 2

● Angular 2 support is coming soon in JHipster!

○ Work is 90% ready on the main generator
○ The entity sub-generator is not migrated yet
○ We will have a new option to generate either an AngularJS 1 or an Angular 2 project
○ Both options will live next to each other
○ Focus will shift to Angular 2 as more projects adopt it, and as it becomes more stable
● This will be the main focus of JHipster 4.0
Customizing Bootstrap

● JHipster uses the “standard” Twitter Bootstrap classes

● They can be overridden as usual
○ Update the main.css file if using CSS
○ Update the main.scss if using Sass
● It’s also easy to install a specific theme (often automatic just using Bower)
● Bootstrap 4 support is coming in JHipster 4.0
Section III Testing the Generated Application
Spring integration tests

● JHipster provides JUnit and Spring integration test support

○ Integration tests are fast as the Spring context and the database are re-used over each
test
○ Mockito is used to mock dependencies
○ @WithMockUser from Spring Security is great
○ Yes, using field injection with Spring is annoying for tests!
● The entity sub-generator generates specific tests for each CRUD operation
Karma.js

● Unit tests are generated for the main application and for the entities

○ Uses mock to simulate the back-end

Gatling

● Available as an option
● Generate load testing simulations for CRUD entities
○ Uses the 4 CRUD methods
○ Must be tuned depending on your real business needs
○ Generates a great dashboard
○ Don’t forget to use pagination!
● Gatling tests can be run directly from Maven
● Simulations are developed with a Scala DSL
○ Not very complex to use
○ Scala compilation is slow at startup!
Cucumber

● Available as an option

● Behavior-driven tests becoming more and more popular

● Simple integration at the moment

○ Might not evolve as we can’t generate business code

Protractor

● Great way to do integration testing with AngularJS

○ End-to-end test of the application
○ Needs a fully working back-end server
○ Uses by default a Firefox browser, which often leads to issues
Code quality with Sonar

● Sonar gives a complete quality report of the application

○ Java and Spring code
○ JavaScript code
● JHipster provides a Docker Compose configuration with a fully working
Sonar server
$ docker-compose -f src/main/docker/sonar.yml up -d
$ ./mvnw clean test sonar:sonar
Continuous integration

● Travis configuration is generated

○ Full test of both the back-end and the front-end
○ Similar to what the JHipster team uses to test the generator itself!
● Jenkins 2 configuration is generated
○ With complete documentation on the JHipster website for Jenkins 1 and 2
Section IV Going to Production
JHipster production build

Generates an executable WAR file with production options

○ Minified front-end
○ GZip filter
○ HTTP cache headers

$ ./mvnw clean package -Pprod

$ docker-compose -f src/main/docker/mysql.yml up -d
$ cd target
$ ./myapplication-0.0.1-SNAPSHOT.war
Monitoring JHipster

● Standard Spring Boot Actuator endpoints are available

○ With a UI!
● Dropwizard Metrics is configured
○ JVM & HTTP request metrics
○ Spring Beans metrics
○ Ehcache metrics
● Logs can be sent to an ELK server
○ More about the JHipster Console in the “microservices” section
Deploying to Cloud Foundry

● Specific sub-generator to deploy to Cloud Foundry

● Uses the “cf” command-line to deploy the application, bind a database
service, etc.
○ Can only support services available on your Cloud Foundry marketplace

$ yo jhipster:cloudfoundry
Deploying to Heroku

● Specific sub-generator to deploy to Heroku

○ Developed by Joe Kutner from Heroku
● Uses the “heroku” command-line to deploy the application, bind a database
service, etc.
Other deployment platforms

● AWS

● BoxFuse

● Application servers

● Executable WAR
Section V Tooling & sub-projects
JDL

● JHipster Domain Language

● Makes generating complex entity models easily
● Supports all entity sub-generator features
○ Field types
○ Validation
○ Relationships
○ DTOs
○ Service
○ Enumerations
○ ...
DL Studio

● Open Source Web application

○ Available at http://jhipster.github.io/jdl-studio/
● Auto-completion and validation
● Sublime Text keymap
● Graphical view
● Share as URL
● Import/export models
JHipster IDE

● IDE support for JDL

○ Eclipse, IDEA, Visual Studio Code
○ Still in Beta
Modules

● JHipster modules gives all the power of JHipster sub-generator to

everyone
○ Modules are independent from JHipster
○ Modules are Yeoman generators, using the JHipster public API
○ Release when you want, use the license you want…
● If you want your module to be public, you can publish it on the JHipster
marketplace
○ Available at https://jhipster.github.io/modules/marketplace/
○ 24 modules available today
○ Free for everyone, as always with JHipster!
Section VI Getting help
Community help

● #1 rule: everything is public

● Questions are on StackOverflow with the “jhipster” tag

● Bugs & feature requests are on our GitHub issue tracker

● Please follow our contributing guidelines if you want help!

 References:

https://jhipster.github.io/

https://jhipster.github.io/video-tutorial/

http://www.slideshare.net/julien.dubois/devoxx-being-productive-with-jhipster

http://www.slideshare.net/KileNiklawski/how-we-built-a-job-board-in-one-week-
with-jhipster
Questions?
Answer!