$30 off During Our Annual Pro Sale. View Details »

Micro Frontends in the Wild

Micro Frontends in the Wild

NDC London

SQUER Solutions

January 23, 2020
Tweet

More Decks by SQUER Solutions

Other Decks in Technology

Transcript

  1. @duffleit
    Micro
    Frontends
    in the Wild
    .
    NDC London 2020
    David Leitner - @duffleit

    View Slide

  2. @duffleit
    @duffleit
    @duffleit
    [email protected]
    David Leitner
    Lead Engineer

    View Slide

  3. @duffleit
    “microservices are small
    and focused on one thing
    to be autonomous.”

    View Slide

  4. @duffleit

    View Slide

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

    View Slide

  6. @duffleit
    Microservice
    Microservice Microservice
    DB
    DB
    DB
    Microservice
    Microservice Microservice
    DB
    DB
    DB

    View Slide

  7. @duffleit
    Disclaimer:
    That's fine in 80 % of
    the cases.
    SPA
    API
    Gateway
    Microservice
    Microservice Microservice
    DB
    DB
    DB

    View Slide

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

    View Slide

  9. @duffleit
    Microservice
    API
    Gateway
    SPA
    Microservice Microservice
    DB
    DB
    DB
    SPA
    API
    Gateway
    Micro
    Frontends

    View Slide

  10. @duffleit
    μService
    Ordering
    μService
    DB
    μService μService
    DB
    DB
    Catalogue Profile
    μService
    DB
    DB
    Hyperlink Hyperlink

    View Slide

  11. @duffleit

    View Slide

  12. @duffleit
    ✔ 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
    Approach 1:
    Hyperlink Connected Applications
    μService
    Ordering
    μService
    DB
    μService μService
    DB
    DB
    Catalogue Profile
    μService
    DB
    DB
    Hyperlink Hyperlink
    Dashboard
    Hyperlink
    μService
    DB
    ⛔ Overfetching
    ⛔ Overrequesting

    View Slide

  14. @duffleit
    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
    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
    But,

    View Slide

  17. @duffleit
    Hyperlink Integration
    breaks your SPA.

    View Slide

  18. @duffleit
    We introduce another
    horizontal layer.

    View Slide

  19. @duffleit
    μ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

  20. @duffleit
    Only works on a very
    coarse grained level.
    Ordering
    Catalogue
    Hyperlink Hyperlink
    Dashboard

    View Slide

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

    View Slide

  22. @duffleit
    Dashboard
    Profile
    Catalogue
    Ordering
    Ordering
    Catalogue
    Hyperlink Hyperlink
    Dashboard
    Two Definitions of Micro Frontends
    One “Micro Frontend” per page. 2...n Micro Frontends per page.

    View Slide

  23. @duffleit

    View Slide

  24. @duffleit
    Dashboard
    Profile
    Catalogue
    Ordering
    Ordering
    Catalogue
    Hyperlink Hyperlink
    Dashboard
    Two Definitions of Micro Frontends
    One “Micro Frontend” per page. 2...n Micro Frontends per page.

    View Slide

  25. @duffleit
    How to integrate them?
    @duffleit

    View Slide

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

    View Slide

  27. @duffleit
    Repository
    Build & Deploy
    Server
    Browser
    Mono Repo
    package.json
    Composed Application Micro Frontend
    Build Time Integration
    MonoRepo
    ✔ Allows extensive code
    sharing and reuse.
    ✔ No Version Conflicts and
    burden with distributing
    libraries
    Angular
    Workspaces

    View Slide

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

  29. @duffleit
    Build Time Integration allows
    Static Site Generation

    View Slide

  30. @duffleit
    Product
    Product
    Product
    new
    Product
    Product
    Page
    Product
    Page
    Product
    Page
    Product
    Page
    Static Files
    Scully
    Rebuild

    View Slide

  31. @duffleit
    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

  32. @duffleit
    Repository
    Build & Deploy
    Server
    Browser
    Composed Application Micro Frontend
    Server Side Integration
    e.g. Project Mosaic

    View Slide

  33. @duffleit
    Based on the concept of Server Side Includes
    or Edge Side Includes

    View Slide

  34. @duffleit
    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

  35. @duffleit
    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

  36. @duffleit
    @duffleit
    Round Trips

    View Slide

  37. @duffleit
    Repository
    Build & Deploy
    Server
    Browser
    Composed Application Micro Frontend
    Runtime Integration
    Aggregating UI
    Routing, Templates, Lazy Loading
    Meta-SPA-Router

    View Slide

  38. @duffleit
    A Meta
    Framework
    to handle
    Frameworks.

    View Slide

  39. @duffleit
    Meta Framework
    Isolation &
    Composition
    Routing
    Messaging &
    Shared State
    Web Platform
    Isolation &
    Composition
    Routing
    Frontend 1 Frontend N
    ... Frontend N
    Frontend 1 ...

    View Slide

  40. @duffleit
    @duffleit

    View Slide

  41. @duffleit
    @duffleit

    View Slide

  42. @duffleit
    index.html
    Meta Framework
    Isolation &
    Composition
    Routing
    Messaging &
    Shared State
    Web Platform
    Isolation &
    Composition
    Routing
    Messaging &
    Shared State
    Frontend N
    Frontend 1 ... Frontend N
    Frontend 1 ...
    Frontend N + 1

    View Slide

  43. @duffleit
    our environment is the index.html
    immutablewebapps.org
    index.html
    https://12factor.net/

    View Slide

  44. @duffleit
    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

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

    View Slide

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

    View Slide

  47. @duffleit
    Complexities:
    ● UI/UX Consistency
    ● Shared State
    ● Resilience
    ● Tracing/Analytics
    ● Offline-First
    ● ...
    ✔ Independent
    Deployments
    ✔ Distinct
    Operations
    ✔ Technology
    Agnostic
    ✔ Model around
    Business Domains
    ✔ Small Interface
    Surface
    ✔ Parallel
    development

    View Slide

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

    View Slide

  49. @duffleit

    View Slide

  50. @duffleit
    Mix and Match
    Landing Shop Ordering
    hyperlink hyperlink



    APP SHELL
    Header
    Footer

    View Slide

  51. @duffleit
    Micro-Frontends are
    Distributed Systems.
    The Final Secret:

    View Slide

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

    View Slide

  53. @duffleit
    Maybe start with a
    monolithic first approach.

    View Slide

  54. @duffleit
    by: twitter.com/swardley

    View Slide

  55. @duffleit
    @duffleit
    @duffleit
    squer.at/slides
    David Leitner
    Lead Engineer

    View Slide