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

Microfrontends

 Microfrontends

agentconf (Dornbirn, Austria)

event: https://www.agent.sh/

SQUER Solutions

February 22, 2019
Tweet

More Decks by SQUER Solutions

Other Decks in Technology

Transcript

  1. @duffleit
    micro frontends
    a strive for fully verticalized systems _
    @duffleit
    Dornbirn, agent.sh
    photo by Komail Naqvi

    View Slide

  2. @duffleit
    micro frontends
    just another buzzword
    @duffleit
    Dornbirn, agent.sh
    photo by Komail Naqvi

    View Slide

  3. @duffleit
    micro frontends
    voi, leiwand
    @duffleit
    Dornbirn, agent.sh
    photo by Komail Naqvi

    View Slide

  4. @duffleit
    David Leitner
    ▪ Technical Consultant for Senacor Technologies
    ▪ Lecturer for post diploma courses at UAS
    Technikum Vienna
    ▪ I do a couple of things around the tech-
    community
    I‘m writing code

    View Slide

  5. @duffleit
    A definition of micro frontends
    The idea of micro frontends is
    to extend the concepts of micro services
    to the frontend world.

    View Slide

  6. @duffleit
    Sam Newman:
    ▪ small and focused
    on one thing
    ▪ … to be autonomous
    ▪ That‘s it
    WHY we do them?
    Microservices
    * UBERHDTV - https://imgur.com/gallery/nup4lfX
    CVDD
    HDD/EDD
    *

    View Slide

  7. @duffleit
    why autonomous?
    ✅Independent deployments
    ✅Small interface surface
    ✅Technology agnostic
    ✅Based on standards
    ✅Autonomous operations
    ✅Parallel Development

    View Slide

  8. @duffleit
    „Microservices are stated
    as a contrast system to monoliths.“
    Where they came from

    View Slide

  9. @duffleit
    the application
    the database
    Ball of Mud
    Brian Foote
    Joseph Yoder

    View Slide

  10. @duffleit
    database layer
    the database
    business layer
    frontend layer

    View Slide

  11. @duffleit
    database layer
    the database
    business layer
    frontend layer
    Change
    #rippleEffect

    View Slide

  12. @duffleit
    payment
    the database
    products
    user shipping

    View Slide

  13. @duffleit
    DB
    DB
    DB DB DB DB
    DB
    DB
    DB

    View Slide

  14. @duffleit
    DB
    DB
    DB DB DB DB
    DB
    DB
    DB
    Independent deployments
    Autonomous operations
    Technology agnostic
    Based on standards
    Parallel Development
    Small interface surface

    View Slide

  15. @duffleit

    View Slide

  16. @duffleit
    But wait, …
    our microservices have
    actual human users.
    - Stefan Tilkov

    View Slide

  17. @duffleit

    View Slide

  18. @duffleit
    the frontend

    View Slide

  19. @duffleit
    The frontend is …
    not an implementation detail,
    it is a critical part of a
    microservice architecture.

    View Slide

  20. @duffleit
    frontend
    platform
    backend
    platform
    Independent deployments
    Autonomous operations
    Technology agnostic
    Based on standards
    Parallel Development
    Small interface surface
    a frontend monolith was born
    a micro frontend
    TO THE RESCUE
    Independent deployments
    Autonomous operations
    Technology agnostic
    Based on standards
    Parallel Development
    Small interface surface

    View Slide

  21. @duffleit
    So Many Micro Frontends, so WOW

    View Slide

  22. @duffleit
    #1: Hyperlink Integration

    View Slide

  23. @duffleit
    Flavour #1: Hyperlink Integration
    frontend
    platform
    backend
    platform
    Catalogue Ordering Payment Shipping
    hyperlink hyperlink hyperlink

    View Slide

  24. @duffleit
    Flavour #1: Breaking service boundaries
    frontend
    platform
    backend
    platform
    Products Ordering Payment Shipping
    Dash
    board

    View Slide

  25. @duffleit
    Flavour #1: Backend for Frontend
    frontend
    platform
    backend
    platform
    Products Ordering Payment Shipping
    Dash
    board
    BFF BFF BFF BFF BFF
    samnewman.io/patterns/architectural/bff/

    View Slide

  26. @duffleit
    Flavour #1: Hyperlink Integration
    Independent deployments
    Autonomous operations
    Technology agnostic
    Parallel Development

    View Slide

  27. @duffleit
    customers expect
    one company to have one website

    View Slide

  28. @duffleit
    Flavour #1: Reusage Problem
    frontend
    platform
    backend
    platform
    Catalogue Ordering Payment Shipping
    hyperlink hyperlink hyperlink
    Navigation Navigation
    Navigation

    View Slide

  29. @duffleit
    Flavour #1: Hyperlink Integration
    Independent deployments
    Autonomous operations
    Technology agnostic
    Parallel Development
    A consistent UI/UX
    Smooth user interaction
    Fast loading

    View Slide

  30. @duffleit
    #2: Build Time Integration

    View Slide

  31. @duffleit
    Flavour #2: Build Time Integration

    View Slide

  32. @duffleit
    Flavour #2: Build Time Integration
    BUNDLED FRONTED
    UI-Shared-Stuff (e.g. SPA-Framework, Components, Routing)
    Mono
    Repo

    View Slide

  33. @duffleit
    MonoRepo
    Simplifies dependency
    management.
    Allows extensive code
    sharing and reuse.
    package.json
    Shared resources (assets, components…)
    repository

    View Slide

  34. @duffleit
    Flavour #2: Build Time Integration
    Independent deployments
    Autonomous operations
    Technology agnostic
    Parallel Development
    A consistent UI/UX
    Smooth user interaction
    Fast loading*
    BUNDLED FRONTED
    UI-Shared-Stuff (e.g. SPA-Framework, Components)

    View Slide

  35. @duffleit
    #3: Transclusion

    View Slide

  36. @duffleit
    Flavour #3: Transclusion
    BUNDLED FRONTED
    UI-Shared-Stuff (e.g. SPA-Framework, Components)
    The bundling is done
    by the webserver.

    View Slide

  37. @duffleit
    Flavour #3: Server Side Includes or Edge Side Includes








    View Slide

  38. @duffleit
    Flavour #3: Transclusion
    Independent deployments
    Autonomous operations
    Technology agnostic
    Parallel Development
    A consistent UI/UX
    Smooth user interaction
    Fast loading
    BUNDLED FRONTED
    UI-Shared-Stuff (e.g. SPA-Framework, Components)

    View Slide

  39. @duffleit
    #4: App Shell Integration

    View Slide

  40. @duffleit
    Flavour #4: App Shell Integration
    APP SHELL
    Header
    Footer
    The aggregation is
    done on the client.

    View Slide

  41. @duffleit
    Flavour #4: App Shell Integration
    Independent deployments
    Autonomous operations
    Technology agnostic
    Parallel Development
    A consistent UI/UX
    Smooth user interaction
    Fast loading
    APP SHELL
    Header
    Footer

    View Slide

  42. @duffleit
    #5: Metaframework

    View Slide

  43. @duffleit
    Flavour #5: Metaframework
    Route-based
    modularisation is
    handled by a
    Metaframework
    Metaframework
    /catalogue /checkout

    View Slide

  44. @duffleit
    /catalogue /checkout
    APP SHELL
    Header
    Footer
    A matter of modularisation
    Hyperlink Integration App Shell Integration Metaframework

    View Slide

  45. @duffleit
    Flavour #5: Metaframework
    Route-based
    modularisation is
    handled by a
    Metaframework
    Metaframework
    /catalogue /checkout

    View Slide

  46. @duffleit
    • they are implemented with iframes.
    • or start using web components now.
    Flavour #5: Technology agnostic

    View Slide

  47. @duffleit
    Flavour #5: Metaframework
    Metaframework
    /catalogue /checkout
    Independent deployments
    Autonomous operations
    Technology agnostic
    Parallel Development
    A consistent UI/UX
    Smooth user interaction
    Fast loading

    View Slide

  48. @duffleit
    „a consistent UI“
    1) CDN – for static files
    2) CMS – for static content
    3) A Component Library

    View Slide

  49. @duffleit
    „a component library in code“
    SPA-C
    SPA-B
    SPA-A
    component
    library
    Time
    Effort
    2019 2020 2021
    component
    library
    component
    library
    a promise that you will save time in the future by reusage.
    you introduce a dependency
    between your projects.
    copy & own

    View Slide

  50. @duffleit
    >> A little copying is better than
    a little dependency.
    Rob Pike

    View Slide

  51. @duffleit
    „a component library“
    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

  52. @duffleit
    Web Components
    in
    2019
    Think
    they
    do
    What
    they really
    do
    Say
    they
    do
    what people…
    * If you have real world project
    experience with a web-component
    based component library which is
    running in production, let’s chat
    afterwards – I pay the beer.

    View Slide

  53. @duffleit
    a design system > component library
    png component
    Even if something has to look equal,
    it does not have to be technically
    the same.
    Source of truth Technical Representation

    View Slide

  54. @duffleit
    Flavour #5: Metaframework
    Metaframework
    /catalogue /checkout
    Independent deployments
    Autonomous operations
    Technology agnostic
    Parallel Development
    A consistent UI/UX
    Smooth user interaction
    Fast loading

    View Slide

  55. @duffleit
    https://codeburst.io/building-efficient-components-6ee2bdaea542
    the metaframework will be the framework

    View Slide

  56. @duffleit
    Hyperlink Integration
    Build Time Integration
    Transclusion
    App Shell Integration
    Metaframework
    the agony
    of choice

    View Slide

  57. @duffleit
    every consultant.
    always.
    it depends

    View Slide

  58. @duffleit
    A general decision advice
    Your
    application
    is big?*
    The need for
    smooth user
    interaction
    Build Time
    Integration
    Hyperlink
    Integration
    Strongly
    Independent
    UI/Domain
    Parts
    Complex
    modularisation
    needed
    Transclusion
    App Shell
    Integration
    Meta-
    Framework
    * an application is big enough to justify using micro frontends, if slight UI/UX
    differences between the two most unrelated subpages are acceptable.
    Yes
    No

    View Slide

  59. @duffleit
    Compose your perfect MIX
    Landing Shop Ordering
    hyperlink hyperlink
    APP SHELL
    Header
    Footer



    View Slide

  60. @duffleit
    Key-Takeaways
    „Think twice if a frontend
    monolith does not fit your needs
    and start with a monolith first
    approach.“

    View Slide

  61. @duffleit
    Key-Takeaways
    „the 8 facilities of distributed
    computing are called facilities for
    a reason“

    View Slide

  62. @duffleit
    Key-Takeaways
    „Consider the frontend as part of
    your microservice architecture –
    and solve UI specific problems
    with UI specific solutions.“

    View Slide

  63. @duffleit
    Use the right tool
    for the right job.
    @duffleit

    View Slide

  64. @duffleit
    David Leitner
    ▪ Non-Hype-Train-Activist
    ▪ I’m writing code

    View Slide