JHipster

A Stack for The Ages – Part 1

JHipster

Putting together and bootstrapping a solid application complete with all the building blocks can be quite an undertaking at the best of times, we have to consider so many things-for example:

  • Architecture – Monolithic v Micro – services with registries and gateways
  • Database choice – Relational/NoSQL (and ‘in memory databases’ for dev &unit testing)
  • Object Relational Mapping tools (ORM)
  • Auditing/Logging
  • i18n
  • Front end Single Page Application tech choice
  • Database migrations
  • Build tools (Maven/Gradle/npm/yarn) and scripts
  • Deployment scripts e.g. for AWS, GCP, Heroku etc
  • Unit testing/BDD test frameworks
  • Integration testing
  • Performance/Load testing
  • Code coverage & quality tools
  • Filtering & Text Search
  • Caching (incl 2nd level caching)
  • Documentation e.g. Swagger & API driven development
  • Async processing e.g. via a queue/message broker
  • ‘Push’ technologies like web sockets
  • User administration/management
  • Security – Authentication and Authorization, session based / JWT etc
  • Containerization e.g. Docker / Kubernetes
  • Application usage metrics
  • Building a supporting native mobile app
  • Rapid development tools with live reloading on client and server side
  • Web optimizations – gzip/minification etc.

JHipster

JHipster, essentially a Yoeman generator, allows you to choose and scaffold a stack with all of the above options in mere seconds.

Don’t be fooled by its name, under the hood it’s using all our favorite technologies on the client and server sides:

Client side

  • HTML5/CSS3
  • Angular, React or Vue
  • WebSockets – realtime bi-directional messaging for better user experience
  • Yarn (dependency management by Facebook, faster than npm) and webpack (module bundler for JavaScript, images/css). Yarn and gulp (as opposed to Bower and gulp which the old Angularjs used to bundle with)
  • Sass – an extension to CSS allowing definition of variables
  • Browsersync – devel oper tool that allows live reloads of UI whilst developing
  • Jest – Javascript testing framework
  • Protractor – an end to end testign framework for Angular apps

Server side (typically won’t use all options)

  • Spring Boot
  • Spring Boot Dev Tools (automatically disabled when running a packaged application) – Brings to Java and Spring all the goodness that used to be wrapped by Grails. A huge productivity saver. Gives us an automatic restart of the spring context when classes change. Uses 2 class loaders one for your app and another for project jar dependencies (so that only app classes have to be reloaded) – hence fast reloads after changes. Also incorporates a ‘Live Reload’ which auto triggers a browser refresh when server side resources are changed
  • Spring security – solid security, not something you want to be building yourself
  • Spring Data (Grails/Rails like magic for querying data stores)
  • Spring Actuator – Monitors app and gathers metrics
  • SpringFox – Automated Swagger/Open API documentation for API’s built with Spring
  • Netflix OSS – for building cloud and micro service based apps
  • Consul – allows micro services to register themselves and discover others
  • Gradle / Maven – build tools
  • Hibernate – ORM tool for Java
  • Liquibase – source control for our database – revisions/releases etc
  • MySql/H2/MariaDB/PostgresSQL/Oracle/SQL Server/MongoDB/Cassandra database options
  • EhCache/Hazelcast/Infinispan – caching libraries (Hazelcast and Infinispan for distributed caching)
  • Cucumber – executable specifications for BDD testing
  • ElasticSearch – a search engine based on Lucene (search over domain objects)
  • Kafka – for real – time data pipelines and streaming applications. Horizontally scalable, fault tolerant and fast
  • Swagger – specification/d ocumentation for the apis that we develop. (Also api – first/api driven development options)
  • ELK stack – collection of ElasticSearch, Logstash (log pipeline tool allowing inputs from various sources) and Kibana (a visualization layer on top )
  • Prometheus support– monitoring and alerting toolkit
  • Thymeleaf – template engine for server generated views if needed
  • Gatling – Load testing tool
  • An integrated email service

