Slide 1
Slide 1 text
Micro Frontends
for Java Microservices
April 11, 2024
Matt Raible | @mraible
Photo by David Kosmos Smith - https://flic.kr/p/bUHkEa
Slide 2
Slide 2 text
@mraible
Hi, I’m Matt Raible
Father, Husband, Skier, Mountain
Biker, Whitewater Rafter
Bus Lover
Web Developer and Java Champion
JHipster Enthusiast
Blogger on raibledesigns.com
@mraible
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
No content
Slide 7
Slide 7 text
Agenda
A brief history of microservices
Microservices with Java
Microservices with JHipster
Introduction to Micro Frontends
Live Demo
Action!
Slide 8
Slide 8 text
Microservices Visionaries
Slide 9
Slide 9 text
“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
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
“Do one thing and do it well.”
Slide 12
Slide 12 text
Microservices with Java
Slide 13
Slide 13 text
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
🍃
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Spring WebFlux!
Slide 17
Slide 17 text
Spring MVC Code
@PostMapping("/points")
public ResponseEntity 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);
}
Slide 18
Slide 18 text
Spring WebFlux Code
@PostMapping("/points")
public Mono> 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);
}
}
);
}
Slide 19
Slide 19 text
https://developer.okta.com/blog/2021/01/20/reactive-java-microservices
Slide 20
Slide 20 text
What is JHipster?
Slide 21
Slide 21 text
Thriving OSS Project
Started by Julien Dubois on October 21, 2013
App Generator, Platform, Learning Tool …
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Monolith, Gateway, or Microservices?
Spring MVC or Spring WebFlux?
Authentication Type?
Database Type?
Build Tool?
Web Framework?
JHipster Options
Slide 24
Slide 24 text
https://start.jhipster.tech
Slide 25
Slide 25 text
https://start.jhipster.tech/jdl-studio
Slide 26
Slide 26 text
https://start.jhipster.tech/jdl-studio
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
JHipster Microservices Architecture
Slide 29
Slide 29 text
JHipster Micro Frontends Architecture
Slide 30
Slide 30 text
⚡Micro Frontends
https://martinfowler.com/articles/micro-frontends.html
Slide 31
Slide 31 text
Why should Java developers care?
Slide 32
Slide 32 text
Demo Create apps with JDL
Run apps and e2e tests
Show developer experience
Build and run with Docker
@mraible/jhipster-micro-frontends
🤓
Slide 33
Slide 33 text
https://auth0.com/blog/micro-frontends-for-java-microservices
Slide 34
Slide 34 text
https://dev.to/jhipster
Slide 35
Slide 35 text
npm install -g generator-jhipster-kotlin
Slide 36
Slide 36 text
JHipster Official Blueprints
https://www.jhipster.tech/modules/official-blueprints
Slide 37
Slide 37 text
https://github.com/jhipster/jhipster-lite
Slide 38
Slide 38 text
What’s Next for JHipster?
GraalVM
Spring Cloud Gateway MVC
GraphQL
* These are my personal interests.
Slide 39
Slide 39 text
JHipster is Knowledge
Slide 40
Slide 40 text
JHipster ❤ Open Collective
https://opencollective.com/generator-jhipster
Slide 41
Slide 41 text
The JHipster Mini-Book
Written with Asciidoctor
Free download from InfoQ:
infoq.com/minibooks/jhipster-mini-book
Quick and to the point, 158 pages
Developed a real-world app:
www.21-points.com
Buy for $20 or download for FREE
Slide 42
Slide 42 text
The Angular Mini-Book
Written with Asciidoctor
Free download from InfoQ:
infoq.com/minibooks/angular-mini-book
Angular 15 and Spring Boot 3.0
Angular Material, Bootstrap, Kotlin
Spring Security and best practices
Deploy separate apps and a single artifact
Slide 43
Slide 43 text
Learn More
Spring Boot
spring.io/guides
JHipster
www.jhipster.tech
Stack Overflow
stackoverflow.com
Slide 44
Slide 44 text
Action: Try JHipster! 🚀
npm i -g generator-jhipster
Slide 45
Slide 45 text
git clone https://github.com/oktadeveloper/okta-spring-webflux-react-
example.git
https://github.com/mraible/jhipster-micro-frontends
Use the Source, Luke!
Slide 46
Slide 46 text
Thanks!
Keep in Touch
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/mraible
linkedin.com/in/mraible