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