Micro Frontends Lecture, USPCodeLab, University of São Paulo

https://www.youtube.com/watch?v=wmFphnY3RbE

Transcript

1. Micro Frontends
   University of São Paulo
   USPCodeLab
   1. July 2021 Michael Geers
   

   View Slide

2. Breaking up
   
   
   the Monolith
   

   View Slide

3. Ne
   w
   Tren
   d
   presented by
   The Frontend Monolith
   

   View Slide

4. popular architectures nowadays
   Michael Geers / @naltatis
   

   View Slide

5. Micro Frontends
   

   View Slide

6. Michael Geers
   
   
   frontend engineer
   
   
   naltatis
   
   
   Twitter & GitHub
   
   
   author of the book
   
   
   Micro Frontends in Action
   
   
   and the website micro-frontends.org
   building tailored e-commerce systems
   

   View Slide

7. The Agenda
   🧙 What?
   🧚 Why?
   👩🏭 How?
   🤹 Related Stuff
   

   View Slide

8. 🧙
   What are micro frontends?
   

   View Slide

9. Nov. 2016
   2017
   2019
   source: ThoughtWorks Technology Radar
   

   View Slide

10. A De
    fi
    nition 1/3
    Our preferred (and proven) approach is to split the browser-based
    code into micro frontends.
    
    
    In this approach, the web application is broken down into its features,
    and each feature is owned, frontend to backend, by a different team.
    
    
    This ensures that every feature is developed, tested and deployed
    independently from other features. …
    source: ThoughtWorks Technology Radar Michael Geers / @naltatis
    

    View Slide

11. A De
    fi
    nition 1/3
    Our preferred (and proven) approach is to split the browser-based
    code into micro frontends.
    
    
    In this approach, the web application is broken down into its features,
    and each feature is owned, frontend to backend, by a different team.
    
    
    This ensures that every feature is developed, tested and deployed
    independently from other features. …
    source: ThoughtWorks Technology Radar Michael Geers / @naltatis
    

    View Slide

12. cutting
    

    View Slide

13. pages & fragments*
    * aka includable Micro Frontends, Podlets, Parcels, Pilets, …
    Michael Geers / @naltatis
    

    View Slide

14. teams can own one or more pages
    2
    33 $
    66 $
    99 $ buy
    2
    1
    66 $
    1
    1
    list
    home detail basket payment confirm
    $ $ %%
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    Customer Journey
    Michael Geers / @naltatis
    

    View Slide

15. Team
    Decide
    Team
    Inspire
    Team Checkout
    Fragment
    Fragment
    Page
    fragments are embedded mini-applications
    Michael Geers / @naltatis
    

    View Slide

16. A De
    fi
    nition 2/3
    Our preferred (and proven) approach is to split the browser-based
    code into micro frontends.
    
    
    In this approach, the web application is broken down into its features,
    and each feature is owned, frontend to backend, by a different team.
    
    
    This ensures that every feature is developed, tested and deployed
    independently from other features. …
    source: ThoughtWorks Technology Radar Michael Geers / @naltatis
    

    View Slide

17. Team Missions
    Michael Geers / @naltatis
    

    View Slide

18. Cross Functional Teams
    
    
    ux/design, frontend
    
    
    backend, data science, ops
    Self-Contained Systems
    
    
    separate applications that
    don’t rely on each other
    End-to-End Responsibility
    
    
    from user interface
    
    
    to database
    Independent Teams & Systems
    Michael Geers / @naltatis
    like a chunky microserivce,
    
    
    but with its own UI
    

    View Slide

19. stream-aligned teams
    book recommendation
    
    
    about structuring your organisation’s
    
    
    teams & systems
    Michael Geers / @naltatis
    

    View Slide

20. each team ships
    
    
    user interface
    Michael Geers / @naltatis
    

    View Slide

21. A De
    fi
    nition 3/3
    Our preferred (and proven) approach is to split the browser-based
    code into micro frontends.
    
    
    In this approach, the web application is broken down into its features,
    and each feature is owned, frontend to backend, by a different team.
    
    
    This ensures that every feature is developed, tested and deployed
    independently from other features. …
    source: ThoughtWorks Technology Radar Michael Geers / @naltatis
    

    View Slide

22. Independent Deployments
    Michael Geers / @naltatis
    

    View Slide

23. Real World Projects
    

    View Slide

24. Klingel Group
    5 teams from 4 software companies
    

    15 brands, 12 countries, ~65 shops
    

    View Slide

