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

Bye Bye Frontend Monolith: Accelerating Feature Development with Micro Frontends

Bye Bye Frontend Monolith: Accelerating Feature Development with Micro Frontends

Working on a large monolithic codebase is cumbersome. No single person has an overview of all functionality. Evolving the software becomes slow and the risk of breaking something increases. Adopting new technologies requires a lot of effort. The microservices pattern solved a lot of these issues. However, in most projects, it’s only applied to backend code. Most modern frontends are still monoliths, often tied to a single JavaScript framework.
The micro frontends architecture changes this. There you split the application into vertical slices which can be developed and deployed by autonomous cross-functional teams. So beside caring about database and business logic, each team also develops their own part of the user interface. This talk will illustrate the reasoning behind micro frontends. You’ll learn why more and more companies are starting to adopt this pattern. We’ll also discuss the challenges and typical pitfalls this approach introduces.

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

May 06, 2021
Tweet

Transcript

  1. bye bye frontend monolith accelerating feature development with micro frontends

    Michael Geers / @naltatis #PhillyETE / Emerging Technologies for the Enterprise 2021
  2. Breaking up the Monolith

  3. Ne w Tren d presented by The Frontend Monolith

  4. popular architectures nowadays Michael Geers / @naltatis

  5. Micro Frontends

  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
  7. The Agenda 🧙 What? 🧚 Why? 👩🏭 How? 🐲 Myths

  8. 🧙 What are micro frontends?

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

  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
  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
  12. cutting

  13. pages & fragments* * aka includable Micro Frontends, Podlets, Parcels,

    Pilets, … Michael Geers / @naltatis
  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 illustration: Micro Frontends in Action Michael Geers / @naltatis
  15. Team Decide Team Inspire Team Checkout Fragment Fragment Page fragments

    are embedded mini-applications illustration: Micro Frontends in Action Michael Geers / @naltatis
  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
  17. Team Missions Michael Geers / @naltatis illustration: Micro Frontends in

    Action
  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 illustration: Micro Frontends in Action Michael Geers / @naltatis like a chunky microserivce, but with its own UI
  19. each team ships user interface Michael Geers / @naltatis

  20. 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
  21. Independent Deployments illustration: Micro Frontends in Action Michael Geers /

    @naltatis
  22. Real World Projects

  23. manufactum.com 2 teams

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


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

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

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

    wishlist Team Account login status 
 feedback 
 support Team Inspire promotion 
 inspiration Michael Geers / @naltatis
  28. Team Checkout login page Team Inspire recommendations Team Account feedback

    
 support Michael Geers / @naltatis
  29. PayPal

  30. PayPal Egnineering Blog PayPal Michael Geers / @naltatis

  31. Who uses micro frontends? logos link to the sources Michael

    Geers / @naltatis
  32. 👩🏭 How can they be implemented?

  33. putting it back together

  34. What needs to be integrated? illustration: Micro Frontends in Action

    Michael Geers / @naltatis
  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
  36. <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
  37. <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
  38. 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 illustration: Micro Frontends in Action Michael Geers / @naltatis
  39. Linked Single Page Apps Uni fi ed Single Page App

    page transitions between SPAs illustration: Micro Frontends in Action Michael Geers / @naltatis
  40. jobs of the application shell? ‣ central entry point for

    the user ‣ can load, start and stop all SPAs ‣ switches between SPAs if necessary illustration: Micro Frontends in Action Michael Geers / @naltatis
  41. 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
  42. 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
  43. 🧚Why would I use micro frontends?

  44. 🥇 faster feature development …

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

    Michael Geers / @naltatis
  46. teams should be decoupled

  47. 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 illustration: Micro Frontends in Action
  48. 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
  49. custome r focu s direct feedback no pure API teams

  50. fronten d renovatio n without throwing everything away

  51. technology change becomes a team decision illustration: Micro Frontends in

    Action Michael Geers / @naltatis
  52. 🐲 micro frontend myths

  53. micro frontends produce ugly tech mixes 🧀 🍩 🫐 


    🥦 
 🌶 
 🥓 
 🍆 
 🍟 
 🍊 

  54. how micro frontends did not work out for League of

    Legends Twitter thread by Jules Glegg / @heyjulesfern (June 2019)
  55. micro frontend anarchy 
 just because you can, doesn’t mean

    you should 🧀 🍩 🫐 🥦 🌶 🥓 🍆 🍟 🍊 🥖 Technology Radar #23 ‣ agree upon a tech stack ‣ make it easy to get started (starter kit, blueprint) ‣ exchange learnings between teams ‣ try not to over-regulate Michael Geers / @naltatis
  56. 🐌 micro frontends are bad for performance

  57. 🚴 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
  58. 🐘 🐘 🐘 but what about the redundancy?

  59. smaller tools mean less redundancy larger runtime hyperapp small runtime

    🐘 🦆 Michael Geers / @naltatis
  60. 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
  61. I’ve written a book 270 pages 143 illustrations 21 examples

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

  63. 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
  64. book recommendation about structuring your organisation’s teams & systems Michael

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

  66. Mirror Facade Jonas Ferlin 
 https://www.pexels.com/photo/mirror-facade-of-tall- building-1963557/ 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