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

MicroFrontends

 MicroFrontends

DevoxxPL (Krakow, Poland)

http://devoxx.pl

SQUER Solutions

June 24, 2019
Tweet

More Decks by SQUER Solutions

Other Decks in Technology

Transcript

  1. @duffleit leitner.io
    @duffleit leitner.io
    Micro Frontends
    a Strive for Fully Verticalized Systems
    Devoxx Poland

    View full-size slide

  2. @duffleit leitner.io
    David Leitner
    @duffleit

    View full-size slide

  3. @duffleit leitner.io
    “the idea of micro frontends is
    to extend the concept of micro services
    to the frontend world.”
    micro-frontends.org

    View full-size slide

  4. @duffleit leitner.io
    Secret 1:
    That's fine in 80 % of
    the cases.
    SPA
    API
    Gateway
    Microservice
    Microservice Microservice
    DB
    DB
    DB

    View full-size slide

  5. @duffleit leitner.io
    Monolith
    API
    Gateway
    SPA
    DB
    Secret 2:
    That's also fine in 80 %
    of the cases.

    View full-size slide

  6. @duffleit leitner.io
    Microservice
    API
    Gateway
    SPA
    Microservice Microservice
    DB
    DB
    DB

    View full-size slide

  7. @duffleit leitner.io
    Sam Newman
    “microservices are small
    and focused on one thing
    to be autonomous.”

    View full-size slide

  8. @duffleit leitner.io
    Why autonomous?
    ✔ Independent Deployments
    ✔ Distinct Operations
    ✔ Technology Agnostic
    ✔ Model around Business Domains
    ✔ Small Interface Surface
    ✔ Parallel development

    View full-size slide

  9. @duffleit leitner.io
    Microservice
    API
    Gateway
    SPA
    Microservice Microservice
    DB
    DB
    DB
    ❌ Independent Deployments
    ❌ Distinct Operations
    ❌ Technology Agnostic
    ❌ Small Interface Surface
    ❌ Parallel development
    Frontend
    Monolith

    View full-size slide

  10. @duffleit leitner.io
    Microservice
    API
    Gateway
    SPA
    Microservice Microservice
    DB
    DB
    DB
    SPA
    API
    Gateway
    Micro
    Frontends

    View full-size slide

  11. @duffleit leitner.io
    μService
    Ordering
    μService
    DB
    μService μService
    DB
    DB
    Catalogue Profile
    μService
    DB
    DB
    Hyperlink Hyperlink

    View full-size slide

  12. @duffleit leitner.io
    ✔ Independent Deployments
    ✔ Distinct Operations
    ✔ Technology Agnostic
    ✔ Small Interface Surface
    ✔ Model around Business Domains
    ✔ Parallel development
    Based on the assumption to have
    fully verticalized systems.
    μService
    Ordering
    μService
    DB
    μService μService
    DB
    DB
    Catalogue Profile
    μService
    DB
    DB
    Hyperlink Hyperlink
    Approach 1:
    Hyperlink Connected Applications

    View full-size slide

  13. @duffleit leitner.io
    μService
    Ordering
    μService
    DB
    μService μService
    DB
    DB
    Catalogue Profile
    μService
    DB
    DB
    Hyperlink Hyperlink
    Dashboard
    Hyperlink
    μService
    DB
    ⛔ Overfetching
    ⛔ Overrequesting
    Approach 1:
    Hyperlink Connected Applications

    View full-size slide

  14. @duffleit leitner.io
    Approach 1:
    Hyperlink Connected Applications
    with Backend for Frontends
    μService
    Ordering
    μService
    DB
    μService μService
    DB
    DB
    Catalogue Profile
    μService
    DB
    DB
    Hyperlink Hyperlink
    Dashboard
    Hyperlink
    μService
    DB
    BFF
    Service
    BFF
    Service
    BFF
    Service
    BFF
    Service
    https://samnewman.io/patterns/architectural/bff/
    Presentation
    Process Flow
    Domain Logic
    Data
    Presentation
    Process Flow
    Domain Logic
    Data

    View full-size slide

  15. @duffleit leitner.io
    Approach 1:
    Hyperlink Connected Applications
    with GraphQL
    μService
    Ordering
    μService
    DB
    μService μService
    DB
    DB
    Catalogue Profile
    μService
    DB
    DB
    Hyperlink Hyperlink
    Dashboard
    Hyperlink
    μService
    DB
    GraphQL
    Presentation
    Process Flow
    Domain Logic
    Data

    View full-size slide

  16. @duffleit leitner.io
    The more coarse-grained you can go,
    the more coarse-grained you should go.
    Or: Think big.

    View full-size slide

  17. @duffleit leitner.io
    But,

    View full-size slide

  18. @duffleit leitner.io
    Hyperlink Integration
    breaks your SPA.

    View full-size slide

  19. @duffleit leitner.io

    View full-size slide

  20. @duffleit leitner.io
    μService
    Ordering
    μService
    DB
    μService μService
    DB
    DB
    Catalogue Profile
    μService
    DB
    DB
    Hyperlink Hyperlink
    Dashboard
    Hyperlink
    μService
    DB
    View Aggregation Layer
    Horizontal Layer
    Ripple Effect

    View full-size slide

  21. @duffleit leitner.io
    Dashboard
    Profile
    Profile
    μService
    DB
    Catalogue
    μService
    DB
    Catalogue
    Ordering
    Ordering
    μService
    DB
    Dashboard
    μService
    DB

    View full-size slide

  22. @duffleit leitner.io
    Dashboard
    Profile
    Catalogue
    Ordering
    Ordering
    Catalogue
    Hyperlink Hyperlink
    Dashboard
    How to slice?
    One “Micro Frontend” per page. 2...n Micro Frontends per page.

    View full-size slide

  23. @duffleit leitner.io
    How to integrate them?

    View full-size slide

  24. @duffleit leitner.io
    Repository
    Build & Deploy
    Server
    Browser
    Composed Application Micro Frontend
    Build Time Integration Server Side Integration Runtime Integration

    View full-size slide

  25. @duffleit leitner.io
    Repository
    Build & Deploy
    Server
    Browser
    Mono Repo
    package.json
    Composed Application Micro Frontend
    Build Time Integration
    MonoRepo
    ✔ Allows extensive code
    sharing and reuse.
    ✔ Simplifies Dependency
    Management.
    Angular
    Workspaces

    View full-size slide

  26. @duffleit leitner.io
    Repository
    Build & Deploy
    Server
    Browser
    Composed Application Micro Frontend
    Build Time Integration
    ❌ Independent Deployments
    ❌ Distinct Operations
    ❌ Technology Agnostic
    ✔ Small Interface Surface
    ✔ Model around Business Domains
    ✔ Parallel development

    View full-size slide

  27. @duffleit leitner.io
    Repository
    Build & Deploy
    Server
    Browser
    Composed Application Micro Frontend
    Server Side Integration
    Project Mosaic

    View full-size slide

  28. @duffleit leitner.io
    Based on the concept of Server Side Includes
    or Edge Side Includes
    ⛔ JS and CSS global scoped
    ⛔ Round-Trips are needed

    View full-size slide

  29. @duffleit leitner.io
    Tailor is a Layout Server
    header
    fragment
    μService
    account
    fragment
    μService
    catalogue
    fragment
    μService
    maps your request to
    a template
    checkout-template.html ...
    dashboard.template.html
    profile-template.html

    View full-size slide

  30. @duffleit leitner.io
    supports Javascript-Isolation
    init(fragment-dom){
    ...
    }
    How about
    account
    fragment
    μService
    html
    script
    styles
    1...n

    View full-size slide

  31. @duffleit leitner.io
    supports Javascript-Isolation
    account
    fragment
    μService
    html
    script
    styles
    1...n init(fragment-dom){
    ...
    }
    isolate CSS:
    naming-convention
    like BEM

    View full-size slide

  32. @duffleit leitner.io
    Repository
    Build & Deploy
    Server
    Browser
    Composed Application Micro Frontend
    Server Side Integration
    ✔ Independent Deployments
    ✔ Distinct Operations
    ✔ Technology Agnostic
    ✔ Small Interface Surface
    ✔ Model around Business Domains
    ✔ Parallel development

    View full-size slide

  33. @duffleit leitner.io
    Repository
    Build & Deploy
    Server
    Browser
    Composed Application Micro Frontend
    Runtime Integration
    Aggregating UI
    Routing, Templates, Lazy Loading

    View full-size slide

  34. @duffleit leitner.io
    Meta
    Frame
    Works

    View full-size slide

  35. @duffleit leitner.io
    Component Driven Development
    Routing State Management Dependency Injection ...

    View full-size slide

  36. @duffleit leitner.io
    the
    Meta
    Framework
    will be the
    Framework.

    View full-size slide

  37. @duffleit leitner.io
    the aggregation is done on a single point.
    Aggregating UI

    View full-size slide

  38. @duffleit leitner.io
    the aggregation and configuration is done on a single point.
    Aggregating UI

    View full-size slide

  39. @duffleit leitner.io
    the aggregation and configuration is done on a single point.
    immutablewebapps.org
    index.html
    https://12factor.net/

    View full-size slide

  40. @duffleit leitner.io
    Repository
    Build & Deploy
    Server
    Browser
    Composed Application Micro Frontend
    ✔ Independent Deployments
    ✔ Distinct Operations
    ✔ Technology Agnostic
    ✔ Small Interface Surface
    ✔ Model around Business Domains
    ✔ Parallel development
    Runtime Integration

    View full-size slide

  41. @duffleit leitner.io
    Ok, which one to use?

    View full-size slide

  42. @duffleit leitner.io
    Server
    Browser
    Server Side Integration
    Runtime Integration
    Request Response Model
    Interactions between
    different Verticals are done
    on the Backend.
    Longliving App
    State in the frontend &
    verticals need to interact
    with each other.

    View full-size slide

  43. @duffleit leitner.io
    Cool, anything that can go wrong?

    View full-size slide

  44. @duffleit leitner.io
    UI/UX Consistency
    Shared State
    Resilience
    Tracing/Analytics
    Offline-First
    ...

    View full-size slide

  45. @duffleit leitner.io
    1 Micro-Frontend per Page
    Hyperlink Integration
    n Micro-Frontends per Page
    Buildtime Integration
    Serverside Integration
    Runtime Integration

    View full-size slide

  46. @duffleit leitner.io

    View full-size slide

  47. @duffleit leitner.io
    Mix and Match
    Landing Shop Ordering
    hyperlink hyperlink



    APP SHELL
    Header
    Footer

    View full-size slide

  48. @duffleit leitner.io
    Micro-Frontends are
    Distributed Systems.
    The Final Secret:

    View full-size slide

  49. @duffleit leitner.io
    Everything that can
    go wrong will go wrong.
    The Final Secret:
    Murphy’s law

    View full-size slide

  50. @duffleit leitner.io
    Maybe start with a
    monolithic first approach.

    View full-size slide

  51. @duffleit leitner.io
    by: twitter.com/swardley

    View full-size slide

  52. @duffleit leitner.io
    David Leitner
    @duffleit
    slides: leitner.io/talks

    View full-size slide