Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontends for Java Developers - JavaOne 2022

Micro Frontends for Java Developers - JavaOne 2022

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 frontend? 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 frontend.

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.

Related blog post: https://auth0.com/blog/micro-frontends-for-java-microservices
GitHub repo: https://github.com/oktadev/auth0-micro-frontends-jhipster-example
Demo script: https://github.com/oktadev/auth0-micro-frontends-jhipster-example/blob/main/demo.adoc

Matt Raible

October 18, 2022

More Decks by Matt Raible

Other Decks in Programming


  1. Micro Frontends for Java microservices October 18, 2022 Matt Raible

    | @mraible Photo by Julian Paefgen 
  2. @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
  3. None
  4. None
  5. None
  6. developer.okta.com

  7. developer.auth0.com

  8. 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!
  9. Microservices Visionaries

  10. “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
  11. None
  12. “Do one thing and do it well.”

  13. Microservices with Java

  14. 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. None
  16. None
  17. Spring WebFlux!

  18. 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); }
  19. 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); } } ); }
  20. https://developer.okta.com/blog/2021/01/20/reactive-java-microservices

  21. What is JHipster?

  22. Thriving OSS Project Started by Julien Dubois on October 21,

    2013 App Generator, Platform, Learning Tool …
  23. 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
  24. Monolith, Gateway, or Microservices? Spring MVC or Spring WebFlux? Authentication

    Type? Database Type? Build Tool? Web Framework? JHipster Options
  25. https://start.jhipster.tech

  26. https://start.jhipster.tech/jdl-studio

  27. None
  28. JHipster Microservices Architecture

  29. JHipster Micro Frontends Architecture

  30. ⚡Micro Frontends https://martinfowler.com/articles/micro-frontends.html

  31. Native Federation https://twitter.com/ManfredSteyer/status/1564312149580582912

  32. Why should Java developers care?

  33. Demo Create apps with JDL Run apps and e2e tests

    Run everything with Docker Switch identity providers @oktadev/auth0-micro-frontends- jhipster-example 🤓
  34. Secure Microservices with OAuth 2.1 https://oauth.net/2.1

  35. 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
  36. 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
  37. Spring Cloud Gateway

  38. Relay an access token in Spring Cloud Gateway spring: cloud:

    gateway: default-filters: - TokenRelay
  39. Reactive Microservices with Spring Cloud Gateway https://developer.okta.com/blog/2019/08/28/reactive-microservices-spring-cloud-gateway

  40. https://auth0.com/blog/micro-frontends-for-java-microservices

  41. https://developer.okta.com/blog/2021/01/20/reactive-java-microservices

  42. https://developer.okta.com/blog/2021/06/01/kubernetes-spring-boot-jhipster

  43. https://dev.to/jhipster

  44. npm install -g generator-jhipster-kotlin

  45. JHipster Official Blueprints https://www.jhipster.tech/modules/official-blueprints

  46. https://github.com/jhipster/jhipster-lite

  47. What You Learned

  48. What’s Next for JHipster? SCIM Spring Boot 3 GraphQL *

    These are my personal interests.
  49. JHipster is Knowledge

  50. JHipster ❤ Open Collective https://opencollective.com/generator-jhipster

  51. Learn More stackoverflow.com Spring Boot spring.io/guides JHipster www.jhipster.tech Okta APIs

  52. developer.okta.com/blog/tags/java @oktadev

  53. developer.auth0.com @auth0

  54. Action: Try JHipster! 🚀 npm i -g [email protected]

  55. 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!

  56. Thanks! Keep in Touch raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadev

    developer.okta.com developer.auth0.com
  57. developer.okta.com