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

Micro Frontends - a strive for fully verticalized systems

Micro Frontends - a strive for fully verticalized systems

Agile Tour 2018 (Vienna, Austria)

event: https://agiletourvienna.at/
pptx (with animations): https://drive.google.com/open?id=1POg2y9Q09sW8NTwnhsN3C8lkUsYZ97aS

SQUER Solutions

October 06, 2018
Tweet

More Decks by SQUER Solutions

Other Decks in Programming

Transcript

  1. @duffleit
    micro frontends
    a strive for fully verticalized systems _

    View Slide

  2. @duffleit
    David Leitner
    § Technical Expert at Senacor Technologies
    § Lecturer for post diploma courses at UAS
    Technikum Wien
    § I do a couple of things around the tech-
    community
    § I‘m writing code

    View Slide

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

  4. @duffleit
    Sam Newman:
    § small and focused
    on one thing
    § … to be autonomous
    § That‘s it
    WHY do we need this?
    Independent deployments
    Autonomous operations
    Technology agnostic
    Based on standards
    Parallel Development
    Small interface surface
    Microservices

    View Slide

  5. @duffleit
    „Microservices are stated
    as a contrast system to monoliths.“
    The WHERE

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. @duffleit
    payment
    the database
    products
    user shipping

    View Slide

  10. @duffleit
    DB
    DB
    DB DB DB DB
    DB
    DB
    DB

    View Slide

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

  12. @duffleit

    View Slide

  13. @duffleit
    But wait, …
    our microservices have
    actual human users?

    View Slide

  14. @duffleit

    View Slide

  15. @duffleit
    the frontend

    View Slide

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

    View Slide

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

  18. @duffleit
    A micro frontend?
    …which one do you want to have?

    View Slide

  19. @duffleit
    ! Hyperlink Integration

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

  24. @duffleit
    What customers expect:
    1 Company === 1 Website
    I don‘t want to
    maintain this
    UI/UX anymore.

    View Slide

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

    View Slide

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

    View Slide

  27. @duffleit
    ! Build Time Integration

    View Slide

  28. @duffleit
    Flavour #2: Build Time Integration

    View Slide

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

    View Slide

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

  31. @duffleit
    ! Transclusion

    View Slide

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

    View Slide

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








    View Slide

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

  35. @duffleit
    ! App Shell Integration

    View Slide

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

    View Slide

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

  38. @duffleit
    ! Metaframework

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

  43. @duffleit
    „a consistent UI“
    ! CDN – for static files
    " CMS – for static content
    # A Component Library
    $ for one framework
    $ technology agnostic

    View Slide

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

    View Slide

  45. @duffleit
    A consultant‘s favourite words.
    It depends

    View Slide

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

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



    View Slide

  48. @duffleit
    Key-Takeaways
    KISS: „think twice if a frontend
    monolith does not fit your needs
    and start with a monolith first
    approach.“

    View Slide

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

    View Slide

  50. @duffleit
    Key-Takeaways
    „micro frontends are not a stack or
    technology – everyone who tells you
    this, wants to sell you something.“

    View Slide

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

    View Slide