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

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