Micro Frontends - a Strive for fully Verticalized Systems

Voxxed Days Bucharest (Bucharest, Romania)

event: https://romania.voxxeddays.com/

Transcript

1. leitner.io - @duffleit
   micro frontends
   a strive for fully verticalized systems_
   leitner.io - @duffleit
   Voxxed Days Bucharest
   

   View Slide

2. leitner.io - @duffleit
   micro frontends
   just another buzzword_
   leitner.io - @duffleit
   Voxxed Days Bucharest
   

   View Slide

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

4. leitner.io - @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

5. leitner.io - @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

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

   View Slide

7. leitner.io - @duffleit
   „Microservices are stated
   as a contrast system to monoliths.“
   Where they came from
   

   View Slide

8. leitner.io - @duffleit
   the application
   the database
   Ball of Mud
   Brian Foote
   Joseph Yoder
   

   View Slide

9. leitner.io - @duffleit
   database layer
   the database
   business layer
   frontend layer
   

   View Slide

10. leitner.io - @duffleit
    database layer
    the database
    business layer
    frontend layer
    Change
    #rippleEffect
    

    View Slide

11. leitner.io - @duffleit
    payment
    the database
    products
    user shipping
    

    View Slide

12. leitner.io - @duffleit
    DB
    DB
    DB DB DB DB
    DB
    DB
    DB
    

    View Slide

13. leitner.io - @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

14. leitner.io - @duffleit
    

    View Slide

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

    View Slide

16. leitner.io - @duffleit
    

    View Slide

17. leitner.io - @duffleit
    the frontend
    

    View Slide

18. leitner.io - @duffleit
    The frontend is …
    not an implementation detail,
    it is a critical part of a
    microservice architecture.
    

    View Slide

19. leitner.io - @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

20. leitner.io - @duffleit
    

    View Slide

21. leitner.io - @duffleit
    an approach
    driven comparison
    of micro frontends
    

    View Slide

22. leitner.io - @duffleit
    #1: Hyperlink Integration
    

    View Slide

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

    View Slide

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

    View Slide

25. leitner.io - @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. leitner.io - @duffleit
    Flavour #1: Backend for Frontend
    frontend
    platform
    backend
    platform
    Products Ordering Payment
    GraphQL
    Shipping
    Dash
    board
    samnewman.io/patterns/architectural/bff/
    

    View Slide

27. leitner.io - @duffleit
    Flavour #1: Hyperlink Integration
    Independent deployments
    Autonomous operations
    Technology agnostic
    Parallel Development
    

    View Slide

28. leitner.io - @duffleit
    customers expect
    one company to have one website
    

    View Slide

29. leitner.io - @duffleit
    Flavour #1: Reusage Problem
    frontend
    platform
    backend
    platform
    Catalogue Ordering Payment Shipping
    hyperlink hyperlink hyperlink
    Navigation Navigation
    Navigation
    

    View Slide

30. leitner.io - @duffleit
    Consumers
    expect
    How it
    really looks
    Designers
    expect
    what…
    

    View Slide

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

    View Slide

32. leitner.io - @duffleit
    #2: Build Time Integration
    

    View Slide

33. leitner.io - @duffleit
    Flavour #2: Build Time Integration
    

    View Slide

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

    View Slide

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

    View Slide

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

37. leitner.io - @duffleit
    #3: Transclusion
    

    View Slide

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

    View Slide

39. leitner.io - @duffleit
    Flavour #3: Server Side Includes or Edge Side Includes
    
    
    
    
    
    
    
    
    

    View Slide

40. leitner.io - @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

41. leitner.io - @duffleit
    #4: App Shell Integration
    

    View Slide

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

    View Slide

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

44. leitner.io - @duffleit
    #5: Metaframework
    

    View Slide

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

    View Slide

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

    View Slide

47. leitner.io - @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. leitner.io - @duffleit
    „a consistent UI“
    1) CDN – for static files
    2) CMS – for static content
    3) A Component Library
    

    View Slide

49. leitner.io - @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. leitner.io - @duffleit
    >> A little copying is better than
    a little dependency.
    Rob Pike
    

    View Slide

51. leitner.io - @duffleit
    Low Fidelity High Fidelity Design Toolkits Design
    Specifications
    Source of truth
    Even if something has to look equal,
    it does not have to be technically
    the same.
    a design system != component library
    Component
    Libraries
    

    View Slide

52. leitner.io - @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

53. leitner.io - @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

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

    View Slide

55. leitner.io - @duffleit
    Summarize Approaches
    Hyperlink Integration
    /catalogue /checkout
    Metaframework
    Modularization
    APP SHELL
    Header
    Footer
    App Shell Integration
    

    View Slide

56. leitner.io - @duffleit
    Summarize Approaches
    /catalogue /checkout
    APP SHELL
    Header
    Footer
    Hyperlink Integration App Shell Integration Metaframework
    Integration Time
    Frontend Backend Build
    Transclusion
    Build-Time Integration
    Modularization
    

    View Slide

57. leitner.io - @duffleit
    every consultant.
    always.
    it depends
    

    View Slide

58. leitner.io - @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. leitner.io - @duffleit
    Compose your perfect MIX
    Landing Shop Ordering
    hyperlink hyperlink
    APP SHELL
    Header
    Footer
    
    
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

63. leitner.io - @duffleit
    Use the right tool
    for the right job.
    @duffleit
    

    View Slide

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

    View Slide