Micro Frontends


for Java microservices
September 27, 2022
Matt Raible | @mraible
Photo by Jason Murphy


https://unsplash.com/photos/dk9rD8bgqOQ
@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 - Cork JUG 2022