Building modern Web apps with JHipster

 

@garethderioth

 

Medellín, May 28, 2015

 

What the hell is JHipster?

"JHipster is Yeoman generator,

used to create a

Spring Boot  + AngularJS project"

 

Yeoman

Sprint Boot

AngularJS

maven

Grunt

Bower

Karma

Bootstrap

SPRING MVC REST

Liquidbase

JPA

Spring Data JPA

MongoDB

Cassandra

Ehcache

Spring Security

Thymeleak

Metrics

Modern Web Application Development.

A clean front-end with the latest HTML5, CSS3, JavaScript frameworks.

 

A robust and high-quality back-end, with the latest Java, Caching, Data access technologies.

 

Automating repetitive tasks to save time.

 

Security and performance in mind.

YEOMAN

Scaffold out a new application, writing your build configuration with Yo.

 

Run tasks for build, preview and test with Grunt.

 

Manage dependencies for the web with Bower.

 

npm install -g yo
npm install -g generator-jhipster

yo jhipster

yo jhipster:entity foo
yo jhipster:service bar
yo jhipster:languages

Grunt

Helps run tasks

For development, it will allow you to have "live editing" of your code, run your tests in the background.

 

For production, it will compress and optimize all your resources, compile your SASS code.

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        uglify: {
            build: {
                src: "main.js",
                dest: "build/main.min.js"
            }
        },
        jshint: {
           all: ["**/*.js"]
        }
    });

    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.loadNpmTasks("grunt-contrib-jshint");
    grunt.registerTasks("deafult", ["jshint", "uglify"]);
};
// JHipster
grunt serve
grunt test

Gulp

Bower

Manage your front-end packages

 

You can search, install and update your JavaScript libraries.

 

It provides a huge number of libraries.

The ugly old way

  • Hmm, that library is six months old? Better update.
  • Search the official site.
  • Download the library.
  • Copy from  ~/Downloads folder.
  • Paste it to app folder.
  • Wire in with script tags.

The new fancy way

bower search angular
bower install angular --save
bower list

What else in the front-end?

Karma

 

Karma runs unit tests on your JavaScript code.

 

AngularJS

 

The most popular JavaScript framework.

 

Twitter Bootstrap

 

Great CSS, JavaScript framework for responsive web apps.

 

And the Back-end?

A complete Spring Application

 
  • Spring Boot for easy application configuration.
  • Maven or Gradle configuration for building, testing and running the application.
  • "development" and "production" profiles (both for Maven and Gradle).
  • Spring Security.
  • Spring MVC REST + Jackson.
 
  • Optional WebSocket support with Spring Websocket.
  • Spring Data JPA + Bean Validation.
  • Database updates with Liquibase.
  • Elasticsearch support if you want to have search capabilities on top of your database.
  • MongoDB support if you'd rather use a document-oriented NoSQL database instead of JPA.
  • Cassandra support if you'd rather use a column-oriented NoSQL database instead of JPA.
1

Ready to go into production

 
  • Monitoring with Metrics.
  • Caching with ehcache (local cache) or hazelcast (distributed cache).
  • Optional HTTP session clustering with hazelcast.
  • Optimized static resources (gzip filter, HTTP cache headers).
  • Log management with Logback, configurable at runtime.
  • Connection pooling with HikariCP for optimum performance.
  • Builds a standard WAR file or an executable JAR file.
3

Let's build!

 

Building modern Web apps with JHipster

By Guillermo Rodas

Building modern Web apps with JHipster

A intro about how to build modern web apps with JHipster

  • 1,301