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 Slide

  2. @duffleit leitner.io
    David Leitner
    @duffleit

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

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

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

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

    View Slide

  17. @duffleit leitner.io
    But,

    View Slide

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

    View Slide

  19. @duffleit leitner.io

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

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

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

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

    View Slide

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

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

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

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

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

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

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

    View Slide

  34. @duffleit leitner.io
    Meta
    Frame
    Works

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

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

    View Slide

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

    View Slide

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

    View Slide

  46. @duffleit leitner.io

    View Slide

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



    APP SHELL
    Header
    Footer

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide