$30 off During Our Annual Pro Sale. View Details »

Inside the Micro Frontends Toolbox

Inside the Micro Frontends Toolbox

Presented at The Global Dev Study #1.

Michael Geers

May 11, 2021
Tweet

More Decks by Michael Geers

Other Decks in Technology

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