Micro Frontends for Java Microservices - Denver Microservices 2023

Transcript

1. Micro Frontends
   
   
   for Java Microservices
   June 27, 2023
   Matt Raible | @mraible
   Photo by Pieter van de Sande
   

   https://unsplash.com/photos/r6BdUpN_iSk
   

   View 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 Slide

3. View Slide

4. View Slide

5. View Slide

6. developer.okta.com
   

   View Slide

7. developer.auth0.com
   

   View Slide

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!
   

   View Slide

9. Microservices Visionaries
   

   View Slide

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
    

    View Slide

11. View Slide

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

    View Slide

13. Microservices with Java
    

    View Slide

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
    🍃
    

    View Slide

15. View Slide

16. View Slide

17. Spring WebFlux!
    

    View Slide

18. 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 Slide

19. 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 Slide

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

    View Slide

21. What is JHipster?
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

25. https://start.jhipster.tech
    

    View Slide

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

    View Slide

27. View Slide

28. JHipster Microservices Architecture
    

    View Slide

29. JHipster Micro Frontends Architecture
    

    View Slide

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

    View Slide

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

    View Slide

32. Why should Java developers care?
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

37. Spring Cloud Gateway
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. https://dev.to/jhipster
    

    View Slide

44. npm install -g generator-jhipster-kotlin
    

    View Slide

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

    View Slide

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

    View Slide

47. What You Learned
    

    View Slide

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

    View Slide

49. JHipster is Knowledge
    

    View Slide

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

    View Slide

51. 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 Slide

52. 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 Slide

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

    View Slide

54. developer.auth0.com
    
    
    @oktadev
    

    View Slide

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

    View Slide

56. 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 Slide

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

    View Slide

58. developer.okta.com
    

    View Slide