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

    are embedded mini-applications Michael Geers / @naltatis
  4. 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
  5. Team Sell product page Team After-Sell login status fragment 

    mini basket fragment Michael Geers / @naltatis
  6. Team Search category page Team Checkout mini basket Team Decide

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

    product page Team Account login status 
 support Team Inspire promotion Michael Geers / @naltatis
  8. <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
  9. <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
  10. Linked Single Page Apps Uni fi ed Single Page App

    page transitions between SPAs Michael Geers / @naltatis
  11. 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
  12. 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
  13. 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
  14. 🚴 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
  15. 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
  16. 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
  17. 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