Micro Frontends
for Java microservices
September 28, 2022
Matt Raible | @mraible
@mraible
Hi, I’m Matt Raible
Father, Husband, Skier, Mountain
Biker, Whitewater Rafter
Bus Lover
Web Developer and Java Champion
Okta Developer Advocate
Blogger on raibledesigns.com and
developer.okta.com/blog
@mraible
developer.okta.com
developer.auth0.com
Agenda
A brief history of microservices
Microservices with Java
Microservices with JHipster
Introduction to Micro Frontends
Live Demo
Securing microservices with OAuth 2.1
Action!
Microservices Visionaries
“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
“Do one thing and do it well.”
Microservices with Java
Spring
History of Spring
October 2002 - Rod Johnson writes
J2EE Design & Development
2004 - Spring 1.0
2006 - Spring 2.0 with better XML
2009 - JavaConfig
2014 - Spring Boot 1.0
2015 - Spring Cloud 1.0
🍃
Spring WebFlux!
Spring MVC Code
@PostMapping("/points")
public ResponseEntity<Points> createPoints(@Valid @RequestBody Points points) throws URISyntaxException {
log.debug("REST request to save Points : {}", points);
if (points.getId() != null) {
throw new BadRequestAlertException("A new points cannot already have an ID", ENTITY_NAME, "idexists");
}
Points result = pointsRepository.save(points);
pointsSearchRepository.save(result);
return ResponseEntity
.created(new URI("/api/points/" + result.getId()))
.headers(HeaderUtil.createEntityCreationAlert(
applicationName, true, ENTITY_NAME, result.getId().toString()))
.body(result);
}
Spring WebFlux Code
@PostMapping("/points")
public Mono<ResponseEntity<Points>> createPoints(@Valid @RequestBody Points points) throws URISyntaxException {
log.debug("REST request to save Points : {}", points);
if (points.getId() != null) {
throw new BadRequestAlertException("A new points cannot already have an ID", ENTITY_NAME, "idexists");
}
return pointsRepository
.save(points)
.flatMap(pointsSearchRepository::save)
.map(
result -> {
try {
return ResponseEntity
.created(new URI("/api/points/" + result.getId()))
.headers(HeaderUtil.createEntityCreationAlert(
applicationName, true, ENTITY_NAME, result.getId().toString()))
.body(result);
} catch (URISyntaxException e) {
throw new RuntimeException(e);
}
}
);
}
https://developer.okta.com/blog/2021/01/20/reactive-java-microservices
What is JHipster?
Thriving OSS Project
Started by Julien Dubois on October 21, 2013
App Generator, Platform, Learning Tool …
How to Use JHipster
Install JHipster using npm:
npm install -g generator-jhipster
Create a directory and cd into it:
take app
Run it!
jhipster
Monolith, Gateway, or Microservices?
Spring MVC or Spring WebFlux?
Authentication Type?
Database Type?
Build Tool?
Web Framework?
JHipster Options
https://start.jhipster.tech
https://start.jhipster.tech/jdl-studio
JHipster Microservices Architecture
JHipster Micro Frontends Architecture
⚡Micro Frontends
https://martinfowler.com/articles/micro-frontends.html
Native Federation
https://twitter.com/ManfredSteyer/status/1564312149580582912
Why should Java developers care?
Demo
Create apps with JDL
Run apps and e2e tests
Run everything with Docker
Switch identity providers
@oktadev/auth0-micro-frontends-
jhipster-example
🤓
Secure Microservices with OAuth 2.1
https://oauth.net/2.1
Improvements in OAuth 2.1
PKCE is required for all clients using the authorization code flow
Redirect URIs must be compared using exact string matching
The Implicit grant is omitted from this specification
The Resource Owner Password Credentials grant is omitted from this specification
Bearer token usage omits the use of bearer tokens in the query string of URIs
Refresh tokens for public clients must either be sender-constrained or one-time use
yelp.com/callback
Back to redirect URI
with authorization code
Exchange code for
access token and ID token
accounts.google.com
Email
**********
Go to authorization server
Redirect URI: yelp.com/cb
Scope: openid profile
Authorization Server
yelp.com
Connect with Google
Resource owner
Client
accounts.google.com
Allow Yelp to access your public
profile and contacts?
No Yes
Request consent
from resource owner
Hello Matt!
accounts.google
Get user info
with access token
/userinfo
OAuth 2.1 and OIDC
Spring Cloud Gateway
Relay an access token in Spring Cloud Gateway
spring:
cloud:
gateway:
default-filters:
- TokenRelay
Reactive Microservices with Spring Cloud Gateway
https://developer.okta.com/blog/2019/08/28/reactive-microservices-spring-cloud-gateway
https://auth0.com/blog/micro-frontends-for-java-microservices
https://developer.okta.com/blog/2021/01/20/reactive-java-microservices
https://developer.okta.com/blog/2021/06/01/kubernetes-spring-boot-jhipster
https://dev.to/jhipster
npm install -g generator-jhipster-kotlin
JHipster Official Blueprints
https://www.jhipster.tech/modules/official-blueprints
https://github.com/jhipster/jhipster-lite
What You Learned
What’s Next for JHipster?
SCIM
Spring Boot 3
GraphQL
* These are my personal interests.
JHipster is Knowledge
Learn More
stackoverflow.com
Spring Boot
spring.io/guides
JHipster
www.jhipster.tech
Okta APIs
developer.okta.com
developer.okta.com/blog/tags/java
@oktadev
developer.auth0.com
@auth0
Action: Try JHipster! 🚀
npm i -g generator-jhipster@7
git clone https://github.com/oktadeveloper/okta-spring-webflux-react-
example.git
https://github.com/oktadev/auth0-micro-frontends-jhipster-example
Use the Source, Luke!
Thanks!
Keep in Touch
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadev
developer.okta.com
developer.auth0.com
developer.okta.com

Micro Frontends for Java Microservices - Dublin JUG 2022