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

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