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

Micro Frontends Beyond the Buzzword!

Micro Frontends Beyond the Buzzword!

SQUER Solutions

April 18, 2019
Tweet

More Decks by SQUER Solutions

Other Decks in Technology

Transcript

  1. @duffleit leitner.io
    @duffleit leitner.io
    Micro Frontends
    Beyond the Buzzword
    Microservices Vienna

    View Slide

  2. @duffleit leitner.io
    David Leitner
    ▪ Technical Expert/Lead Developer
    at Senacor Technologies
    ▪ Lecturer for post diploma courses
    at UAS Technikum Vienna
    ▪ I do a couple of things around the
    tech-community

    View Slide

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

    View Slide

  4. @duffleit leitner.io
    Disclaimer 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
    Disclaimer 2:
    That's fine in 60 % 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
    ❌ Model around Business Domains
    ❌ 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
    Web Components

    View Slide

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

    View Slide

  13. @duffleit leitner.io
    @duffleit leitner.io
    How to slice?

    View Slide

  14. @duffleit leitner.io
    μService
    Ordering
    μService
    DB
    μService μService
    DB
    DB
    Catalogue Profile
    μService
    DB
    DB
    Hyperlink Hyperlink
    Approach 1:
    Hyperlink Integration

    View Slide

  15. @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 Integration

    View Slide

  16. @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 Integration

    View Slide

  17. @duffleit leitner.io
    Approach 1:
    Hyperlink Integration
    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

  18. @duffleit leitner.io
    Approach 1:
    Hyperlink Integration
    with GraphQL
    μService
    Ordering
    μService
    DB
    μService μService
    DB
    DB
    Catalogue Profile
    μService
    DB
    DB
    Hyperlink Hyperlink
    Dashboard
    Hyperlink
    μService
    DB
    GraphQL
    https://samnewman.io/patterns/architectural/bff/
    Presentation
    Process Flow
    Domain Logic
    Data

    View Slide

  19. @duffleit leitner.io
    The more coarse-grained you can go,
    the more coarse-grained you should go.

    View Slide

  20. @duffleit leitner.io
    But,

    View Slide

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

    View Slide

  22. @duffleit leitner.io

    View Slide

  23. @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

    View Slide

  24. @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

    View Slide

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

    View Slide

  26. @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

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

    View Slide

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

    View Slide

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

    View Slide

  30. @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

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

    View Slide

  32. @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

  33. @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

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

    View Slide

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

  36. @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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. @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

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

    View Slide

  43. @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

  44. @duffleit leitner.io
    @duffleit leitner.io
    How to share state?

    View Slide

  45. @duffleit leitner.io
    Most of the state that needs to be shared
    between child applications is just API data.
    UI-state that isn't in the API
    is much less commonly shared.
    Having a shared API cache can be a simple
    but very efficient solution.

    View Slide

  46. @duffleit leitner.io
    immutable observables
    decouple communication via event-bus
    using a global redux store

    View Slide

  47. @duffleit leitner.io

    View Slide

  48. @duffleit leitner.io
    @duffleit leitner.io
    How to keep the UI consistent?

    View Slide

  49. @duffleit leitner.io
    what designers
    expect us to do
    how it finally
    looks like
    what customers
    would like to see

    View Slide

  50. @duffleit leitner.io
    CDN - for static files
    CMS - for static content
    Component Library

    View Slide

  51. @duffleit leitner.io
    A Component Library
    Within a Project Within a Company
    Monorepo

    View Slide

  52. @duffleit leitner.io
    SPA-A
    component
    library
    Time
    Effort
    2019 2020 2021
    SPA-B
    component
    library
    SPA-C
    component
    library
    a promise that you will save time in the future by reusage.
    a dependency between
    projects.

    View Slide

  53. @duffleit leitner.io
    A little copying is better
    than a little dependency.
    Rob Pike

    View Slide

  54. @duffleit leitner.io
    Low Fidelity High Fidelity Design Toolkits Design
    Specifications
    Component
    Libraries
    Even if something has to look equal,
    it does not have to be technically
    the same.
    Source of truth

    View Slide

  55. @duffleit leitner.io
    If you really need a component library,
    then build it framework agnostic.
    If Angular can be ignored JSX + CSS Modules
    worked good for us.
    And, of course web components.

    View Slide

  56. @duffleit leitner.io https://codeburst.io/building-efficient-components-6ee2bdaea542

    View Slide

  57. @duffleit leitner.io
    @duffleit leitner.io
    All this in a nutshell

    View Slide

  58. @duffleit leitner.io
    Micro Frontends
    in a nutshell
    Integration and Slicing
    Is your
    application
    big?*
    Frontend
    Monolith
    no
    Are UI/Domain
    Parts strongly
    independent?
    yes
    Applications
    integrated with
    Hyperlinks
    no
    Server Side
    Integration
    no
    Are
    Server-Roundtrips
    a problem?
    yes Runtime
    Integration
    yes
    * an application is big enough to justify using micro frontends, if slight UI/UX
    differences between the two most unrelated subpages are acceptable.

    View Slide

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



    APP SHELL
    Header
    Footer

    View Slide

  60. @duffleit leitner.io
    Lots of interactions and
    state-sharing between your
    micro frontends are an
    indicator that your micro
    frontends are too micro.

    View Slide

  61. @duffleit leitner.io
    Think twice before
    creating a company wide
    component library.

    View Slide

  62. @duffleit leitner.io
    Start with a
    monolith first approach
    not with micro frontends.

    View Slide

  63. @duffleit leitner.io
    David Leitner
    Non-Hype-Train-Activist
    @duffleit

    View Slide