Taking JHipster for a spin

First install JHipster with npm:

and then simply execute ‘jhipster’ and choose your weapons:

A full rundown/explanation of all the options can be read here

As we chose Kafka in our options, we need to start Kafka. Do with the provided docker compose file:

docker-compose -f src/main/docker/kafka.yml up -d

Start our app with the provided gradle wrapper:

./gradlew 

(we also have option to run in dev mode with server-side reloading (with Spring dev tools) and front end live loading with Browser sync) 

A quick tour of our generated app: 

User Management:

User Tracker:

Metrics:

Health:

Configuration:

Audits:

Log configuration:

Swagger API:

H2 development database console :

That’s quite a bit already, let’s add some entities … the good old Author / Book example, we can do this with JHipster’s entity generator:

What just happened ?

In terms of the backend, JHipster has generated : 

  • the Liquibase migration files for the new database tables and constraints (and also adds some sample data in development mode) 
  • the Spring Data/JPA ‘repository’ beans for all our basic database CRUD and filtering operations including pagination and sorting (DAO layer)
  • Elasticsearch ’repository’ beans for text search capabilities over our entities 
  • Transactional service layer beans on top of repository beans
  • RESTful Web controllers that use the services
  • DTO’s to give us option of translating/decorating our responses if we need to 
  • Validation rules that we specified
  • Swagger docs which will now be available in the Administration / API section 
  • Unit tests for generated classes (run with ./gradlew test)
  • Integration tests for generated classes (run with ./gradlew integrationTest) 

On the front end it has also generated a whole bunch of things for us including: 

  • Angular Author module including routes/components/templates for all CRUD screens etc (all wired up to use our server side restful services securely)
  • Angular Book module including routes/components/templates for all CRUD screens etc 
  • Jest unit tests for the generated components (ran with npm test) 
  • Protractor end to end tests (ran with npm run e2e), these tests actually run automated UI tests with ChromeDriver in a browser right in front of you to verify the app functions properly from a UI point of view 
  • Gatling tests 

Our new entity pages in the app (it also added some sample data):

..and of course Swagger docs for the new resources:

To sum up, we have literally bootstrapped in minutes what would usually take a LONG time to put in place.

The look and feel may not exactly be what we want right now, but we have a great starting point and can now focus on our business logic and other entities rather than infrastructure.

Unit Tests, code coverage and code quality 

Run front end unit tests:

npm test

Run front end protractor tests

npm run e2e

Run server side unit and integration tests:

./gradlew test integrationTest

At this stage we can see all the test results and code coverage inside the build/reports and build/test-results folders 

Code Quality with SonarQube 

Start a local SonarQube server with the provided docker compose file:

docker-compose -f src/main/docker/sonar.yml up –d 

SonarQube should now running at http://localhost:9001. Now export our test results to SonarQube:

./gradlew sonarqube

Refresh the browser and behold our code coverage and quality metrics 🙂 

JHipster Marketplace

Similar to Grail’s plugin system (or Ruby/Rails Gems/Plugins ), the JHipster Marketplace also has its own ever growing ecosystem of add-ons – such useful ones include:

  • Vuejs ( adds alternative Vue.js view option)
  • Kotlin – A Kotlin version of JHipster
  • Swagger2markup – creates nice looking static api docs for your api
  • Bootstrap Material UI – Material-UI integration
  • Stripe Payment – Stripe integration
  • Swagger API first – generate code from api definitions
  • Ionic – Ionic views
  • Google Maps
  • Google Analytics
  • Ignite JHipster – generates a React native app from entities
  • Blockchain – manage entities on a blockchain

That’s all for now but join me in next blog of this series where we will dispose of the tricky command line commands and instead use JHipster’s JDL Studio (JHipster Domain Language) to model and scaffold an inventory management system for our trendy imaginary startup called HipCarz 🙂 

In the meantime, here are some more JHipster resources: