{"id":8180,"date":"2026-09-02T21:34:39","date_gmt":"2026-09-02T21:34:39","guid":{"rendered":"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/"},"modified":"2026-09-02T21:34:39","modified_gmt":"2026-09-02T21:34:39","slug":"how-do-frontend-microservices-work","status":"publish","type":"post","link":"https:\/\/kutia.net\/sv\/how-do-frontend-microservices-work\/","title":{"rendered":"Hur fungerar Frontend Microservices?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">We\u2019re all aware that microservices have exploded in popularity lately, but unfortunately, this popularity takes place mainly in the backend. Many organizations are using this architectural style to avoid the limitation of large, monolithic backends. But, on the other side, many companies are struggling with large and complex frontend monolithic apps.&nbsp;&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">Lately, we\u2019re seeing that the micro frontends are getting attention too. We\u2019re seeing more and more design patterns and architectural styles for decomposing frontend monoliths into smaller, simpler chunks that can be developed, tested and deployed independently, while still appearing to the customer as a single cohesive product.&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">The challenge is escaping from monolithic apps and creating\/using a more sophistic way for creating the client side of web application.&nbsp;&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">Why would we go forward with an initiative to escape from monolithic apps? Well, there are plenty of reasons for us to do so.&nbsp;&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">Starting from the lack of scalability and tight coupling between components, everything is a single application. Even though JavaScript frameworks such as React, or Vue.js are all about reusability (and they have achieved that wonderfully btw) there\u2019s still work that could get done.&nbsp;&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">What I mean is that using micro frontend, we can achieve more in this direction.&nbsp; &nbsp;<br \/>With micro frontend, the life of a developer has become easier on some parts of the job that include: upgrading, updating, or even rewriting parts of the frontend (client) more smoothly than was previously possible. Also, it&#8217;s easier to ensure that the rest of the application will remain stable because each part (micro frontend) of the app is independent. The scaling of the app &amp; team problem, in the standard way of developing apps is solved with micro frontends, due to the fact that for each micro frontend, a single team is responsible. This makes everything easier and more flexible.&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">In order to avoid developers from stepping on each other\u2019s toes, and providing them an opportunity to be free and independently build, deliver, and choose their own tech solutions, we tend to go forward and implement the micro frontend pattern as much as we can.&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">&nbsp;<br \/>As I have already shared some information on how micro frontends can make developers\u2019 life&#8217;s easier, I would now like to talk about the Container, which is an important part of micro frontends.&nbsp;&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">In traditional SPAs, the whole app is developed in a single repository, sharing a common state management library, and optimization of bundle size is done by lazy loading various chunks based on different routes.&nbsp;&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">This approach is completely fine when the app itself is small, but when it starts to get bigger in size and becomes messy, then, it becomes challenging. For this reason, implementing micro frontends seems to be a good solution, but it also has its challenges. Unlike backend microservices, our frontend microservices still need to be rendered on the same window, and the whole app still needs to work seamlessly like one single unit.&nbsp;&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">To achieve that, we need an app (Container) that could&nbsp; manage individual micro apps lifecycles; downloading, mounting and unmounting the UI as well as provide communication medium between apps in addition to share data and a mechanism to render some common UI elements that will be shared across the whole app.&nbsp;<br \/>&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">There are a number of ways to implement the micro frontends. I will go ahead and mention 4 of them.&nbsp;<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-1-runtime-integration-client-side-composition\"><strong><strong><strong>1. Runtime integration (client-side composition)<\/strong><\/strong><\/strong><\/h2>\n<p class=\"wp-block-paragraph\">This one is one of the most flexible approaches that developers are getting familiar and comfortable mostly. The idea here is to include each micro frontend onto the page with a &lt;script&gt; tag, and upon loading time, it exposes a global function as its entry-point. The container application then determines which micro frontend to be rendered, and then calls a function which directs a micro frontend when and where to render itself.&nbsp;<\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" src=\"https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-3-Post-1024x819.jpg\" alt=\"\" class=\"wp-image-3793\" srcset=\"https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-3-Post-1024x819.webp 1024w, https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-3-Post-300x240.webp 300w, https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-3-Post-768x614.webp 768w, https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-3-Post.webp 1350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<h2 class=\"wp-block-heading\" id=\"h-2-build-time-integration\"><strong><strong>2.Build time integration<\/strong>&nbsp;<\/strong><\/h2>\n<p class=\"wp-block-paragraph\">As we know, nowadays, the most of the code is implemented with this approach. The container will install its components as libraries that we install from npm. Anyhow, this approach has its downsides too. That includes the syncing of different versions of libraries, the different types of built problems, and the final size of the package will be big because of all dependencies that it contains. It\u2019s also important to mention that it is a tight coupling between the container and its micro-frontends.&nbsp;<\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" src=\"https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-2-Post-1-1024x819.jpg\" alt=\"\" class=\"wp-image-3795\" srcset=\"https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-2-Post-1-1024x819.webp 1024w, https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-2-Post-1-300x240.webp 300w, https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-2-Post-1-768x614.webp 768w, https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-2-Post-1.webp 1350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<h2 class=\"wp-block-heading\" id=\"h-3-run-time-integration-via-web-components\"><strong>3. Run time integration via web components<\/strong>&nbsp;<\/h2>\n<p class=\"wp-block-paragraph\">Another approach to run time integration is implementing the micro frontends via web components. With this approach, each micro frontend defines an HTML element for the container to represent an instance, rather than defining a global function for the container to call.&nbsp;<\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" src=\"https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-4-Post-1024x819.jpg\" alt=\"\" class=\"wp-image-3797\" srcset=\"https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-4-Post-1024x819.webp 1024w, https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-4-Post-300x240.webp 300w, https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-4-Post-768x614.webp 768w, https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_Microservice-4-Post.webp 1350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<h2 class=\"wp-block-heading\" id=\"h-4-run-time-integration-via-iframes\"><strong>4. Run time integration via IFrames<\/strong>&nbsp;<\/h2>\n<p class=\"wp-block-paragraph\">One of the simplest method to implement microservices, is using IFrames. By their nature, they make it easier to build webpages out of independent sub-pages. Using IFrames provides us with a good isolation in terms of styling and global variables, not interfering with each other. &nbsp;<br \/>Even though IFrames are not brand new technology (a fact that could make them sound less exciting) big companies such as Spotify use this approach to implement micro frontends. It also has its advantages and drawbacks.&nbsp;<\/p>\n<p class=\"wp-block-paragraph\"><strong>Some of the advantages are:&nbsp;<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li>technology isolation,\u00a0<\/li>\n<li>deployment isolation,\u00a0<\/li>\n<li>runtime isolation,\u00a0<\/li>\n<li>Shared branding and identity,\u00a0<\/li>\n<li>Easy cache management,\u00a0<\/li>\n<li>Smooth user experience.\u00a0<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\"><strong>Some of the disadvantages are:&nbsp;<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li>The loading time (which is slow)&nbsp;<\/li>\n<li>No code reuse<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\" id=\"h-some-key-benefits-that-you-can-get-from-micro-frontends-are\">Some <strong>key benefits<\/strong> that you can get from micro frontends are:&nbsp;<\/h2>\n<ul class=\"wp-block-list\">\n<li><strong>Better scalability<\/strong>;&nbsp;<\/li>\n<li><strong>Faster development<\/strong>, as teams can work independently. This benefit, however, is applicable only if your project is big and has more than one front-end team;&nbsp;<\/li>\n<li>You can use <strong>multiple frameworks <\/strong>in your application. However, it should be done mindfully and transparently to avoid confusion. Nevertheless, you have a choice of what to use for a particular task. What\u2019s more, a development team can choose their own technology;&nbsp;<\/li>\n<li><strong>Deployment independence<\/strong>. The delivery of your micro frontend will not affect the entire application. The changes will affect precisely that part of the business process that it has covered;&nbsp;<\/li>\n<li>With micro frontends, you <strong>can upgrade, update, or even rewrite parts of the frontend more smoothly than was previously possible<\/strong>;&nbsp;<\/li>\n<li>It&#8217;s easier<strong> to ensure that rest of the app remains stable<\/strong>, as it&#8217;s independent. With micro frontends, you no longer need to keep track of the whole app. A team reviews a specific micro frontend, which has been changed or expanded;&nbsp;<\/li>\n<li><strong>Codebases are smaller and more manageable<\/strong>;&nbsp;<\/li>\n<li><strong>Easier hiring of experts<\/strong>. With micro frontends, you look for professionals to work on a specific part of an app where a particular tech stack is used, so you do not need them to know technologies that other teams use;&nbsp;<\/li>\n<li><strong>Easier testing<\/strong>, as you test just separate features;&nbsp;<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\" id=\"h-some-of-the-disadvantages-you-can-get-from-micro-frontends-are\">Some of the disadvantages you can get from micro frontends are:&nbsp;<\/h2>\n<ul class=\"wp-block-list\">\n<li><strong>Complex testing of the application as a whole<\/strong>. Now that your application dynamically loads content, it can be harder to have a complete picture of the application. Each front end can be tested in isolation, but getting a real-world user test is critical to ensure the application works for the end-user. You can utilize usual black-box end-to-end testing with tools like Selenium or Cypress, as it&#8217;s agnostic to the implementation details;&nbsp;<\/li>\n<li><strong>The wide variety of standards you have to keep up with<\/strong>. The application is broken into smaller parts; thus, it can be challenging to keep all developers working off the same standards. Keeping everyone on the same page is essential to delivering a high-quality user experience;&nbsp;<\/li>\n<li>Adopting micro frontends is a good idea for your business if your project is big and has more than one front-end team. <strong>With a small team, it is not worth the struggle<\/strong>;&nbsp;<\/li>\n<li>The <strong>deployment, assembly, and configuration process for each micro frontend will be different<\/strong>, which requires additional effort.&nbsp;<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\">Nevertheless, you can overcome all these challenges by following the best practices.&nbsp;&nbsp;<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-so-is-it-worth-it\"><strong>So, is it worth it?<\/strong>&nbsp;&nbsp;<\/h2>\n<p class=\"wp-block-paragraph\">It all depends on the project that you\u2019re working on. If it is a big project with a lot of UI elements and a lot of different views, then it is worth to give it a try!&nbsp;&nbsp;<\/p>\n<p class=\"wp-block-paragraph\">But, if you\u2019re developing a company website, or any other small website, then maybe you shouldn\u2019t bother at all.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vi \u00e4r alla medvetna om att mikrotj\u00e4nster har exploderat i popularitet p\u00e5 sistone, men tyv\u00e4rr sker denna popularitet fr\u00e4mst i backend. <\/p>\n","protected":false},"author":0,"featured_media":3787,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-8180","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-okategoriserad"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How do Frontend Microservices work? - Kutia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How do Frontend Microservices work? - Kutia\" \/>\n<meta property=\"og:description\" content=\"Vi \u00e4r alla medvetna om att mikrotj\u00e4nster har exploderat i popularitet p\u00e5 sistone, men tyv\u00e4rr sker denna popularitet fr\u00e4mst i backend.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Kutia\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-02T21:34:39+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kutia.net\\\/how-do-frontend-microservices-work-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/how-do-frontend-microservices-work-2\\\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Hur fungerar Frontend Microservices?\",\"datePublished\":\"2026-09-02T21:34:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/how-do-frontend-microservices-work-2\\\/\"},\"wordCount\":5,\"image\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/how-do-frontend-microservices-work-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/kutia.net\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Kutia-Software_web-Blog.webp\",\"articleSection\":[\"Okategoriserad\"],\"inLanguage\":\"sv-SE\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kutia.net\\\/how-do-frontend-microservices-work-2\\\/\",\"url\":\"https:\\\/\\\/kutia.net\\\/how-do-frontend-microservices-work-2\\\/\",\"name\":\"How do Frontend Microservices work? - Kutia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/how-do-frontend-microservices-work-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/kutia.net\\\/how-do-frontend-microservices-work-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/kutia.net\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Kutia-Software_web-Blog.webp\",\"datePublished\":\"2026-09-02T21:34:39+00:00\",\"author\":{\"@id\":\"\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kutia.net\\\/how-do-frontend-microservices-work-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\\\/\\\/kutia.net\\\/how-do-frontend-microservices-work-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/kutia.net\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Kutia-Software_web-Blog.webp\",\"contentUrl\":\"https:\\\/\\\/kutia.net\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Kutia-Software_web-Blog.webp\",\"width\":2400,\"height\":1260,\"caption\":\"Micro services banner\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kutia.net\\\/#website\",\"url\":\"https:\\\/\\\/kutia.net\\\/\",\"name\":\"Kutia\",\"description\":\"Custom software, team augmentation, IT recruitment\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kutia.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How do Frontend Microservices work? - Kutia","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:\/\/kutia.net\/how-do-frontend-microservices-work-2\/","og_locale":"sv_SE","og_type":"article","og_title":"How do Frontend Microservices work? - Kutia","og_description":"Vi \u00e4r alla medvetna om att mikrotj\u00e4nster har exploderat i popularitet p\u00e5 sistone, men tyv\u00e4rr sker denna popularitet fr\u00e4mst i backend.","og_url":"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/","og_site_name":"Kutia","article_published_time":"2026-09-02T21:34:39+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/#article","isPartOf":{"@id":"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/"},"author":{"name":"","@id":""},"headline":"Hur fungerar Frontend Microservices?","datePublished":"2026-09-02T21:34:39+00:00","mainEntityOfPage":{"@id":"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/"},"wordCount":5,"image":{"@id":"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/#primaryimage"},"thumbnailUrl":"https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_web-Blog.webp","articleSection":["Okategoriserad"],"inLanguage":"sv-SE"},{"@type":"WebPage","@id":"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/","url":"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/","name":"How do Frontend Microservices work? - Kutia","isPartOf":{"@id":"https:\/\/kutia.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/#primaryimage"},"image":{"@id":"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/#primaryimage"},"thumbnailUrl":"https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_web-Blog.webp","datePublished":"2026-09-02T21:34:39+00:00","author":{"@id":""},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kutia.net\/how-do-frontend-microservices-work-2\/#primaryimage","url":"https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_web-Blog.webp","contentUrl":"https:\/\/kutia.net\/wp-content\/uploads\/2022\/03\/Kutia-Software_web-Blog.webp","width":2400,"height":1260,"caption":"Micro services banner"},{"@type":"WebSite","@id":"https:\/\/kutia.net\/#website","url":"https:\/\/kutia.net\/","name":"Kutia","description":"Custom software, team augmentation, IT recruitment","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kutia.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"}]}},"_links":{"self":[{"href":"https:\/\/kutia.net\/sv\/wp-json\/wp\/v2\/posts\/8180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kutia.net\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kutia.net\/sv\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/kutia.net\/sv\/wp-json\/wp\/v2\/comments?post=8180"}],"version-history":[{"count":0,"href":"https:\/\/kutia.net\/sv\/wp-json\/wp\/v2\/posts\/8180\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kutia.net\/sv\/wp-json\/wp\/v2\/media\/3787"}],"wp:attachment":[{"href":"https:\/\/kutia.net\/sv\/wp-json\/wp\/v2\/media?parent=8180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kutia.net\/sv\/wp-json\/wp\/v2\/categories?post=8180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kutia.net\/sv\/wp-json\/wp\/v2\/tags?post=8180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}