Welcome, Java Hipster

Spring Boot + Angular in one handy generator

http://www.jhipster.tech

Press the right arrow to continue >

About this presentation

  • Hit the left/right arrow to browse to the main sections
  • Hit the up/down arrow to see the slides in each section
  • Hit the "escape" key to see all the slides

What is this all about?

Modern Web application development

Modern Web apps

End-users requirements have evolved. People are tired of slow, unreactive Web sites. They want:

  • Beautiful design
  • Stop waiting for pages to load
  • Dynamic updates of page fragments

We need to use the latest HTML5/CSS3/JavaScript technologies

Developer productivity

Those websites should be delivered fast.

Waiting 1 minute for your application to "deploy" is not acceptable anymore


We need the right tools for this job!

Production-ready software

Modern websites should be able to handle huge numbers of concurrent users

All using massive RESTful applications, which will hit your back-end servers hard


We need robust, scalable high-performance servers

Our goal is to solve those issues


  • A beautiful front-end, with the latest HTML5/CSS3/JavaScript frameworks
  • A robust and high-quality back-end, with the latest Java/Caching/Data access technologies
  • All automatically wired up, with security and performance in mind
  • And great developer tooling, for maximum productivity

Client-side technologies

Yeoman, Webpack, Angular, Bootstrap

Yarn

  • Fast and reliable dependency management
  • Used to install and run all client-side tools
                            yarn global add generator-jhipster
                        

Yeoman

Yeoman provides application generators

  • Hundreds of generators are available
  • Mostly geared toward JavaScript front-end applications
  • The top-rated generators have excellent quality
                            jhipster
                        

Webpack

Module bundler for client-side assets

  • Compiles, minifies, optimizes the front-end
  • Essential tooling to have compilation and hot-reload of Angular + TypeScript
  • Allows efficient production builds on the client-side

BrowserSync

Hot reload of application changes

  • Automatically refreshes the browser when code is modified
  • Synchronizes several browsers in real-time, so changes can be checked instantly
                            yarn start
                        

Karma

Karma runs unit tests on your JavaScript code

  • It works with Phantom.js, a headless browser
  • It is very fast, and can run continously in the background
                            yarn test
                        

Angular

The most popular JavaScript framework

  • Both AngularJS 1.x and Angular 2+ are supported by JHipster
  • Powerful & easy to learn
  • Data binding, form validation, i18n... all out of the box

Twitter Bootstrap

Great CSS/JavaScript framework for responsive Web apps

  • CSS and HTML elements for all common usages
  • Tons of JavaScript components: menus, navbars, drop-down boxes, alerts...
                            
Hello, world!

Server-side technologies

Maven, Spring, Spring MVC REST, Spring Data JPA, Netflix OSS

Maven | Gradle

The most popular Java build tools

  • Well-known, pre-defined directories and goals
  • Integration with major IDEs
  • Great plugin ecosystem, including Spring Boot and Yeoman
                            
./mvnw spring-boot:run
                            
                            
./gradlew bootRun
                            
                        

Spring Boot

Spring is the de-facto standard for Java apps

  • IoC, AOP and abstractions to ease application coding
  • Fast and lightweight, and extremely powerful when needed
  • Out-of-the-box configuration by Spring Boot
  • Live reload of application
                            
@Service
@Transactional
public class UserService {

    @Autowired
    private UserRepository userRepository;

}
                            
                        

Netflix OSS

Netflix OSS provides great tools and frameworks for microservices

  • Eureka - Service registry for load balancing and failover.
  • Zuul - Proxy for dynamic routing, monitoring and security
  • Ribbon - software load balancing for services

Liquibase

Database updates made easy

  • Handles updating a database schema
  • Works great with Spring and JPA
  • Needs a good understanding of databases and ORM

JPA

The standard ORM solution for Java

  • Hibernate is used underneath
  • Very complete, impressive set of features
  • Still complex to understand for newbies!
                            
@Entity
public class User implements Serializable {

    @Id
    private String login;

}
                            
                        

Spring Data JPA

Adds extra syntaxic sugar on top of JPA

  • Generates your JPA repositories automatically
  • Removes a lot of boilerplate code
                            
public interface PersistenceAuditEventRepository extends JpaRepository<PersistentAuditEvent, String> {

    List<PersistentAuditEvent>
        findByPrincipalAndAuditEventDateGreaterThan(String principal, LocalDateTime after);

}
                            
                        

MongoDB

NoSQL for scalability

  • Alternative to the SQL database and JPA choice
  • Similar code: Spring Data MongoDB works the same as Spring Data JPA
  • More scalable, easier to use

Couchbase

