Micro Frontends for Java Microservices - dev2next 2024

You've figured out how to split up your backend services into microservices and scale your teams to the moon, right? But what about the front end? Are you still building monoliths for your UI? If so, you might want to check out micro frontends—basically extensions to the microservices pattern, where the concept is extended to the front end.

Find out how to package and deploy your microservices and their UIs in the same artifact, as well as make it possible to test and develop them independently.

In this live session, Matt will show you how to build a microservices and micro frontends architecture using React, Spring Boot, and Spring Cloud.

GitHub repo: https://github.com/mraible/jhipster-micro-frontends
Demo script: @mraible/jhipster-micro-frontends/blob/main/demo.adoc

Transcript

1. Micro Frontends for Java Microservices October 1, 2024 Matt Raible | @mraible
2. @mraible Hi, I’m Matt Raible Father, Husband, Skier, Mountain Biker, Whitewater Rafter VW Bus Lover Web Developer and Java Champion JHipster Enthusiast Blogger on raibledesigns.com @mraible
6. Agenda A brief history of microservices Microservices with Java Microservices with JHipster Introduction to Micro Frontends Live Demo Action!
7. Microservices Visionaries
8. “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
10. “Do one thing and do it well.”
11. Microservices with Java
12. 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 🍃
15. Spring WebFlux!
16. 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); }
17. 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); } } ); }
18. https://developer.okta.com/blog/2021/01/20/reactive-java-microservices
19. What is JHipster?
20. Thriving OSS Project Started by Julien Dubois on October 21, 2013 App Generator, Platform, Learning Tool, ChatGPT Trainer…
21. 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
22. Monolith, Gateway, or Microservice? Spring MVC or Spring WebFlux? Authentication Type? Database Type? Build Tool? Web Framework? JHipster Provides Choose Your Own Adventure 🪄
23. https://start.jhipster.tech
24. https://start.jhipster.tech/jdl-studio
25. https://start.jhipster.tech/jdl-studio
27. JHipster Microservices Architecture
28. JHipster Micro Frontends Architecture
29. ⚡Micro Frontends https://martinfowler.com/articles/micro-frontends.html
30. Why should you care?
31. Demo Create apps with JDL Run apps and e2e tests Show developer experience Build and run with Docker @mraible/jhipster-micro-frontends 🤓
32. https://auth0.com/blog/micro-frontends-for-java-microservices
33. https://dev.to/jhipster
34. npm install -g generator-jhipster-kotlin
35. JHipster Official Blueprints https://www.jhipster.tech/modules/official-blueprints
36. https://github.com/jhipster/jhipster-lite
37. What’s Next for JHipster? More ❤ for Close follower of Spring Boot and Spring Cloud releases GraphQL?
38. JHipster is Knowledge
39. JHipster ❤ Open Collective https://opencollective.com/generator-jhipster
40. 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
41. Learn More Spring Boot spring.io/guides JHipster www.jhipster.tech Stack Overflow stackoverflow.com
42. Action: Try JHipster! 🚀 npm i -g generator-jhipster
43. git clone https://github.com/oktadeveloper/okta-spring-webflux-react- example.git https://github.com/mraible/jhipster-micro-frontends Use the Source, Luke!
44. Thanks! Keep in Touch raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/mraible linkedin.com/in/mraible