The Ultimate JHipster Workshop - PWX 2019

PART 1: Build a PWA with Spring Boot and Angular

Want to get your hands dirty and have some fun doing it? In this workshop, you’ll learn about Spring Boot, Angular, and PWAs. JHipster is a development platform to generate, develop, and deploy Spring Boot + Angular / React / Vue applications.

You’ll build an app from scratch, add entities for data, and lock it all down with JWT authentication. You’ll also see how to develop React Native and Ionic apps for the same backend. JHipster and it’s tools do it all for you, so minimal programming skills are required!

PART 2: Build a Microservices Architecture with Spring Boot and Spring Cloud

The Java ecosystem has some well-established patterns for developing microservice architectures. If you're familiar with Spring, you'll feel right at home developing with Spring Boot and Spring Cloud. This workshop shows you how to use Spring Boot and Spring Cloud to develop an API gateway and microservices with service discovery and failover features. Next, you’ll learn how to lock it down with OAuth 2.0.

JHipster is a development platform to generate, develop, and deploy Spring Boot + Angular / React / Vue applications and Spring microservices. It even allows you to generate Kotlin apps instead of Java ones! In this workshop, you’ll get hands-on experience developing microservices with JHipster. You’ll also learn how to run them in Docker and deploy them using Kubernetes.

GitHub repo: https://github.com/oktadeveloper/ultimate-jhipster-workshop

Transcript

