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

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

JAX Mainz / Remote

SQUER Solutions

May 06, 2021
Tweet

More Decks by SQUER Solutions

Other Decks in Technology

Transcript

  1. @duffleit
    MicroFrontends
    Vergangenheit, Gegenwart & Zukunft
    JAX 2021
    Mainz / Remote, Mai 2021

    View Slide

  2. @duffleit
    @duffleit
    @duffleit
    [email protected]
    David Leitner
    Coding Architect

    View Slide

  3. @duffleit

    View Slide

  4. @duffleit
    Montag, 29.02.2016

    View Slide

  5. @duffleit

    View Slide

  6. @duffleit
    ~ 160 Views
    ~ 240 Models

    View Slide

  7. @duffleit
    Transactions
    Overview
    Payment
    Creation
    Self Service
    Console
    hyperlink
    hyperlink

    View Slide

  8. @duffleit
    MicroFrontends @ v0.0.1-alpha

    View Slide

  9. @duffleit
    https://bluepnume.medium.com/less-is-more-reducing-thousands-of-paypal-buttons-into-a-single-iframe-using-xcomponent-d902d71d8875

    View Slide

  10. @duffleit
    Transactions
    Overview
    Payment
    Creation
    Self Service
    Console
    iframe
    iframe
    hyperlink
    hyperlink

    View Slide

  11. @duffleit
    2016
    Hyperlink

    View Slide

  12. @duffleit
    hyperlink

    View Slide

  13. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    > 50%
    of internet trafic from
    phones
    ServerSide
    Integration

    View Slide

  14. @duffleit
    Transactions
    Overview
    Payment
    Creation
    Self Service
    Console
    iframe
    hyperlink
    hyperlink
    SelfService
    μService

    View Slide

  15. @duffleit
    EdgeService
    Payment
    Creation
    fragment
    SelfService
    μService
    Payment Creation
    μService

    View Slide

  16. @duffleit
    Server Side Includes
    or Edge Side Includes
    Project Mosaic

    View Slide

  17. @duffleit

    View Slide

  18. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes

    View Slide

  19. @duffleit
    Round Trips

    View Slide

  20. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes

    View Slide

  21. @duffleit
    App Shell
    /create-payment
    template
    /overview
    template
    Payment
    μService
    Transactions
    Overview
    Self Service
    Console
    Self Service μService
    Payment
    Creation
    Transactions
    μService
    request
    Self Service
    Console
    Payment
    Creation
    navigation
    navigation

    View Slide

  22. @duffleit
    • Meta-Router
    • State Sharing
    • Authn/Authz

    View Slide

  23. @duffleit
    App Shell
    Payment
    μService
    Transactions
    Overview
    Self Service
    Console
    Self Service μService
    Payment
    Creation
    Transactions
    μService
    request
    /overview
    template
    /create-payment
    template
    Self Service
    Console
    Payment
    Creation
    navigation
    navigation

    View Slide

  24. @duffleit

    View Slide

  25. @duffleit

    View Slide

  26. @duffleit
    App Shell
    Payment
    μService
    Transactions
    Overview
    Self Service
    Console
    Self Service μService
    Payment
    Creation
    Transactions
    μService
    request
    /overview
    template
    /create-payment
    template
    Self Service
    Console
    Payment
    Creation
    navigation
    navigation
    Externals
    window.ng.core =
    @angular/core
    bundle

    View Slide

  27. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes
    meta-spa-router
    First
    Meaningful
    Paint!

    View Slide

  28. @duffleit
    0 sec 0.3 sec 0.5 sec 0.7 sec
    First
    Meaningful
    Paint
    JS

    View Slide

  29. @duffleit
    Progressive Enhancement

    View Slide

  30. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes
    meta-spa-router
    Progressive
    Enhancement
    ?

    View Slide

  31. @duffleit
    App Shell
    Payment
    μService
    Transactions
    Overview
    Self Service
    Console
    Self Service μService
    Payment
    Creation
    Transactions
    μService
    request
    /overview
    template
    /create-payment
    template
    Self Service
    Console
    Payment
    Creation
    navigation
    navigation

    View Slide

  32. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes
    meta-spa-router
    Progressive
    Enhancement

    View Slide

  33. @duffleit
    Host - Container

    Client - Container
    < Profile />
    ProfileService

    View Slide

  34. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes
    meta-spa-router

    View Slide

  35. @duffleit
    David Leitner @ DevoxxUA 2018: Micro Frontends – a strive for fully Verticalized Systems
    https://www.youtube.com/watch?v=oxVRG71rF3w

    View Slide

  36. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes
    meta-spa-router

    View Slide

  37. @duffleit
    Aber auch wenn mit Module
    Federation vieles besser wird*,
    oft ist ein Frontend Monolith für die
    gegebenen Anforderungen auch
    “cool genug”. 😎

    View Slide

  38. @duffleit
    by: twitter.com/swardley

    View Slide

  39. @duffleit
    David Leitner
    Coding Architect
    [email protected]
    All das Präsentiert
    und vieles mehr:

    View Slide

  40. @duffleit
    Let’s talk about
    MicroFrontends:
    David Leitner
    Coding Architect
    [email protected]

    View Slide