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

Micro Frontends for Java Microservices - SF JUG 2023

Matt Raible
November 30, 2023

Micro Frontends for Java Microservices - SF JUG 2023

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 and 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.

YouTube Livestream: https://www.youtube.com/watch?v=hSgz2lL8Dv8
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: @oktadev/auth0-micro-frontends-jhipster-example/blob/main/demo.adoc

Matt Raible

November 30, 2023
Tweet

More Decks by Matt Raible

Other Decks in Technology

Transcript

  1. Micro Frontends
    for Java Microservices
    November 30, 2023
    Matt Raible | @mraible
    Photo by Umer Sayyam
    https://unsplash.com/photos/golden-gate-bridge-usa-SHP1t8EduMY

    View full-size slide

  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
    auth0.com/blog
    @mraible

    View full-size slide

  3. developer.okta.com

    View full-size slide

  4. developer.auth0.com

    View full-size slide

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

    View full-size slide

  6. Microservices Visionaries

    View full-size slide

  7. “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

    View full-size slide

  8. “Do one thing and do it well.”

    View full-size slide

  9. Microservices with Java

    View full-size slide

  10. 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
    🍃

    View full-size slide

  11. Spring WebFlux!

    View full-size slide

  12. 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);
    }

    View full-size slide

  13. 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);
    }
    }
    );
    }

    View full-size slide

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

    View full-size slide

  15. What is JHipster?

    View full-size slide

  16. Thriving OSS Project
    Started by Julien Dubois on October 21, 2013
    App Generator, Platform, Learning Tool …

    View full-size slide

  17. 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

    View full-size slide

  18. Monolith, Gateway, or Microservices?
    Spring MVC or Spring WebFlux?
    Authentication Type?
    Database Type?
    Build Tool?
    Web Framework?
    JHipster Options

    View full-size slide

  19. https://start.jhipster.tech

    View full-size slide

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

    View full-size slide

  21. JHipster Microservices Architecture

    View full-size slide

  22. JHipster Micro Frontends Architecture

    View full-size slide

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

    View full-size slide

  24. Why should Java developers care?

    View full-size slide

  25. Demo
    Create apps with JDL
    Run apps and e2e tests
    Run everything with Docker
    Switch identity providers
    @oktadev/auth0-micro-frontends-
    jhipster-example
    🤓

    View full-size slide

  26. Secure Microservices with OAuth 2.1
    https://oauth.net/2.1

    View full-size slide

  27. 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

    View full-size slide

  28. 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

    View full-size slide

  29. Spring Cloud Gateway

    View full-size slide

  30. Relay an access token in Spring Cloud Gateway
    spring:
    cloud:
    gateway:
    default-filters:
    - TokenRelay

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. https://dev.to/jhipster

    View full-size slide

  36. npm install -g generator-jhipster-kotlin

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. What You Learned

    View full-size slide

  40. What’s Next for JHipster?
    GraalVM
    Spring Boot 3.2
    GraphQL
    * These are my personal interests.

    View full-size slide

  41. JHipster is Knowledge

    View full-size slide

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

    View full-size slide

  43. 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

    View full-size slide

  44. 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

    View full-size slide

  45. Learn More
    stackoverflow.com
    Spring Boot
    spring.io/guides
    JHipster
    www.jhipster.tech
    Auth0
    developer.auth0.com

    View full-size slide

  46. developer.auth0.com
    developer.okta.com
    @oktadev

    View full-size slide

  47. Subscribe to our Zero Index Developer Newsletter!
    a0.to/nl-signup/java

    View full-size slide

  48. Action: Try JHipster! 🚀
    npm i -g generator-jhipster

    View full-size slide

  49. git clone https://github.com/oktadeveloper/okta-spring-web
    fl
    ux-react-example.git
    https://github.com/oktadev/auth0-micro-frontends-jhipster-example
    Use the Source, Luke!

    View full-size slide

  50. Thanks!
    Keep in Touch
    raibledesigns.com
    @mraible
    Presentations
    speakerdeck.com/mraible
    Code
    github.com/oktadev
    developer.okta.com
    developer.auth0.com

    View full-size slide