1. Matt Raible and Dennis Sharpe | @mraible, @sharpedennis The Ultimate JHipster Workshop December 3, 2019 Photo by Chris McClanahan flickr.com/photos/mcclanahoochie/7299393890
2. Blogger on raibledesigns.com and developer.okta.com/blog Web Developer and Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Open Source Developer + User Who is Matt Raible? Bus Lover Okta Developer Advocate
3. developer.okta.com
4. Who is Dennis Sharpe? Chief Technology Officer - Ippon USA JHipster Fan Worked with Julien Dubois (JHipster creator and lead developer) @SharpeDennis
5. https://en.ippon.tech
6. What about YOU? Are you a Java Developer? Web Developer? How long have you been doing web development? Do you like Spring? Java/Jakarta EE? Do you like JavaScript? TypeScript?
7. Do you want to be a hip Java Developer?
8. Java 8 Parallel Collections JSR 310 Date and Time API Functional Interfaces with default method Lambda Expressions (a.k.a. Closures) Nashorn JavaScript Engine
9. Java 11 New String Methods File Utility Methods Local Variable Syntax: var Java EE and CORBA modules removed What about Java 12?
10. Hipster n. noun 1. One who is exceptionally aware of or interested in the latest trends and tastes.
11. Latest trends in JavaLand? Microservices Embedded App Servers Deployment with Containers Environments: dev, test, production Auto-Configuration Reactive
12. Spring Boot Automatically configures Spring whenever possible Provides production-ready features such as metrics, health checks and externalized configuration Absolutely no code generation and no requirement for XML configuration Embeds Tomcat, Jetty or Undertow directly
13. SPRING INITIALIZR @ start.spring.io
14. @SpringBootApplication public class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } } @Entity class Blog { @Id @GeneratedValue private Long id; private String name; // getters, setters, toString(), etc } @RepositoryRestResource interface BlogRepository extends JpaRepository<Blog, Long> { }
15. @SpringBootApplication class NotesApplication fun main(args: Array<String>) { SpringApplication.run(NotesApplication::class.java, *args) } @Entity data class Note(@Id @GeneratedValue var id: Long? = null, var text: String? = null, @JsonIgnore var user: String? = null) @RepositoryRestResource interface NotesRepository : JpaRepository<Note, Long>
16. Latest Trends in Web Development? Progressive Web Applications JavaScript MVC Frameworks Front-End Optimization REST and GraphQL APIs CSS Grid Micro Frontends
19. Hot Frameworks hotframeworks.com
20. Hot Frameworks hotframeworks.com
21. Jobs on Indeed (US) November 2019 0 3,000 6,000 9,000 12,000 React Angular Vue Vanilla
22. Stack Overflow Tags November 2019 0 50,000 100,000 150,000 200,000 React Angular Vue
23. GitHub Stars November 2019 0 40,000 80,000 120,000 160,000 React Angular Vue
24. Wouldn’t it be hip if…? ⚭
25. @spring_io #springio17 JHipster jhipster.tech JHipster is a development platform to generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices. and Vue! ✨
26. JHipster is Inclusive https://github.com/jhipster/jhipster-artwork
27. JHipster is Open Source Web Statistics, October 2019 376K Page Views / 653K on GitHub 121K Downloads GitHub Statistics 15K Stars 530 Contributors
28. JHipster Foundations Spring Boot Spring Security Angular or React Bootstrap Micrometer Maven or Gradle Authentication Type: cookie- based, JWT, or OAuth 2.0 / OIDC Type of Database: SQL or NoSQL Caching: EhCache or Hazelcast Elasticsearch Frameworks Project Options
29. How to use JHipster To install JHipster and Yeoman, use npm: npm install -g generator-jhipster Then create a directory and cd into it: mkdir myapp && cd myapp Then run JHipster: jhipster
30. Progressive Web Apps Originate from a secure origin, load while offline, and reference a web app manifest.
31. Progressive Web Apps Can be installed on your mobile device, look and act like a native application, but are distributed through the web.
32. Progressive Web Apps Are fast!
33. Enable PWA in JHipster <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js') .then(function () { console.log('Service Worker Registered'); }); }); } </script> src/main/webapp/index.html
34. Force HTTPS in Spring Boot src/main/java/com/okta/developer/demo/config/SecurityConfiguration.java @Configuration public class SecurityConfiguration extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.requiresChannel() .requestMatchers(r -> r.getHeader("X-Forwarded-Proto") != null) .requiresSecure(); } } https://developer.okta.com/blog/2018/07/30/10-ways-to-secure-spring-boot
35. Demo Time! Generate a basic blog application Look at its files and configuration Generate the CRUD entities Limit blogs to current user, allow HTML Deploy to … all in 20 minutes!
36. Demo Entity Diagram
37. Get Started with JHipster 6 Demo https://github.com/mraible/jhipster6-demo | https://youtu.be/uQqlO3IGpTU
38. JHipster 6 with OIDC Authentication http://bit.ly/jhipster-oidc
39. OAuth 2.0 and OpenID Connect OpenID Connect OAuth 2.0 HTTP OpenID Connect is for authentication OAuth 2.0 is for authorization
40. Lab 1: Create an Angular PWA https://bit.ly/jhipster6-demo
41. Workshop Cheat Sheet https://bit.ly/jhipster-workshop
42. Matt Raible and Dennis Sharpe | @mraible, @sharpedennis Part 2: Microservices with JHipster December 3, 2019 Photo by Kim Seng flickr.com/photos/captainkimo/12484026584
44. Microservices Visionaries
46. “Any organization that designs a system (defined broadly) will produce a design whose structure is a copy of the organization's communication structure.” Conway’s Law Melvin Conway 1967
47. “Do one thing and do it well.”
48. “You shouldn't start with a microservices architecture. Instead begin with a monolith, keep it modular, and split it into microservices once the monolith becomes a problem.” Martin Fowler March 2014
50. What is JHipster? + =
51. JHipster jhipster.tech JHipster is a development platform to generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices. and Vue! ✨
52. JHipster is Inclusive https://github.com/jhipster/jhipster-artwork
53. A powerful workflow to build your application with webpack and Maven/Gradle JHipster Goals A sleek, modern, mobile-first frontend with modern frameworks A high-performance and robust Java stack on the server side with Spring Boot A robust microservice architecture with JHipster Registry, Netflix OSS, Elastic Stack, and Docker
54. How to Use JHipster Install JHipster and Yeoman, using npm: npm install -g generator-jhipster Create a directory and cd into it: mkdir newapp && cd newapp Run it! jhipster
55. Microservices with JHipster
56. Demo Using start.spring.io, create: A service registry A gateway A catalog service Create an endpoint in the catalog service Create a filtered endpoint in the gateway Show failover capabilities Show Spring Security OAuth https://github.com/oktadeveloper/java- microservices-examples
57. Java Microservices with Spring Boot and Spring Cloud https://developer.okta.com/blog/2019/05/22/java-microservices-spring-boot-spring-cloud
58. Demo Using JHipster, create: A gateway A store microservices app A blog microservices app Generate entities in apps and on gateway Convert gateway to be a PWA Run everything in Docker https://github.com/oktadeveloper/java- microservices-examples
59. Lab 2: Build JHipster Microservices https://bit.ly/jhipster6-ms
60. JHipster is Knowledge
61. What’s Next for JHipster? Full Reactive with WebFlux and Spring Cloud Gateway Spring Boot 2.2 GraphQL and Micro Frontends
62. Reactive Microservices with Spring Cloud Gateway https://developer.okta.com/blog/2019/08/28/reactive-microservices-spring-cloud-gateway
63. The JHipster Mini-Book Written with Asciidoctor Quick and to the point, 164 pages Developed a Real World App: www.21-points.com Free Download from infoq.com/minibooks/jhipster-mini-book
64. Learn More stackoverflow.com Spring Boot spring.io/guides JHipster www.jhipster.tech Okta APIs developer.okta.com
65. Getting Help stackoverflow.com/tags/jhipster gitter.im/jhipster/generator-jhipster github.com/jhipster/.../CONTRIBUTING.md groups.google.com/.../jhipster-dev
66. developer.okta.com/blog @oktadev
67. blog.ippon.tech @IpponUSA
68. Action! Try Spring Boot Try Angular, React, or Vue Try JHipster Explore PWAs Try Microservices Enjoy the bootiful experience!
69. Keep in touch! @mraible @sharpedennis Presentations speakerdeck.com/mraible Code github.com/oktadeveloper Questions?