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

Transcript

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

   Michael Geers

2. Breaking up the Monolith

3. Ne w Tren d presented by The Frontend Monolith

4. popular architectures nowadays Michael Geers / @naltatis

5. Micro Frontends

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

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

   Stuff

8. 🧙 What are micro frontends?

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

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

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

12. cutting

13. pages & fragments* * aka includable Micro Frontends, Podlets, Parcels,

    Pilets, … Michael Geers / @naltatis

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

15. Team Decide Team Inspire Team Checkout Fragment Fragment Page fragments

    are embedded mini-applications Michael Geers / @naltatis

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

17. Team Missions Michael Geers / @naltatis

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

19. stream-aligned teams book recommendation about structuring your organisation’s teams &

    systems Michael Geers / @naltatis

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

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

22. Independent Deployments Michael Geers / @naltatis

23. Real World Projects

24. Klingel Group 5 teams from 4 software companies 
 15

    brands, 12 countries, ~65 shops

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

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

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

    Inspire recommendations

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

    
 support Michael Geers / @naltatis

29. PayPal

30. PayPal Egnineering Blog PayPal Michael Geers / @naltatis

31. Who uses micro frontends? logos link to the sources Michael

    Geers / @naltatis

32. 👩🏭 How can they be implemented?

33. putting it back together

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

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

36. <button> buy for 66 € </button> <em>0 items</em> <html> <em>0

    items</em> <h1>Tractor</h1> <button>buy for 66 €</button> </html> server Team Decide reverse-proxy (nginx, …) server Team Checkout /red-tractor <html> <!--#include virtual=“/checkout/basket“ --> <h1>Tractor</h1> <!--#include virtual=“/checkout/buy“ --> </html> /checkout/basket /checkout/buy /red-tractor composition on the server 
 using SSI or ESI

37. <inspire-reco sku="t_red"> 
 </inspire-reco> <checkout-basket> 
 </checkout-basket> <checkout-buy sku="t_red"> 


    </checkout-buy> composition in the browser with custom elements Michael Geers / @naltatis

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 <inspire-reco sku=“t_porsche“></inspire-reco>

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

40. Linked Single Page Apps Uni fi ed Single Page App

    page transitions between SPAs Michael Geers / @naltatis

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

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

43. different forms of communication Michael Geers / @naltatis

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

45. Michael Geers / @naltatis asynchronous replication between backends

46. 🧚Why would I use micro frontends?

47. 🥇 faster feature development …

48. three 8-person teams are more effective than one 24-person team

    Michael Geers / @naltatis

49. teams should be decoupled

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

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

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

53. fronten d renovatio n without throwing everything away

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

55. 🤹 related stuff

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

57. 🐌 performance

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

59. 🐘 🐘 🐘 reducing redundancy

60. smaller tools mean less redundancy larger runtime hyperapp small runtime

    🐘 🦆 Michael Geers / @naltatis

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

62. 🧫 testing & quality

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

64. more details on how to do it M A N

    N I N G Michael Geers Michael Geers / @naltatis my book

65. book examples the-tractor.store

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

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

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