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

Micro Frontends Lecture, USPCodeLab, University...

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

Michael Geers

July 01, 2021
Tweet

More Decks by Michael Geers

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. Team Decide Team Inspire Team Checkout Fragment Fragment Page fragments

    are embedded mini-applications Michael Geers / @naltatis
  6. 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
  7. 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
  8. 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
  9. Team Search category page Team Checkout mini basket Team Decide

    wishlist Team Account login status 
 feedback 
 support Team Inspire promotion 
 inspiration Michael Geers / @naltatis
  10. Team Search navigation Team Checkout mini basket Team Decide wishlist

    product page Team Account login status 
 feedback 
 support Team Inspire promotion Michael Geers @naltatis
  11. <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
  12. <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
  13. 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>
  14. 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
  15. Linked Single Page Apps Uni fi ed Single Page App

    page transitions between SPAs Michael Geers / @naltatis
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 🚴 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
  22. 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
  23. 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
  24. more details on how to do it M A N

    N I N G Michael Geers Michael Geers / @naltatis my book
  25. 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
  26. 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