25. Team Search
    
    
    category page
    Team Checkout
    
    
    mini basket
    Team Decide
    
    
    wishlist
    Team Account
    
    
    login status
    

    feedback
    

    support
    Team Inspire
    
    
    promotion
    

    inspiration
    Michael Geers / @naltatis
    

    View Slide

26. Team Search
    
    
    navigation
    Team Checkout
    
    
    mini basket
    Team Decide
    
    
    wishlist
    
    
    product page
    Team Account
    
    
    login status
    

    feedback
    

    support
    Team Inspire
    
    
    promotion
    Michael Geers @naltatis
    

    View Slide

27. Team Checkout
    
    
    new basket entry
    Team Decide
    
    
    add-to-cart layer
    Team Inspire
    
    
    recommendations
    

    View Slide

28. Team Checkout
    
    
    login page
    Team Inspire
    
    
    recommendations
    Team Account
    
    
    feedback
    

    support
    Michael Geers / @naltatis
    

    View Slide

29. PayPal
    

    View Slide

30. PayPal Egnineering Blog
    PayPal
    Michael Geers / @naltatis
    

    View Slide

31. Who uses micro frontends?
    logos link to the sources
    Michael Geers / @naltatis
    

    View Slide

32. 👩🏭 How can they be implemented?
    

    View Slide

33. putting
    
    
    it back
    
    
    together
    

    View Slide

34. What needs to be integrated?
    Michael Geers / @naltatis
    

    View Slide

35. Spotify web player (until early 2019) & Desktop App
    
    
    https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/
    composition with iframes
    Michael Geers / @naltatis
    

    View Slide

36. 
    
    
    buy for 66 €
    
    
    
    0 items
    
    
    
    0 items
    
    
    Tractor
    
    
    buy for 66 €
    
    
    
    server
    
    
    Team Decide
    reverse-proxy (nginx, …)
    server
    
    
    Team Checkout
    /red-tractor
    
    
    
    
    
    
    Tractor
    
    
    
    
    
    
    /checkout/basket
    /checkout/buy
    /red-tractor
    composition
    
    
    on the server
    

    using SSI or ESI
    

    View Slide

37. 
    

    
    
    

    
    
    

    
    composition
    
    
    in the browser with
    
    
    custom elements
    Michael Geers / @naltatis
    

    View Slide

38. class InspireReco extends HTMLElement {
    
    
    constructor() {...}
    

    connectedCallback() {...}
    

    attributeChangedCallback(attr, oldVal, newVal) {...}
    

    disconnectedCallback() {...}
    

    }
    
    
    window.customElements.define(“inspire-reco“, InspireReco)
    is created
    attached to DOM
    removed from DOM, cleanup!
    someone changed an attribute
    create your own custom element
    
    

    View Slide

39. 2
    33 $
    66 $
    99 $ buy
    2
    1
    66 $
    1
    1
    list
    home detail basket payment confirm
    $ $ %%
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    Customer Journey
    page transitions using links
    Michael Geers / @naltatis
    

    View Slide

40. Linked Single Page Apps Uni
    fi
    ed Single Page App
    page transitions between SPAs
    Michael Geers / @naltatis
    

    View Slide

41. jobs of the application shell?
    ‣ central entry point for the user
    
    
    ‣ can load, start and stop all SPAs
    
    
    ‣ switches between SPAs if necessary
    Michael Geers / @naltatis
    

    View Slide

42. single-spa
    https://single-spa.js.org/
    ‣ ready-to-use application shell
    
    
    ‣ most popular solution
    
    
    ‣ plugins for nearly all frameworks
    
    
    ‣ also supports composition
    Michael Geers / @naltatis
    

    View Slide

43. different forms of communication
    Michael Geers / @naltatis
    

    View Slide

44. API communication only inside a system
    Michael Geers / @naltatis
    

    View Slide

45. Michael Geers / @naltatis
    asynchronous replication between backends
    

    View Slide

46. 🧚Why would I use micro frontends?
    

    View Slide

47. 🥇 faster feature development …
    

    View Slide

48. three 8-person teams
    
    
    are more effective than
    
    
    one 24-person team
    Michael Geers / @naltatis
    

    View Slide

49. teams should be decoupled
    

    View Slide

50. Frontend
    Payment
    Service
    Content
    Service
    Operations
    Platform
    Business
    Attributes
    Service
    Specialist Teams
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    Cross Functional Teams
    grouped around a use case or customer need
    grouped around a skill or technology
    Michael Geers / @naltatis
    

    View Slide

51. Frontend
    Payment
    Service
    Content
    Service
    Operations
    Platform
    Business
    Attributes
    Service
    Specialist Teams
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    Cross Functional Teams
    grouped around a use case or customer need
    grouped around a skill or technology
    Developing a Features
    Meeting
    s
    
    waiting for others
    ⏳
    Michael Geers / @naltatis
    

    View Slide

52. custome
    r
    focu
    s
    direct feedback
    
    
    no pure API teams
    

    View Slide

53. fronten
    d
    renovatio
    n
    without throwing everything away
    

    View Slide

54. technology change becomes a team decision
    Michael Geers / @naltatis
    

    View Slide

55. 🤹
    related stuff
    

    View Slide

56. avoid micro frontend anarchy
    

    just because you can, doesn’t mean you should
    🧀 🍩 🫐 🥦 🌶 🥓 🍆 🍟 🍊 🥖
    Technology Radar #23
    ‣ agree upon technologies
    
    
    ‣ make it easy to get started
    
    
    ‣ facilitate alignment across teams
    
    
    ‣ don’t over-regulate
    Michael Geers / @naltatis
    

    View Slide

57. 🐌
    performance
    

    View Slide

58. 🚴
    micro frontend sites
    
    
    can be very fast
    
    
    or slow - it’s mostly about good engineering
    all using a
    

    micro frontends
    

    architecture
    source: Textil Wirtschaft
    Analyses of loading performance (LCP)
    in German fashion e-commerce shops
    

    View Slide

59. 🐘
    
    
    🐘
    
    
    🐘
    reducing redundancy
    

    View Slide

60. smaller tools mean less redundancy
    larger runtime
    hyperapp
    small runtime
    🐘
    🦆
    Michael Geers / @naltatis
    

    View Slide

61. reusing vendor libraries between systems
    with import maps with module federation
    A B C
    central library
    
    
    repository
    lib-1 lib-2
    A B C
    lib-1 lib-2
    peer-to-peer approach
    applications can reuse already loaded libraries
    from inside other applications
    applications can reference central libraries
    
    
    to reduce their bundle size
    ♻
    https://github.com/systemjs/systemjs/blob/master/docs/import-maps.md https://module-federation.github.io
    

    View Slide

62. 🧫 testing & quality
    

    View Slide

63. testing in isolation
    fragments are self-contained
    
    
    they can work without a page context
    mock
    
    
    fragment
    this page works
    
    
    even without fragments from others
    majority
    
    of tests
    

    View Slide

64. more details
    on how to do it
    M A N N I N G
    Michael Geers
    Michael Geers / @naltatis
    my book
    

    View Slide

65. book examples the-tractor.store
    

    View Slide

66. need more?
    micro-frontends.org
    
    
    article by Cam Jackson
    
    
    article by Gustaf Nilsson Kotte
    

    blogposts by Florian Rappl
    
    
    blogposts by Luca Mezzalira
    
    
    👓 awesomelist by Rajasegar Chandran
    Michael Geers / @naltatis
    

    View Slide

67. thank you for listening!
    
    
    stay healthy
    Michael Geers / @naltatis
    

    View Slide

68. Low Top Turnschuhe Natã Romualdo
    

    https://www.pexels.com/de-de/foto/braune-low-top-
    turnschuhe-2904284/
    
    
    Monolith 1 Jeff Hendricks
    

    https://unsplash.com/photos/yIKdc86jNBs
    
    
    Monolith 2 Rana Osman
    

    https://unsplash.com/photos/JcSsu-NF3qo
    
    
    Buildings Juhasz Imre
    

    https://www.pexels.com/photo/apartment-architecture-
    buildings-business-425047/
    
    
    Metal Blade Russ Ward
    

    https://unsplash.com/photos/aMlbxs8SYig
    
    
    Man Welding Metal Kateryna Babaieva
    

    https://www.pexels.com/photo/man-welding-
    metal-2880871/
    
    
    Action Bicycling Roman Pohorecki
    

    https://www.pexels.com/photo/action-bicycling-bike-
    biking-287398/
    
    
    Running Kids (me)
    
    
    The Tool Guy Tirachard Kumtanom
    

    https://unsplash.com/photos/UuW4psOb388
    
    
    Woodshop Igor Ovsyannykov
    

    https://unsplash.com/photos/iXV0i4Wo4yc
    
    
    Tractors Manufactum
    

    https://www.manufactum.com/tin-toys-c193667/
    image credits
    built with micro frontends
    

    View Slide