Matt Raible | @mraible
Spring Boot APIs and Angular Apps: Get Hip with JHipster!
December 4, 2019 Photo by Michael Longmire https://unsplash.com/photos/giuCQDhFDEY
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
developer.okta.com
Slide 7
Slide 7 text
Authentication Standards
Slide 8
Slide 8 text
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?
Slide 9
Slide 9 text
Do you want to be a hip Java Developer?
Slide 10
Slide 10 text
Java 8
Parallel Collections
JSR 310 Date and Time API
Functional Interfaces with default method
Lambda Expressions (a.k.a. Closures)
Nashorn JavaScript Engine
Slide 11
Slide 11 text
Java 11
New String Methods
File Utility Methods
Local Variable Syntax: var
Java EE and CORBA modules removed
What about Java 12?
Slide 12
Slide 12 text
Hipster
n. noun
1. One who is exceptionally aware of or interested in the latest trends
and tastes.
Slide 13
Slide 13 text
Latest trends in JavaLand?
Microservices
Embedded App Servers
Deployment with Containers
Environments: dev, test, production
Auto-Configuration
Reactive
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
SPRING INITIALIZR @ start.spring.io
Slide 16
Slide 16 text
@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 {
}
Slide 17
Slide 17 text
@SpringBootApplication
class NotesApplication
fun main(args: Array) {
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
Slide 18
Slide 18 text
Microservices with Spring Boot
https://developer.okta.com/blog/2019/05/22/java-microservices-spring-boot-spring-cloud
Slide 19
Slide 19 text
Latest trends in Web Development?
Progressive Web Applications
JavaScript MVC Frameworks
Front-End Optimization
REST and GraphQL APIs
CSS Grid
Micro Frontends
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Hot Frameworks hotframeworks.com
Slide 23
Slide 23 text
Hot Frameworks hotframeworks.com
Slide 24
Slide 24 text
Jobs on Indeed (US)
November 2019
0
3,000
6,000
9,000
12,000
React Angular Vue Vanilla
@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! ✨
Slide 29
Slide 29 text
JHipster is Inclusive
https://github.com/jhipster/jhipster-artwork
Slide 30
Slide 30 text
JHipster is Open Source
Web Statistics, October 2019
376K Page Views / 653K on GitHub
121K Downloads
GitHub Statistics
15K Stars
530 Contributors
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
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!
Slide 34
Slide 34 text
Demo Entity Diagram
Slide 35
Slide 35 text
Get Started with JHipster 6 Demo
https://github.com/mraible/jhipster6-demo | https://youtu.be/uQqlO3IGpTU
Slide 36
Slide 36 text
JHipster 6 with OIDC Authentication
https://developer.okta.com/blog/2019/04/04/java-11-java-12-jhipster-oidc
Slide 37
Slide 37 text
OAuth 2.0 and OpenID Connect
OpenID Connect
OAuth 2.0
HTTP
OpenID Connect is for
authentication
OAuth 2.0 is for
authorization
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Microservices with JHipster 6
https://developer.okta.com/blog/2019/05/23/java-microservices-spring-cloud-config
Slide 40
Slide 40 text
JHipster is Knowledge
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
Lines of Code in 21-Points
0
6500
13000
19500
26000
Project Created Entities Generated Business Logic and UI
25,670
23,590
16,728
Slide 43
Slide 43 text
Project Creation
Entities Generated
Biz Logic and UI
0 10000 20000 30000
2,999
2,648
1,839
9,472
8,911
5,523
8,383
7,696
5,892
Java TypeScript HTML
Lines of Code by Language
Slide 44
Slide 44 text
Learn More
stackoverflow.com
Spring Boot
spring.io/guides
JHipster
www.jhipster.tech
Okta APIs
developer.okta.com
Slide 45
Slide 45 text
Getting Help
stackoverflow.com/tags/jhipster
gitter.im/jhipster/generator-jhipster
github.com/jhipster/.../CONTRIBUTING.md
groups.google.com/.../jhipster-dev
Slide 46
Slide 46 text
What’s Next for JHipster?
Full Reactive with WebFlux
and Spring Cloud Gateway
Spring Boot 2.2
GraphQL and Micro Frontends
Slide 47
Slide 47 text
developer.okta.com/blog
@oktadev
Slide 48
Slide 48 text
Action!
Try Spring Boot
Try Angular, React, or Vue
Try JHipster
Explore PWAs
Enjoy the bootiful experience!
Slide 49
Slide 49 text
Questions?
Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadeveloper