Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JHipster 5 - What's new and noteworthy

JHipster 5 - What's new and noteworthy

All you need to know about JHipster 5 from its lead developers. Create Web applications using Spring Boot + Angular/React and deploy it to all major cloud platforms like Heroku/AWS/GAE. Model your applications and entities using JDL v3.

Deepu K Sasidharan

November 14, 2018

More Decks by Deepu K Sasidharan

Other Decks in Programming


  1. https://jhipster.tech #devoxx2018 @java_hipster Greetings JH 5 W '

  2. https://jhipster.tech #devoxx2018 @java_hipster Who are we? Julien Dubois JHipster creator

    & lead developer Chief Innovation Officer at Ippon Technologies @juliendubois
  3. https://jhipster.tech #devoxx2018 @java_hipster Who are we? Deepu K Sasidharan JHipster

    co-lead developer Senior product developer @ XebiaLabs OSS aficionado, author, speaker @deepu105 deepu.js.org
  4. https://jhipster.tech #devoxx2018 @java_hipster About JHipster Most popular Rapid Application Development

    platform for Java web applications and microservices ▪ 12k+ stars on GitHub ▪ 1.5M+ installations & 20k+ app generations per month ▪ 250k+ overall users ▪ 460+ contributors & 24 core team members ▪ 260+ companies using JHipster ▪ 70+ plugins
  5. https://jhipster.tech #devoxx2018 @java_hipster What can you do with JHipster? ▪

    Generate simple monolith web applications ▪ Generate complete microservice architectures ▪ Generate domain model (entities) ▪ Generate CI/CD pipelines ▪ Deploy to AWS, GCP, Heroku, Cloud Foundry ▪ Deploy to Docker, Kubernetes, Openshift, Rancher
  6. https://jhipster.tech #devoxx2018 @java_hipster What’s new? JHipster 5 and beyond!

  7. https://jhipster.tech #devoxx2018 @java_hipster JHipster 5 and beyond • React •

    Angular 7 • VueJS • Webpack 4 • Jest • Prettier • Spring Boot 2.x • Micrometer • Heroku + AWS + GAE + Azure • Istio • Blueprints • JDL 3 (application & deployment via JDL)
  8. https://jhipster.tech #devoxx2018 @java_hipster React support • Starting with JHipster 5,

    full React support ◦ First-class support ◦ Exactly the same set of features as Angular ◦ Everything works the same, even the JDL ▪ Low barrier to entry ▪ Great for companies switching technologies, or using them in parallel ◦ Our goal (nearly achieved!) is to have the same Protractor test suite as with Angular
  9. https://jhipster.tech #devoxx2018 @java_hipster Angular 7 • Angular is 54% of

    all generated applications ◦ Very actively maintained ◦ We have already released Angular 7 support (latest release as of today)
  10. https://jhipster.tech #devoxx2018 @java_hipster VueJS • Currently being actively developed ◦

    This is a JHipster blueprint (more about blueprints later!) ◦ The main generator is beginning to work fine, more work is needed on the entities ◦ Join us if you are motivated: https://github.com/jhipster/jhipster-vuejs • The goal is to have exactly the same of features as Angular and React ◦ Will probably get merged into the main project
  11. https://jhipster.tech #devoxx2018 @java_hipster Webpack 4 • Upgraded to the latest

    Webpack version ◦ Big performance increase ◦ Common build for Angular and React (and VueJS) • As we go much further than the default CLIs (Angular CLI and create-react-app), and have better performance, we’ll continue to have our own configuration
  12. https://jhipster.tech #devoxx2018 @java_hipster Jest • Migration from Karma to Jest

    for our front-end unit tests ◦ Very big performance increase ◦ As Jest is a full JavaScript project (no native code), installation is much easier, especially on CI systems
  13. https://jhipster.tech #devoxx2018 @java_hipster Prettier • Prettier is a code formatter

    that has taken the world by storm ◦ https://prettier.io/ ◦ Nearly 30,000 GitHub stars, and is widely considered a good practice for front-end development • Prettier support in JHipster ◦ Support for TypeScript, JSON, CSS, SCSS ◦ At generation time (for the generated code) and as a Git pre-commit hook (for your own code) • Wouldn’t be neat to have also Prettier support for Java?
  14. https://jhipster.tech #devoxx2018 @java_hipster Prettier for Java • Official Java support

    for Prettier ◦ Originally coded by Thorben von Hacht ◦ Since last week, it is part of the JHipster organization! • Brings amazing features that don’t exist yet in the Java world ◦ Prettier is much more than a beautifier (no equivalent in Java) ◦ Can be installed as a Git pre-commit hook (without running a JVM!) ◦ Will simplify our templates and offer perfect code generation • 95% finished, but help is much needed ◦ Join us on https://github.com/jhipster/prettier-java
  15. https://jhipster.tech #devoxx2018 @java_hipster Spring Boot 2.x • Migration to Spring

    Boot 2.0 complete ◦ Another good reason to use JHipster! • Work is under way for reactive programming support ◦ Lead by Christophe Bornet ◦ Test it by running “jhipster --experimental” ◦ Still work to do on entities and on the client-side • Migration to Spring Boot 2.1 has started ◦ JDK 11 support ◦ We are waiting for Spring Cloud to support Spring Boot 2.1
  16. https://jhipster.tech #devoxx2018 @java_hipster Micrometer • One of the big breaking

    changes from Spring Boot 2.0 ◦ JHipster still uses Dropwizard: much more battle-tested and stable, but not actively developed anymore • Migration is under way ◦ All technical issues have been solved ◦ Sample project working, templates are currently being written
  17. https://jhipster.tech #devoxx2018 @java_hipster Heroku + AWS + GAE + Azure

    • Lots of improvements in the cloud space • Heroku: first-class support offering much faster deploys and automatic “git push” deployment (from Heroku) • AWS: fixed Beanstalk deployment, added Amazon Fargate support (from Ippon Technologies) • Google App Engine support (from Google) • Azure documentation (from Microsoft)
  18. https://jhipster.tech #devoxx2018 @java_hipster Istio • Istio support initially from Google

    • Offers a basic (but fully working) Istio configuration • Offers an alternative to our traditional stacks based on Netflix OSS or Consul ◦ Similar to what Heroku provides ◦ Scaling and networking failures are handled by the infrastructure ◦ Harder to customize (for business cases) or test (for developers), but higher quality and less headaches if you are using a managed Kubernetes service
  19. https://jhipster.tech #devoxx2018 @java_hipster JHipster Blueprints • Blueprints enable developers to

    customize parts of the generator with plugins ◦ Customize only what is required ◦ Work around Yeoman limitations • They enable to plug in your own client-side templates or server-side templates ◦ JHipster Kotlin blueprint is an example ◦ Possibility to add client-side framework like VueJS by the community • Only available for application, entity, spring-service, spring-controller and import-jdl generators
  20. https://jhipster.tech #devoxx2018 @java_hipster JHipster Kotlin Blueprint • Official Blueprint from

    JHipster ◦ https://github.com/jhipster/jhipster-kotlin • Lead by core team member Sendil Kumar N • Migration is a work-in-progress • Replaces most of the server-side java code with Kotlin • Follows a hybrid approach with Java and Kotlin
  21. https://jhipster.tech #devoxx2018 @java_hipster JDL 3 demo (JHipster magic)

  22. https://jhipster.tech #devoxx2018 @java_hipster Demo - Microservice with Istio on Kubernetes

  23. https://jhipster.tech #devoxx2018 @java_hipster How long would it take?

  24. https://jhipster.tech #devoxx2018 @java_hipster JDL JHipster Domain Language JDL : https://goo.gl/saH3Ap

    Reference : https://www.jhipster.tech/jdl/ Studio : https://start.jhipster.tech/jdl-studio/
  25. https://jhipster.tech #devoxx2018 @java_hipster JDL Application

  26. https://jhipster.tech #devoxx2018 @java_hipster JDL Entity & Relationship

  27. https://jhipster.tech #devoxx2018 @java_hipster Deployment to GKE

  28. https://jhipster.tech #devoxx2018 @java_hipster Prerequisite - Cluster Create GCP Project :

    $ gcloud projects create jhipster-demo-deepu $ gcloud config set project jhipster-demo-deepu Create GKE Cluster : $ gcloud container clusters create hello-hipster \ --cluster-version 1.10 \ --num-nodes 4 \ --machine-type n1-standard-2 \ --scopes cloud-platform Set Credentials: $ gcloud container clusters get-credentials hello-hipster
  29. https://jhipster.tech #devoxx2018 @java_hipster GKE Cluster

  30. https://jhipster.tech #devoxx2018 @java_hipster Prerequisite - Istio Install Istio : $

    cd ~/ $ export ISTIO_VERSION=1.0.2 $ curl -L https://git.io/getLatestIstio | sh - $ ln -sf istio-$ISTIO_VERSION istio $ export PATH=~/istio/bin:$PATH Install Istio in GKE cluster : $ kubectl apply -f ~/istio/install/kubernetes/helm/istio/templates/crds.yaml $ kubectl apply -f ~/istio/install/kubernetes/istio-demo.yaml \ --as=admin --as-group=system:masters Get Ingress Gateway IP: $ watch kubectl get pods -n istio-system
  31. https://jhipster.tech #devoxx2018 @java_hipster Istio pods

  32. https://jhipster.tech #devoxx2018 @java_hipster JDL Deployments

  33. https://jhipster.tech #devoxx2018 @java_hipster Start your timer

  34. https://jhipster.tech #devoxx2018 @java_hipster JHipster magic $ jhipster import-jdl app.jdl $

    cd kubernetes $ ./kubectl-apply.sh
  35. https://jhipster.tech #devoxx2018 @java_hipster Generation output

  36. https://jhipster.tech #devoxx2018 @java_hipster Exploring the app Application Gateway: $ export

    INGRESS_IP=$(kubectl -n istio-system get svc istio-ingressgateway \ -o jsonpath='{.status.loadBalancer.ingress[0].ip}') $ google-chrome store.$INGRESS_IP.nip.io
  37. https://jhipster.tech #devoxx2018 @java_hipster Application gateway

  38. https://jhipster.tech #devoxx2018 @java_hipster Monitoring & logs Grafana - Monitoring dashboard:

    $ kubectl -n istio-system port-forward $(kubectl -n istio-system get pod \ -l app=grafana -o jsonpath='{.items[0].metadata.name}') 3000:3000 $ google-chrome http://localhost:3000 Prometheus - Log metrics: $ kubectl -n istio-system port-forward $(kubectl -n istio-system get pod -l \ app=prometheus -o jsonpath='{.items[0].metadata.name}') 9090:9090 $ google-chrome http://localhost:9090
  39. https://jhipster.tech #devoxx2018 @java_hipster Grafana dashboard

  40. https://jhipster.tech #devoxx2018 @java_hipster Prometheus dashboard

  41. https://jhipster.tech #devoxx2018 @java_hipster Observability Jaeger - Distributed tracing: $ kubectl

    -n istio-system port-forward $(kubectl -n istio-system get pod -l \ app=jaeger -o jsonpath='{.items[0].metadata.name}') 16686:16686 $ google-chrome http://localhost:16688 Service graph: $ kubectl -n istio-system port-forward $(kubectl -n istio-system get pod -l \ app=servicegraph -o jsonpath='{.items[0].metadata.name}') 8088:8088 $ google-chrome http://localhost:8088/force/forcegraph.html
  42. https://jhipster.tech #devoxx2018 @java_hipster Jaeger tracing

  43. https://jhipster.tech #devoxx2018 @java_hipster Service graph

  44. https://jhipster.tech #devoxx2018 @java_hipster More information on JHipster Main website https://jhipster.tech

    JHipster online https://start.jhipster.tech GitHub https://github.com/jhipster/generator-jhipster Twitter https://twitter.com/java_hipster Stack Overflow https://stackoverflow.com/questions/tagged/jhipster?sort=newest
  45. https://jhipster.tech #devoxx2018 @java_hipster Thank you Do rate our talk if

    you found it useful!