Creating an application with JHipster

Recently I talked about JHipster, a generator for Yeoman.
This generator has helped me a lot during the quick prototype of ideas as well as learning from the code.
In this post, I will go through an example on how to create an application with this generator. For this case, the application is going to consist on an Event Manager.

Example of Event manager app

Example of Event manager app

Application overview

An event manager is an application that helps manage events letting an admin to create, edit, delete and search for them. Events have basic information like name, description, date and organizer. One organizer could have created several events.

The application should expose these services on an REST api. Also, there should be a simple UI for creating, listing, updating and deleting events (A CMS for events basically)

Architecture

The architecture proposed is going to be similar to any modern webapp nowadays: fronted calling the backend. This one will be coordinating different technologies in relation to searching, storing and exposing services.

The architecture of the system will be similar to:

Modern Webapp architecture. Single node

Modern Webapp architecture. Single node

Frontend calling backend?

Jhipster generates a project where frontend and backend are on the same folder. The main project is a maven project and it represents the backend. The frontend is located under src/main/webapp. It is a good approach to separate both (in my mind, even different projects/folder structures) because:

  • As the team grows, there will be probably backend and frontend devs. Each touching their respective areas.
  • Frontend can be served with a simple http server to avoid big delays on deployments
  • They represent a point of extension which can be escalated properly. In my mind having this distinction can make the idea grow without lot of scalability issues (More to come on a future post)

Technologies used

On the frontend we will be using:

  • Angular.js for the SPA application.
  • Grunt as a task manager and for serving the html through a task on dev time.
  • Sass to give super powers to css

On the backend, depending on what we choose, it may vary from project to project. For this one we will be using:

  • Spring for the rest controlers. Spring mvc, web and data are the main subprojects used
  • Elastic search for the index to provide search capabilities
  • Postgres for the RDBMS.
  • Oauth as a way to communicate frontend and backend
  • Gatling for stress testing

Domain models

Following the description of the application and to keep it simple, it seems we are going to have the following models:

  • Event (Represents a certain event)
    • Fields: name, description, address, date
  • Organizer (Creator/Manager of the event): It is the creator of the event.
    • Fields: name, type, description, events

Of course, we can complicate this much more but we will keep it simple in this case (a more complex case will come in the future) to expose the tool and showcase some of the great features of the code produced.

Creating the application

Once we have defined our entities , we can start creating the application running the yeoman generator with the jhipster option

Once we introduce the information, the code will be generated. The generator also runs the dependency managers for node (npm) and the client components (bower). This may take a while, although if you are interested on just watching the code generated, I would recommend to hit Ctrl + C at that time: the code is already generated and it will stop all the downloads from the dependency managers.

Be familiar with the code structure

After the generation, the project is almost ready. I would recommend to see the code structure to be familiar with it. I tend to use tree for this just to have an overview.

Main interesting directories to have a look to the code are:

  • src/main/java: Backend services
  • src/main/webapp: Javascript client
  • src/main/resources/config: Configuration for the db migration schema, development and production profiles
  • src/test: all tests for the application: frontend and backend unit tests, as well as gatling stress tests

Adding entities

On a previous section we determined we would have two entities: Events and Organizer

These entities can be specified to Jhipster, so code for the backend, js and tests is generated. In order to do that we will use the subgenerator entity

Entity: Organizer

Entity: Event

Additional setup

Before running the project we will need to put some configuration:
Postgresql details

If we are using the dev profile (default), we should modify src/main/java/resources/config/application-dev.yml :

This configuration assumes you have an user ‘eventmanager‘ that will write/access data over a table called ‘eventmanager‘. I normally setup db users for each project so i can control in a fine grained level the grants the project has. Note the configuration here will not work unless you have the db setup. Other option is using H2 for development and you can forget about this setup. However, I would not recommend doing that: you normally want persistence and access to data through a client in order to see the data created, filter by it, see the schemas, etc…

  • You may need to add as well the elastic search instances. If not specified, it will create a instance in memory. For this case we are going to leave it as it is but it is highly encouraged to point to a ES instance so it is less memory on the java process and it makes easier to access and manipulate the data from ElasticSearch.

Running the app

After having created the project, you should be able to deploy the application running:

The result is an application where we can:

  • Perform CRUD operations through a clean UI
Edit event on the Events manager app

Edit event on the Events manager app

  • Have health checks about our application
Health Checks on Events manager

Health Checks on Events manager

  • Have metrics exposed (good for devops out of the box)
Metrics exposure of the JVM, cache, etc

Metrics exposure of the JVM, cache, etc

  • We also have all the entities exposed through an API which follows REST.
  • And performance/stress tests, authentication audits, searches…

Summary

I have to say, first time I created a Jhipster app and saw what was created, lot of ideas came to my mind. The beauty of it is that you have a CRUD system with a nice UI for free. The backend code is written with high standards. In my opinion and it is how I would have written it. Going through the code made me learn a lot. An interesting project for sure.

Leave a Reply

Your email address will not be published. Required fields are marked *