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

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

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. Micro Frontends
    University of São Paulo
    USPCodeLab
    1. July 2021 Michael Geers

    View Slide

  2. Breaking up


    the Monolith

    View Slide

  3. Ne
    w
    Tren
    d
    presented by
    The Frontend Monolith

    View Slide

  4. popular architectures nowadays
    Michael Geers / @naltatis

    View Slide

  5. Micro Frontends

    View Slide

  6. 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

  7. The Agenda
    🧙 What?
    🧚 Why?
    👩🏭 How?
    🤹 Related Stuff

    View Slide

  8. 🧙
    What are micro frontends?

    View Slide

  9. Nov. 2016
    2017
    2019
    source: ThoughtWorks Technology Radar

    View Slide

  10. 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

    View Slide

  11. 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

    View Slide

  12. cutting

    View Slide

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

    View Slide

  14. 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

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

    View Slide

  16. 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

    View Slide

  17. Team Missions
    Michael Geers / @naltatis

    View Slide

  18. 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

  19. stream-aligned teams
    book recommendation


    about structuring your organisation’s


    teams & systems
    Michael Geers / @naltatis

    View Slide

  20. each team ships


    user interface
    Michael Geers / @naltatis

    View Slide

  21. 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

    View Slide

  22. Independent Deployments
    Michael Geers / @naltatis

    View Slide

  23. Real World Projects

    View Slide

  24. Klingel Group
    5 teams from 4 software companies

    15 brands, 12 countries, ~65 shops

    View Slide

  25. 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

  26. 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

  27. Team Checkout


    new basket entry
    Team Decide


    add-to-cart layer
    Team Inspire


    recommendations

    View Slide

  28. Team Checkout


    login page
    Team Inspire


    recommendations
    Team Account


    feedback

    support
    Michael Geers / @naltatis

    View Slide

  29. PayPal

    View Slide

  30. PayPal Egnineering Blog
    PayPal
    Michael Geers / @naltatis

    View Slide

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

    View Slide

  32. 👩🏭 How can they be implemented?

    View Slide

  33. putting


    it back


    together

    View Slide

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

    View Slide

  35. Spotify web player (until early 2019) & Desktop App


    https://labs.spotify.com/2019/03/25/building-spotifys-new-web-player/
    composition with iframes
    Michael Geers / @naltatis

    View Slide




  36. 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










  37. composition


    in the browser with


    custom elements
    Michael Geers / @naltatis

    View Slide

  38. 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

    View Slide

  39. 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

    View Slide

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

    View Slide

  41. 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

  42. 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

  43. different forms of communication
    Michael Geers / @naltatis

    View Slide

  44. API communication only inside a system
    Michael Geers / @naltatis

    View Slide

  45. Michael Geers / @naltatis
    asynchronous replication between backends

    View Slide

  46. 🧚Why would I use micro frontends?

    View Slide

  47. 🥇 faster feature development …

    View Slide

  48. three 8-person teams


    are more effective than


    one 24-person team
    Michael Geers / @naltatis

    View Slide

  49. teams should be decoupled

    View Slide

  50. 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

    View Slide

  51. 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

    View Slide

  52. custome
    r
    focu
    s
    direct feedback


    no pure API teams

    View Slide

  53. fronten
    d
    renovatio
    n
    without throwing everything away

    View Slide

  54. technology change becomes a team decision
    Michael Geers / @naltatis

    View Slide

  55. 🤹
    related stuff

    View Slide

  56. 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

    View Slide

  57. 🐌
    performance

    View Slide

  58. 🚴
    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

  59. 🐘


    🐘


    🐘
    reducing redundancy

    View Slide

  60. smaller tools mean less redundancy
    larger runtime
    hyperapp
    small runtime
    🐘
    🦆
    Michael Geers / @naltatis

    View Slide

  61. 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

    View Slide

  62. 🧫 testing & quality

    View Slide

  63. 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

    View Slide

  64. more details
    on how to do it
    M A N N I N G
    Michael Geers
    Michael Geers / @naltatis
    my book

    View Slide

  65. book examples the-tractor.store

    View Slide

  66. 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

  67. thank you for listening!


    stay healthy
    Michael Geers / @naltatis

    View Slide

  68. 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

    View Slide