Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

July 01, 2021
Tweet

More Decks by Michael Geers

Other Decks in Technology

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