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

Inside the Micro Frontends Toolbox

Inside the Micro Frontends Toolbox

Presented at The Global Dev Study #1.

Michael Geers

May 11, 2021

More Decks by Michael Geers

Other Decks in Technology


  1. inside the micro frontends toolbox Michael Geers / @naltatis The

    Global Dev Study #1
  2. 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
  3. pages & fragments* * aka includable Micro Frontends, Podlets, Parcels,

    Pilets, … 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. 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
  7. each team ships user interface Michael Geers / @naltatis

  8. real world projects

  9. manufactum.com 2 teams

  10. Team Sell product page Team After-Sell login status fragment 

    mini basket fragment Michael Geers / @naltatis
  11. Team Sell navigation fragment Team After-Sell basket page Michael Geers

    / @naltatis
  12. Klingel Group 5 teams from 4 software companies 

    brands, 12 countries, ~65 shops
  13. Team Search category page Team Checkout mini basket Team Decide

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

    product page Team Account login status 
 support Team Inspire promotion Michael Geers / @naltatis
  15. Team Checkout login page Team Inspire recommendations Team Account feedback

 support Michael Geers / @naltatis
  16. Who uses micro frontends? logos link to the sources Michael

    Geers / @naltatis
  17. how do we integrate?

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

  19. <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
  20. <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
  21. Linked Single Page Apps Uni fi ed Single Page App

    page transitions between SPAs Michael Geers / @naltatis
  22. 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
  23. 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
  24. libraries & meta frameworks https://github.com/zalando/tailor https://github.com/opencomponents/oc Podium https://podium-lib.io meta-spa-router https://github.com/manfredsteyer/meta-router

    https://github.com/onerzafer/microfe-client Piral https://piral.io Ara https://github.com/ara-framework puzzle.js https://github.com/puzzle-js https://github.com/SAP/luigi Luigi https://qiankun.umijs.org ILC https://github.com/namecheap/ilc icestark https://ice-lab.github.io/icestark/ Michael Geers / @naltatis
  25. but why?

  26. 🥇 faster feature development …

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

    Michael Geers / @naltatis
  28. teams should be decoupled

  29. 🐌 micro frontends are bad for #webperf, right?

  30. 🚴 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
  31. I’ve written a book 270 pages 143 illustrations 21 examples

 64 listings 35% off with code mtpdevstudy21 and all other books at manning.com M A N N I N G Michael Geers Michael Geers / @naltatis
  32. book examples the-tractor.store

  33. 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
  34. thank you for listening! stay healthy Michael Geers / @naltatis

  35. St. Mary Axe Bruno Glätsch 
 https://www.pexels.com/photo/low-angle-photography- of-30-st-mary-axe-1397752/ 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) Tractors Manufactum 
 https://www.manufactum.com/tin-toys-c193667/ image credits built with micro frontends