{"id":443,"date":"2023-09-29T10:00:00","date_gmt":"2023-09-29T10:00:00","guid":{"rendered":"https:\/\/jacar.es\/micro-frontends-practica\/"},"modified":"2023-09-29T10:00:00","modified_gmt":"2023-09-29T10:00:00","slug":"micro-frontends-practica","status":"publish","type":"post","link":"https:\/\/jacar.es\/en\/micro-frontends-practica\/","title":{"rendered":"Micro-frontends in Practice: Benefits and Pitfalls"},"content":{"rendered":"<p><strong>Micro-frontends<\/strong> apply the microservices idea to the UI: split a large app into pieces that different teams can develop, deploy, and operate independently. The promise is appealing \u2014 small autonomous teams that don\u2019t step on each other in a half-million-line React monolith \u2014 but in 2023, after several years of real adoption, we have enough scars to talk about it honestly.<\/p>\n<h2 id=\"when-it-makes-sense-and-when-it-doesnt\">When It Makes Sense (And When It Doesn\u2019t)<\/h2>\n<p>The clearest signal to consider micro-frontends is <strong>organisational<\/strong>, not technical. With a single frontend team, you don\u2019t need them. Four or five teams contributing to the same SPA and blocking each other in the pipeline is where the conversation starts to make sense.<\/p>\n<p>Cases where it usually pays off:<\/p>\n<ul>\n<li>Large applications with clearly separated functional domains (catalogue, checkout, user account).<\/li>\n<li>Companies with multiple product teams needing independent release cycles.<\/li>\n<li>Progressive migrations \u2014 wrapping a legacy app with modern pieces without rewriting everything.<\/li>\n<\/ul>\n<p>Cases where it\u2019s premature:<\/p>\n<ul>\n<li>Startups and small products where coordination happens in a Slack conversation.<\/li>\n<li>Teams that haven\u2019t yet established stable internal conventions (you\u2019ll multiply the disorder).<\/li>\n<li>When the real bottleneck is the backend or design, not frontend development.<\/li>\n<\/ul>\n<h2 id=\"the-main-patterns\">The Main Patterns<\/h2>\n<p>Three approaches dominate in 2023:<\/p>\n<h3 id=\"iframes-yes-still\">Iframes (Yes, Still)<\/h3>\n<p>The simplest and most isolated option. Each micro-frontend lives in an iframe; communication via <code>postMessage<\/code>. It works but has known problems: SEO, navigation, accessibility, and the \u201capp inside an app\u201d feel. Useful for integrating third parties or legacy internal tools. Poor candidate for fluid user experiences.<\/p>\n<h3 id=\"module-federation-webpack-5\">Module Federation (Webpack 5)<\/h3>\n<p><a href=\"https:\/\/webpack.js.org\/concepts\/module-federation\/\">Webpack 5<\/a> introduced <strong>Module Federation<\/strong>, letting an app dynamically load compiled modules from another app at runtime. It\u2019s the most popular option for serious React\/Vue projects since 2022. It allows sharing dependencies (single React across apps) and keeps the unified-SPA feel.<\/p>\n<p>Cost: complex Webpack configuration, careful management of shared dependency versions, and debugging that requires patience. Version incompatibility is the number-one source of incidents.<\/p>\n<h3 id=\"single-spa-and-orchestrators\">Single-SPA and Orchestrators<\/h3>\n<p><a href=\"https:\/\/single-spa.js.org\/\">Single-SPA<\/a> acts as an application router, mounting and unmounting micro-frontends in response to the URL. Good for mixing frameworks (React + Vue + Angular on the same page), although that use case is rarer than it sounds \u2014 most end up standardising on one framework.<\/p>\n<h2 id=\"the-pitfalls-nobody-mentions-in-talks\">The Pitfalls Nobody Mentions in Talks<\/h2>\n<p>After several projects in production, the real problems that cost the most:<\/p>\n<ul>\n<li><strong>CSS leakage<\/strong>. Global styles from one micro-frontend \u201cleak\u201d to others. Solutions: CSS-in-JS, CSS Modules, Shadow DOM. All have their price.<\/li>\n<li><strong>Dependency versions<\/strong>. Three teams on three React versions = state corruption, bugs impossible to reproduce. You need strict governance or accept the cost of duplicated bundles.<\/li>\n<li><strong>Shared state<\/strong>. Passing data between micro-frontends without coupling them is hard. Event bus, custom events, or shared services \u2014 none is elegant.<\/li>\n<li><strong>Performance<\/strong>. Each micro-frontend brings its own bundle. Without well-configured shared dependencies, total weight can multiply 3-4\u00d7.<\/li>\n<li><strong>End-to-end testing<\/strong>. Testing the complete integration requires additional infrastructure. Per-micro-frontend tests pass; the whole breaks.<\/li>\n<li><strong>Visual design<\/strong>. Without a mature design system, each team drifts. The page looks stitched together.<\/li>\n<\/ul>\n<h2 id=\"non-negotiable-prerequisites\">Non-negotiable Prerequisites<\/h2>\n<p>If you decide to move forward, these must exist beforehand:<\/p>\n<ul>\n<li><strong>Robust design system<\/strong> with versioned components (ideally as published npm packages).<\/li>\n<li><strong>Clear and enforced versioning conventions<\/strong> for shared dependencies.<\/li>\n<li><strong>Integration pipeline<\/strong> testing the full composition, not just each piece.<\/li>\n<li><strong>Unified observability<\/strong> \u2014 errors and metrics must correlate at the page level, not micro-frontend.<\/li>\n<li><strong>Dedicated platform team<\/strong> maintaining the orchestrator and resolving cross-cutting issues.<\/li>\n<\/ul>\n<p>Without these, micro-frontends multiply problems instead of solving them.<\/p>\n<h2 id=\"cheaper-alternatives\">Cheaper Alternatives<\/h2>\n<p>Before jumping to the full pattern, evaluate intermediate options:<\/p>\n<ul>\n<li><strong>Well-structured monorepo<\/strong> (Nx, Turborepo) with independent builds but unified deploy.<\/li>\n<li><strong>Component packages<\/strong> published as internal libraries, consumed by a single SPA.<\/li>\n<li><strong>Bounded contexts in code<\/strong> without separating deploy \u2014 logical boundaries, not physical ones.<\/li>\n<\/ul>\n<p>These options give much of the organisational benefit without the operational cost.<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>Micro-frontends are a legitimate tool for large organisations with real frontend coordination problems. They aren\u2019t an architectural improvement per se \u2014 they\u2019re a transfer of complexity from the organisation to the runtime. That transfer pays off only when human-coordination costs exceed added technical costs.<\/p>\n<p>If your first thought reading this was \u201cthis sounds complicated\u201d, you probably don\u2019t need them. Follow us on jacar.es for more on pragmatic frontend architecture.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Micro-frontends promise team autonomy on the UI. When splitting the frontend pays off, which patterns work, and what gets expensive.<\/p>\n","protected":false},"author":1,"featured_media":444,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27,25],"tags":[205,204,206,207,209,208],"class_list":["post-443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arquitectura","category-desarrollo-de-software","tag-arquitectura-frontend","tag-micro-frontends","tag-module-federation","tag-single-spa","tag-team-topologies","tag-webpack"],"translation":{"provider":"WPGlobus","version":"3.0.2","language":"en","enabled_languages":["es","en"],"languages":{"es":{"title":true,"content":true,"excerpt":true},"en":{"title":true,"content":true,"excerpt":true}}},"gutentor_comment":0,"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Micro-frontends in Practice: Benefits and Pitfalls - Jacar<\/title>\n<meta name=\"description\" content=\"Micro-frontends without the hype: when to split the frontend, patterns (iframes, Module Federation, Single-SPA), and hidden costs in CSS and dependencies.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jacar.es\/micro-frontends-practica\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Micro-frontends in Practice: Benefits and Pitfalls - Jacar\" \/>\n<meta property=\"og:description\" content=\"Micro-frontends without the hype: when to split the frontend, patterns (iframes, Module Federation, Single-SPA), and hidden costs in CSS and dependencies.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jacar.es\/micro-frontends-practica\/\" \/>\n<meta property=\"og:site_name\" content=\"Jacar\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-29T10:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jcs-wp-jacar-es.fsn1.your-objectstorage.com\/wp-content\/uploads\/2020\/09\/favicon.png\" \/>\n\t<meta property=\"og:image:width\" content=\"252\" \/>\n\t<meta property=\"og:image:height\" content=\"229\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"javi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"javi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/\"},\"author\":{\"name\":\"javi\",\"@id\":\"https:\\\/\\\/jacar.es\\\/#\\\/schema\\\/person\\\/54a7f7b4224b38fafc9866eb3e614208\"},\"headline\":\"Micro-frontends in Practice: Benefits and Pitfalls\",\"datePublished\":\"2023-09-29T10:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/\"},\"wordCount\":1512,\"publisher\":{\"@id\":\"https:\\\/\\\/jacar.es\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/jcs-wp-jacar-es.fsn1.your-objectstorage.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/19225845\\\/jwp-1236426-21156.jpg\",\"keywords\":[\"arquitectura frontend\",\"micro frontends\",\"module federation\",\"single spa\",\"team topologies\",\"webpack\"],\"articleSection\":[\"Arquitectura\",\"Desarrollo de Software\"],\"inLanguage\":\"en-US\"},{\"@type\":[\"WebPage\",\"ItemPage\"],\"@id\":\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/\",\"url\":\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/\",\"name\":\"Micro-frontends in Practice: Benefits and Pitfalls - Jacar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jacar.es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/jcs-wp-jacar-es.fsn1.your-objectstorage.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/19225845\\\/jwp-1236426-21156.jpg\",\"datePublished\":\"2023-09-29T10:00:00+00:00\",\"description\":\"Micro-frontends without the hype: when to split the frontend, patterns (iframes, Module Federation, Single-SPA), and hidden costs in CSS and dependencies.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/#primaryimage\",\"url\":\"https:\\\/\\\/jcs-wp-jacar-es.fsn1.your-objectstorage.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/19225845\\\/jwp-1236426-21156.jpg\",\"contentUrl\":\"https:\\\/\\\/jcs-wp-jacar-es.fsn1.your-objectstorage.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/19225845\\\/jwp-1236426-21156.jpg\",\"width\":1200,\"height\":800,\"caption\":\"Pantallas con c\u00f3digo mostrando m\u00f3dulos frontend separados\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jacar.es\\\/micro-frontends-practica\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/jacar.es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Micro-frontends en la practica: ventajas y trampas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jacar.es\\\/#website\",\"url\":\"https:\\\/\\\/jacar.es\\\/\",\"name\":\"Jacar\",\"description\":\"Passion for Technology\",\"publisher\":{\"@id\":\"https:\\\/\\\/jacar.es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jacar.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jacar.es\\\/#organization\",\"name\":\"Jacar\",\"url\":\"https:\\\/\\\/jacar.es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jacar.es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jacar.es\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/favicon.png\",\"contentUrl\":\"https:\\\/\\\/jacar.es\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/favicon.png\",\"width\":252,\"height\":229,\"caption\":\"Jacar\"},\"image\":{\"@id\":\"https:\\\/\\\/jacar.es\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/javiercanetearroyo\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jacar.es\\\/#\\\/schema\\\/person\\\/54a7f7b4224b38fafc9866eb3e614208\",\"name\":\"javi\",\"sameAs\":[\"https:\\\/\\\/jacar.es\"],\"url\":\"https:\\\/\\\/jacar.es\\\/en\\\/author\\\/javi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Micro-frontends in Practice: Benefits and Pitfalls - Jacar","description":"Micro-frontends without the hype: when to split the frontend, patterns (iframes, Module Federation, Single-SPA), and hidden costs in CSS and dependencies.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jacar.es\/micro-frontends-practica\/","og_locale":"en_US","og_type":"article","og_title":"Micro-frontends in Practice: Benefits and Pitfalls - Jacar","og_description":"Micro-frontends without the hype: when to split the frontend, patterns (iframes, Module Federation, Single-SPA), and hidden costs in CSS and dependencies.","og_url":"https:\/\/jacar.es\/micro-frontends-practica\/","og_site_name":"Jacar","article_published_time":"2023-09-29T10:00:00+00:00","og_image":[{"width":252,"height":229,"url":"https:\/\/jcs-wp-jacar-es.fsn1.your-objectstorage.com\/wp-content\/uploads\/2020\/09\/favicon.png","type":"image\/png"}],"author":"javi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"javi","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jacar.es\/micro-frontends-practica\/#article","isPartOf":{"@id":"https:\/\/jacar.es\/micro-frontends-practica\/"},"author":{"name":"javi","@id":"https:\/\/jacar.es\/#\/schema\/person\/54a7f7b4224b38fafc9866eb3e614208"},"headline":"Micro-frontends in Practice: Benefits and Pitfalls","datePublished":"2023-09-29T10:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/jacar.es\/micro-frontends-practica\/"},"wordCount":1512,"publisher":{"@id":"https:\/\/jacar.es\/#organization"},"image":{"@id":"https:\/\/jacar.es\/micro-frontends-practica\/#primaryimage"},"thumbnailUrl":"https:\/\/jcs-wp-jacar-es.fsn1.your-objectstorage.com\/wp-content\/uploads\/2023\/09\/19225845\/jwp-1236426-21156.jpg","keywords":["arquitectura frontend","micro frontends","module federation","single spa","team topologies","webpack"],"articleSection":["Arquitectura","Desarrollo de Software"],"inLanguage":"en-US"},{"@type":["WebPage","ItemPage"],"@id":"https:\/\/jacar.es\/micro-frontends-practica\/","url":"https:\/\/jacar.es\/micro-frontends-practica\/","name":"Micro-frontends in Practice: Benefits and Pitfalls - Jacar","isPartOf":{"@id":"https:\/\/jacar.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jacar.es\/micro-frontends-practica\/#primaryimage"},"image":{"@id":"https:\/\/jacar.es\/micro-frontends-practica\/#primaryimage"},"thumbnailUrl":"https:\/\/jcs-wp-jacar-es.fsn1.your-objectstorage.com\/wp-content\/uploads\/2023\/09\/19225845\/jwp-1236426-21156.jpg","datePublished":"2023-09-29T10:00:00+00:00","description":"Micro-frontends without the hype: when to split the frontend, patterns (iframes, Module Federation, Single-SPA), and hidden costs in CSS and dependencies.","breadcrumb":{"@id":"https:\/\/jacar.es\/micro-frontends-practica\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jacar.es\/micro-frontends-practica\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jacar.es\/micro-frontends-practica\/#primaryimage","url":"https:\/\/jcs-wp-jacar-es.fsn1.your-objectstorage.com\/wp-content\/uploads\/2023\/09\/19225845\/jwp-1236426-21156.jpg","contentUrl":"https:\/\/jcs-wp-jacar-es.fsn1.your-objectstorage.com\/wp-content\/uploads\/2023\/09\/19225845\/jwp-1236426-21156.jpg","width":1200,"height":800,"caption":"Pantallas con c\u00f3digo mostrando m\u00f3dulos frontend separados"},{"@type":"BreadcrumbList","@id":"https:\/\/jacar.es\/micro-frontends-practica\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/jacar.es\/"},{"@type":"ListItem","position":2,"name":"Micro-frontends en la practica: ventajas y trampas"}]},{"@type":"WebSite","@id":"https:\/\/jacar.es\/#website","url":"https:\/\/jacar.es\/","name":"Jacar","description":"Passion for Technology","publisher":{"@id":"https:\/\/jacar.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jacar.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jacar.es\/#organization","name":"Jacar","url":"https:\/\/jacar.es\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jacar.es\/#\/schema\/logo\/image\/","url":"https:\/\/jacar.es\/wp-content\/uploads\/2020\/09\/favicon.png","contentUrl":"https:\/\/jacar.es\/wp-content\/uploads\/2020\/09\/favicon.png","width":252,"height":229,"caption":"Jacar"},"image":{"@id":"https:\/\/jacar.es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/in\/javiercanetearroyo\/"]},{"@type":"Person","@id":"https:\/\/jacar.es\/#\/schema\/person\/54a7f7b4224b38fafc9866eb3e614208","name":"javi","sameAs":["https:\/\/jacar.es"],"url":"https:\/\/jacar.es\/en\/author\/javi\/"}]}},"_links":{"self":[{"href":"https:\/\/jacar.es\/en\/wp-json\/wp\/v2\/posts\/443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jacar.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jacar.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jacar.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jacar.es\/en\/wp-json\/wp\/v2\/comments?post=443"}],"version-history":[{"count":0,"href":"https:\/\/jacar.es\/en\/wp-json\/wp\/v2\/posts\/443\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jacar.es\/en\/wp-json\/wp\/v2\/media\/444"}],"wp:attachment":[{"href":"https:\/\/jacar.es\/en\/wp-json\/wp\/v2\/media?parent=443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jacar.es\/en\/wp-json\/wp\/v2\/categories?post=443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jacar.es\/en\/wp-json\/wp\/v2\/tags?post=443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}