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

Devoxx Ukraine 2019 (Kyiv, Ukraine)

event: https://devoxx.org.ua/
pptx (with animations): https://drive.google.com/open?id=1POg2y9Q09sW8NTwnhsN3C8lkUsYZ97aS

SQUER Solutions

November 23, 2018
Tweet

More Decks by SQUER Solutions

Other Decks in Technology

Transcript

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

    View full-size slide

  2. @duffleit
    David Leitner
    § Technical Expert at 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 full-size 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 full-size slide

  4. @duffleit
    Sam Newman:
    § small and focused
    on one thing
    § … to be autonomous
    § That‘s it
    WHY we do them?
    Microservices

    !
    CVDD
    HDD/EDD

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. @duffleit
    payment
    the database
    products
    user shipping

    View full-size slide

  11. @duffleit
    DB
    DB
    DB DB DB DB
    DB
    DB
    DB

    View full-size slide

  12. @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 full-size slide

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

    View full-size slide

  14. @duffleit
    the frontend

    View full-size slide

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

    View full-size slide

  16. @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 full-size slide

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

    View full-size slide

  18. @duffleit
    ! Hyperlink Integration

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. @duffleit
    ! Build Time Integration

    View full-size slide

  27. @duffleit
    Flavour #2: Build Time Integration

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  31. @duffleit
    ! Transclusion

    View full-size slide

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

    View full-size slide

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








    View full-size 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 full-size slide

  35. @duffleit
    ! App Shell Integration

    View full-size slide

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

    View full-size 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 full-size slide

  38. @duffleit
    ! Metaframework

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. @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 full-size slide

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



    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. @duffleit
    If you liked this talk – vote for it.
    I’m David Leitner
    Non-Hype-Train-Activist
    & Enthusiastic Developer
    @duffleit

    View full-size slide