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

Micro Frontends for Java Developers - Devoxx UK 2023

Micro Frontends for Java Developers - Devoxx UK 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 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.

YouTube recording: https://www.youtube.com/watch?v=1aHYER3x4p0
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

May 11, 2023
Tweet

More Decks by Matt Raible

Other Decks in Programming

Transcript

  1. Micro Frontends


    for Java Microservices
    May 11, 2023
    Matt Raible | @mraible
    Photo by Veliko Karachiviev

    https://unsplash.com/photos/hSvagWirWPA

    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
    developer.okta.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. Native Federation
    https://twitter.com/ManfredSteyer/status/1564312149580582912

    View full-size slide

  25. Why should Java developers care?

    View full-size slide

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

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

    View full-size slide

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

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

  30. Spring Cloud Gateway

    View full-size slide

  31. Relay an access token in Spring Cloud Gateway
    spring:


    cloud:


    gateway:


    default-filters:


    - TokenRelay


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. https://dev.to/jhipster

    View full-size slide

  37. npm install -g generator-jhipster-kotlin

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. What You Learned

    View full-size slide

  41. What’s Next for JHipster?
    SCIM
    Spring Boot 3
    GraphQL
    * These are my personal interests.

    View full-size slide

  42. JHipster is Knowledge

    View full-size slide

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

    View full-size slide

  44. The JHipster Mini-Book

    Written with Asciidoctor


    Free download from InfoQ:


    infoq.com/minibooks/jhipster-mini-book


    Quick and to the point, 157 pages


    Developed a real-world app:


    www.21-points.com


    Buy for $20 or download for FREE

    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.okta.com/blog/tags/java


    @oktadev

    View full-size slide

  47. developer.auth0.com


    @auth0

    View full-size slide

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

    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

  51. developer.okta.com

    View full-size slide