Microfrontends

snowcamp.io (Grenoble, France)

event: http://snowcamp.io/

Transcript

1. @duffleit
   micro frontends
   a strive for fully verticalized systems _
   @duffleit
   Grenoble, snowcamp.io
   photo by Komail Naqvi
   

   View 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 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 we do them?
   Microservices
   * UBERHDTV - https://imgur.com/gallery/nup4lfX
   CVDD
   HDD/EDD
   *
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. @duffleit
    payment
    the database
    products
    user shipping
    

    View Slide

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

    View 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 Slide

13. @duffleit
    

    View Slide

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

    View Slide

15. @duffleit
    

    View Slide

16. @duffleit
    the frontend
    

    View Slide

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

    View Slide

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

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

    View Slide

20. @duffleit
    #1: Hyperlink Integration
    

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. @duffleit
    #2: Build Time Integration
    

    View Slide

29. @duffleit
    Flavour #2: Build Time Integration
    

    View Slide

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

    View Slide

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

    View Slide

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

33. @duffleit
    #3: Transclusion
    

    View Slide

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

    View Slide

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

    View Slide

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

37. @duffleit
    #4: App Shell Integration
    

    View Slide

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

    View Slide

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

40. @duffleit
    #5: Metaframework
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

48. @duffleit
    „a component library“
    If you really need a component library,
    then build it technology agnostic
    instead for one framework (version).
    

    View Slide

49. @duffleit
    https://codeburst.io/building-efficient-components-6ee2bdaea542
    

    View Slide

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

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

57. @duffleit
    Key-Takeaways
    „Minimize the shared dependencies
    and design for replacement not for
    reuse.”
    >> A little copying is better than a little dependency.
    Rob Pike
    

    View Slide

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

    View Slide

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

    View Slide