NoSQL for scalability

  • Alternative to the SQL database and JPA choice
  • Similar code: Spring Data Couchbase works the same as Spring Data JPA
  • More scalable, easier to use

Cassandra

NoSQL for scalability

  • 2nd alternative to the SQL database and JPA choice
  • Linear scalability and high availability
  • Extreme performance and low latency for mission-critical apps

Caching

Caching is king for performance

  • Ehcache is the most widely used solution
  • HazelCast is a great alternative, with clustering support!
  • Hibernate 2nd level cache or Spring Caching abstraction
                            
@Entity
@Cache(usage = CacheConcurrencyStrategy.NONSTRICT_READ_WRITE)
public class User implements Serializable {

}
                            
                        

Spring Security

Bulletproof Security framework

  • Leading tool, widely used across all industries
  • Secures URLs and Java code (Spring Beans)
  • Works both with stateful (cookies) and stateless (OAuth2/JWT) Web application architectures

Spring MVC REST

The best REST framework in Java

  • Complete, high-performance REST solution
  • Great Spring support, great testing support
                            
@RestController
public class AccountResource {
    @PostMapping("/account")
    public void saveAccount(@RequestBody UserDTO userDTO) {
        userService.updateUserInformation(userDTO);
    }
}
                            
                        

Thymeleaf

Server-side templates

  • Used when a Single Web Page application isn't enough
  • Replaces JSPs and JSTLs, which are outdated and deprecated
  • Great templates for Web designers
                            

Hello, world

Monitoring

Ready for production with Metrics

  • Monitors the JVM, app server, Spring beans, cache, and more!
  • JMX or Graphite reporting
                            
@Timed
public void saveAccount(@RequestBody UserDTO userDTO) {
    userService.updateUserInformation(userDTO);
}
                            
                        

Cloud deployment

To the cloud and beyond!

  • Deployments should be easy on-premise and in the cloud
  • Leading cloud providers like Cloud Foundry, Heroku and Amazon Web Services all provide specific tooling and deployment options

Meet JHipster

Why all the hype?

You said hype?


At the time of this writing (February, 2017), JHipster has:

  • 296 contributors, including 19 core members
  • 6,190 GitHub stars and 1,413 forks
  • 420,000 installations
  • And it's growing rapidly

Why?

We've seen lots of cool technologies

  • Can Webpack and Maven be friends?
  • Can Angular and Spring MVC REST be friends?
  • Can Netflix OSS and Spring be friends?
  • We can guarantee you that having everything working together smoothly, with security, caching and monitoring, isn't easy...

JHipster makes everything just work together

  • JHipster creates a complete working application, with all those technologies
  • Everthing just works out-of-the-box
  • You have your Webpack tasks working great with your Maven goals!
  • You have Docker configuration to run everything smoothly!

But wait, there's more!

  • "entity" sub-generator to generate a complete JPA entity, from database to Angular
  • "import-jdl" sub-generator to generate a complex entity model using JDL Studio
  • "service" sub-generator to generate a Spring business service
  • "languages" sub-generator to add languages for i18n
  • Great support for Spring Security: Ajax endpoints, secured remember-me, audits...
  • Great monitoring screen using Metrics

It's not over yet, there's even more!

  • Great support for creating microservices and gateways
  • JHipster Registry (Netflix Eureka + Spring cloud config server) provided out of the box
  • JHipster Console with ELK (Elasticsearch + Logstash + Kibana) monitoring out of the box
  • Great support for Docker
  • Additional JHipster Modules to add more features

Production-ready

  • Specific Spring profile with GZipping and HTTP caching headers
  • TypeScript & CSS optimization and minification by Webpack
  • Executable or standard WAR file, with monitoring enabled
  • Sub-generators for deploying automatically to Cloud Foundry, Heroku and AWS
  • "docker-compose" sub-generator to generate Docker configurations for deploying microservices to production

Let's build our first app

10 minutes tutorial

Install Yeoman

                            
yarn global add yo
yarn global add generator-jhipster
                            
                        

Create an application

And use the embedded Maven wrapper to run it
(hot reload of your application will work automatically)

                            
jhipster
./mvnw
                            
                        

Client-side live reload

Live reload of your client-side code (HTML, CSS, TypeScript) works thanks to Webpack and Browsersync. Edit any file and your browser will refresh automatically:

                            
yarn start
                            
                        

Add an entity

                            
jhipster entity Foo
                            
                        

Run in production

(Using Docker to run the database)

                            
./mvnw -Pprod package
docker-compose -f src/main/docker/mysql.yml up -d
java -jar target/*.war
                            
                        

Thank you for your attention

http://www.jhipster.tech