Inside the Micro Frontends Toolbox

Presented at The Global Dev Study #1.

Transcript

1. inside the micro frontends toolbox
   Michael Geers / @naltatis
   The Global Dev Study #1
   

   View Slide

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
   

   View Slide

3. pages & fragments*
   * aka includable Micro Frontends, Podlets, Parcels, Pilets, …
   Michael Geers / @naltatis
   

   View Slide

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
   

   View Slide

5. Team
   Decide
   Team
   Inspire
   Team Checkout
   Fragment
   Fragment
   Page
   fragments are embedded mini-applications
   Michael Geers / @naltatis
   

   View Slide

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
   

   View Slide

7. each team ships
   
   
   user interface
   Michael Geers / @naltatis
   

   View Slide

8. real world projects
   

   View Slide

9. manufactum.com
   2 teams
   

   View Slide

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

    mini basket fragment
    Michael Geers / @naltatis
    

    View Slide

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

    View Slide

12. Klingel Group
    5 teams from 4 software companies
    

    15 brands, 12 countries, ~65 shops
    

    View Slide

13. Team Search
    
    
    category page
    Team Checkout
    
    
    mini basket
    Team Decide
    
    
    wishlist
    Team Account
    
    
    login status
    

    feedback
    

    support
    Team Inspire
    
    
    promotion
    

    inspiration
    Michael Geers / @naltatis
    

    View Slide

14. Team Search
    
    
    navigation
    Team Checkout
    
    
    mini basket
    Team Decide
    
    
    wishlist
    
    
    product page
    Team Account
    
    
    login status
    

    feedback
    

    support
    Team Inspire
    
    
    promotion
    Michael Geers / @naltatis
    

    View Slide

15. Team Checkout
    
    
    login page
    Team Inspire
    
    
    recommendations
    Team Account
    
    
    feedback
    

    support
    Michael Geers / @naltatis
    

    View Slide

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

    View Slide

17. how do we
    integrate?
    

    View Slide

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

    View Slide

19. 
    
    
    buy for 66 €
    
    
    
    0 items
    
    
    
    0 items
    
    
    Tractor
    
    
    buy for 66 €
    
    
    
    server
    
    
    Team Decide
    reverse-proxy (nginx, …)
    server
    
    
    Team Checkout
    /red-tractor
    
    
    
    
    
    
    Tractor
    
    
    
    
    
    
    /checkout/basket
    /checkout/buy
    /red-tractor
    composition
    
    
    on the server
    

    using SSI or ESI
    

    View Slide

20. 
    

    
    
    

    
    
    

    
    composition
    
    
    in the browser
    

    with Custom Elements
    Michael Geers / @naltatis
    

    View Slide

21. Linked Single Page Apps Uni
    fi
    ed Single Page App
    page transitions between SPAs
    Michael Geers / @naltatis
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

25. but why?
    

    View Slide

26. 🥇 faster feature development …
    

    View Slide

27. three 8-person teams
    
    
    are more effective than
    
    
    one 24-person team
    Michael Geers / @naltatis
    

    View Slide

28. teams should be decoupled
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

32. book examples the-tractor.store
    

    View Slide

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
    

    View Slide

34. thank you for listening!
    
    
    stay healthy
    Michael Geers / @naltatis
    

    View Slide

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
    

    View Slide