{"id":16972,"date":"2022-01-25T11:32:20","date_gmt":"2022-01-25T10:32:20","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=16972"},"modified":"2023-05-30T15:17:24","modified_gmt":"2023-05-30T13:17:24","slug":"micro-frontends-the-future-of-web-development","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/","title":{"rendered":"Micro Frontends: the Future of Web Development?"},"content":{"rendered":"\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-0c021ef0      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#evolving-architecture-from-the-monolith-to-micro-frontend\" class=\"uagb-toc-link__trigger\">Evolving Architecture: From the Monolith to Micro Frontend<\/a><li class=\"uagb-toc__list\"><a href=\"#the-benefits-of-micro-frontends\" class=\"uagb-toc-link__trigger\">The benefits of Micro Frontends<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#1-scalability\" class=\"uagb-toc-link__trigger\">1 &#8211; Scalability<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#2-maintainability\" class=\"uagb-toc-link__trigger\">2 &#8211; Maintainability<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#3-faster-development-and-troubleshooting\" class=\"uagb-toc-link__trigger\">3 &#8211; Faster Development and Troubleshooting<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#4-autonomy\" class=\"uagb-toc-link__trigger\">4 &#8211; Autonomy<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#progressive-web-apps-why-are-they-key-in-e-commerce\" class=\"uagb-toc-link__trigger\">Progressive Web Apps: why are they key in E-Commerce?<\/a><li class=\"uagb-toc__list\"><a href=\"#different-micro-frontend-approaches\" class=\"uagb-toc-link__trigger\">Different Micro Frontend approaches<\/a><li class=\"uagb-toc__list\"><a href=\"#the-role-of-innovation\" class=\"uagb-toc-link__trigger\">The role of innovation<\/a><li class=\"uagb-toc__list\"><a href=\"#conclusion\" class=\"uagb-toc-link__trigger\">Conclusion<\/a><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"gb-headline gb-headline-7050d16f gb-headline-text\"><strong>Evolving Architecture: From the Monolith to Micro Frontend<\/strong><\/h2>\n\n\n\n<p>The web is evolving. <strong>Applications are becoming more and more complex<\/strong>, and the need for more modular and maintainable code is growing with them.&nbsp;<\/p>\n\n\n\n<p>Monolithic structures are no longer able to meet these demands. In a monolithic structure, the code for a web application is bundled together in one large file. This makes the code difficult to manage and update, and can lead to <strong>problems with scalability and performance<\/strong>. In contrast, Micro Frontends are becoming more popular because they offer several advantages over traditional monolithic front-end applications. A Micro Frontend structure separates the code for different parts of the application into individual files, rendering the code easier to update and manage.&nbsp;<\/p>\n\n\n\n<p>What Are Micro Frontends? <strong>Micro Frontends are small, self-contained web applications that share a common front-end codebase.<\/strong> Built with web technologies like HTML, CSS, and JavaScript, they communicate with each other using a shared API. Each Micro Frontend is responsible for a specific part of the overall application.&nbsp; This division of labor helps reduce complexity, and makes it easier to manage and update the application.&nbsp;<\/p>\n\n\n\n<p>Micro Frontends are based on a single page application (SPA) architecture. SPAs are web applications that load a single HTML page and then use JavaScript to dynamically update the page as the user interacts with it. <strong>This eliminates the need for traditional page reloads, resulting in a more fluid and responsive user experience<\/strong>. The Micro Frontend architecture builds on the SPA architecture by breaking the application into smaller, more manageable pieces. This makes it easier to develop, test, and deploy the application, and also helps improve performance and scalability, as each Micro Frontend can be optimized for its specific tasks.&nbsp;<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-b80dad5b gb-headline-text\"><strong>The benefits of Micro Frontends<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/portada-Unspash-Frontend-1024x576.jpg\" alt=\"\" class=\"wp-image-16977\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/portada-Unspash-Frontend-1024x576.jpg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/portada-Unspash-Frontend-300x169.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/portada-Unspash-Frontend-768x432.jpg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/portada-Unspash-Frontend-1536x864.jpg 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/portada-Unspash-Frontend-896x504.jpg 896w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/portada-Unspash-Frontend-400x225.jpg 400w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/portada-Unspash-Frontend.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Micro Frontends are becoming more and more popular because of their benefits.<\/figcaption><\/figure>\n\n\n\n<p>Why are Micro Frontends growing in popularity among web developers? There are several reasons &#8211; here are some of the most important:&nbsp;<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-f4be5113 gb-headline-text\">1 &#8211; Scalability<\/h3>\n\n\n\n<p>Micro Frontends provide a scalable architecture for web development. Breaking an application into small individual front-end components makes it easy to distribute the application across multiple servers or instances. This helps to ensure that the application can handle increasing demand.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-8e7d5d9b gb-headline-text\">2 &#8211; Maintainability<\/h3>\n\n\n\n<p>Micro Frontends also improve maintainability. With<strong> a monolithic architecture, if a bug or issue is discovered in a particular area of the application, the entire application must be patched<\/strong>. This can be time-consuming and complicated. A Micro Frontend architecture, on the other hand, allows individual components to be easily replaced or updated as needed, which improves overall efficiency and reduces the risk of bugs or issues.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-41b6688f gb-headline-text\">3 &#8211; Faster Development and Troubleshooting<\/h3>\n\n\n\n<p>Developing and troubleshooting a monolithic application can be time-consuming and complicated. <strong>With Micro Frontends, development and troubleshooting are greatly simplified<\/strong>. Each frontend component can be developed and tested independently, which speeds up the overall process and makes it easier to isolate and fix any issues that may arise.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-c2d05e49 gb-headline-text\">4 &#8211; Autonomy<\/h3>\n\n\n\n<p>Micro Frontends also grant developers more autonomy. In a monolithic application, all front-end code must be written and managed by a single team. This can lead to conflicts and communication issues. <strong>Conversely, multiple teams can work on separate components of a Micro Frontend simultaneously<\/strong>, while adhering to common guidelines (such as Design System), which reduces the potential for technical or code-related conflicts and improves communication.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-a0ab54d6 gb-headline-text\"><strong>Progressive Web Apps: why are they key in E-Commerce?<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"537\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/3a926d94-97f0-40e6-9db8-4e3572928198-1024x537.png\" alt=\"\" class=\"wp-image-16980\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/3a926d94-97f0-40e6-9db8-4e3572928198-1024x537.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/3a926d94-97f0-40e6-9db8-4e3572928198-300x157.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/3a926d94-97f0-40e6-9db8-4e3572928198-768x403.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/3a926d94-97f0-40e6-9db8-4e3572928198-1536x806.png 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/3a926d94-97f0-40e6-9db8-4e3572928198-2048x1075.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In a world where e-commerce is becoming more and more popular, it is important to have a website that is quick, easy to use, and looks great. Progressive Web Apps (PWAs) are the perfect solution for this. <strong>PWAs are web applications that combine the best features of websites and mobile apps, providing a rich and user-friendly experience on all devices<\/strong>. PWAs are built using modern web technologies, such as HTML5, CSS3, or JavaScript, and can be deployed as a website or a mobile app.&nbsp;<\/p>\n\n\n\n<p>Designed to be as user-friendly as possible, PWAs work well on all types of devices, including smartphones and tablets. One main benefit of PWAs is that they are easy and quick to use &#8211; they can be loaded in a matter of seconds. <strong>PWAs also look great on all types of devices<\/strong>. They are responsive, and adapt to the size of the screen, meaning that they are perfect for use on mobile devices. PWAs are also very reliable; they work even when there is no internet connection, and can be cached so that they can be used offline.&nbsp;<\/p>\n\n\n\n<p>PWAs also offer a series of additional benefits:<\/p>\n\n\n\n<p>1<strong>) Single code:<\/strong> Today, businesses are looking to develop software that can be run on a variety of devices. This can be achieved by using a Micro Frontend architecture, which splits the codebase into small, manageable pieces that can be run on different devices.<\/p>\n\n\n\n<p>2) <strong>Easier and cheaper deployment:<\/strong> Deployment can be a costly and time-consuming process. By using a Micro Frontend architecture, businesses can deploy software more easily and cheaply. As described in this article, Micro Frontends allow a web app to be deconstructed into several independent parts. These can be reused, developed, and tested in parallel, generally resulting in better and faster development.<\/p>\n\n\n\n<p><strong>3) Better engagement:<\/strong> When users have a good experience with a website or app, they are more likely to return. By using a Micro Frontend architecture, businesses can improve the user experience and encourage increased engagement.<\/p>\n\n\n\n<p><strong>4) Offline functionality:<\/strong> Progressive Web Apps are designed to work offline, so clients can enjoy a seamless experience even when browsing on the move when connectivity may be a problem. This dramatically improves the overall user experience.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-e7bfbb66 gb-headline-text\"><strong>Different Micro Frontend approaches<\/strong><\/h2>\n\n\n\n<p>There are a number of ways to go about implementing Progressive Web Apps with Micro Frontends. These include:<\/p>\n\n\n\n<p><strong>Server-side template composition:<\/strong><\/p>\n\n\n\n<p>The gateway can act as a proxy, building the response for the client by composing responses from multiple backend Microservices. This approach can be implemented using server-side templating languages such as Jade or Handlebars.<\/p>\n\n\n\n<p><strong>Build-time integration:<\/strong><\/p>\n\n\n\n<p>For an Angular app, we can build the whole Frontend requiring multiple domain-specific projects. The Angular CLI can be used to scaffold the different projects before using a build tool such as Webpack to combine the elements into a single deployable bundle.<\/p>\n\n\n\n<p><strong>Runtime integration via iframes:<\/strong><\/p>\n\n\n\n<p>It is possible to require a different web page based on URL match. For example, an app might&nbsp; have a landing page that loads the main application, and then different pages for each Microservice. A library such as React Router is used to handle the routing.<\/p>\n\n\n\n<p><strong>Runtime integration via Javascript\/web components:<\/strong><\/p>\n\n\n\n<p>Multiple Javascript components can be imported at runtime, each responsible for managing a domain-specific part of the business logic. Components can be created using a library like React or Vue.js.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-3803cf05 gb-headline-text\"><strong>The role of innovation<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Codemotion_Infographic_Thumbnail-1024x576.png\" alt=\"Codemotion Infographic Developer skills\" class=\"wp-image-16970\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Codemotion_Infographic_Thumbnail-1024x576.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Codemotion_Infographic_Thumbnail-300x169.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Codemotion_Infographic_Thumbnail-768x432.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Codemotion_Infographic_Thumbnail-1536x864.png 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Codemotion_Infographic_Thumbnail-2048x1152.png 2048w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Codemotion_Infographic_Thumbnail-896x504.png 896w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/Codemotion_Infographic_Thumbnail-400x225.png 400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Innovation plays a key role in web development.<\/figcaption><\/figure>\n\n\n\n<p>Web development is an ever-changing field, with new technologies and tools appearing every day. In less than a decade, the internet has completely changed shape. The way we experience websites has changed, <strong>shifting dramatically from a desktop-dominated market to a mobile-dominated market.&nbsp;<\/strong><\/p>\n\n\n\n<p>Users want to experience seamless apps on the web. Innovation is key to developing specific solutions for customers and unique architectures. New<strong> ideas and approaches to problems can be used to create better, more efficient solutions.<\/strong> This is particularly important in web development, where the constant evolution of technology and changing user demands mean that developers need to be innovating constantly just to stay ahead of the curve.&nbsp;<\/p>\n\n\n\n<p>Customers often have unique requirements that can&#8217;t be met using a standard web development approach. <strong>It is therefore fundamental for web developers to learn how to use new sets of tools to build modern, elegant and functional web pages for their clients.<\/strong>&nbsp; By being innovative and adopting the latest technologies, developers can create custom solutions that meet the customer&#8217;s needs.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/www.sideagroup.com\/\" class=\"ek-link\">Sidea <\/a>gathers together skilled developers able to meet any customer&#8217;s demands. By taking advantage of the latest technologies\u00ba, as described in this article, Sidea Group designs and develops fast, responsive, tailored web apps that offer a great user experience, fore-commerce and much more.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-c2c5ccf4 gb-headline-text\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>This article shows why <strong>Micro Frontends<\/strong> offer a great solution to many of the challenges of modern web development, and how they can be used to build modern web apps. Lightweight, scalable, easy to develop and test &#8211; if you are looking for a more efficient way to develop web applications, Micro Frontends are definitely worth considering. <strong>Spotify, IKEA, American Express, Starbucks<\/strong>, and many other major companies already use Micro Frontends to improve the performance and modularity of their web applications and to maximize user retention.&nbsp;<\/p>\n\n\n\n<p>It is imperative for any company operating online to create a modern looking web page that can effectively engage with their customers.<strong> Sidea specializes in building state-of-the-art solutions for its clients, its highly-skilled team of developers ready to tackle any and all issues that may arise during the development process.<\/strong> Companies like Sidea Group are always on the look-out for skilled and experienced web developers able to quickly adopt the latest technologies,&nbsp; to build the best web experiences for clients.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Evolving Architecture: From the Monolith to Micro Frontend The web is evolving. Applications are becoming more and more complex, and the need for more modular and maintainable code is growing with them.&nbsp; Monolithic structures are no longer able to meet these demands. In a monolithic structure, the code for a web application is bundled together&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/\">Read more<\/a><\/p>\n","protected":false},"author":58,"featured_media":16981,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":6,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[9951,6236],"collections":[],"class_list":{"0":"post-16972","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-software-architecture","9":"tag-web-developer","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Micro Frontends: the Future of Web Development? - Codemotion<\/title>\n<meta name=\"description\" content=\"Buzzword or reality? Micro Frontends can really boost your job as a web developer. Learn how to master them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Micro Frontends: the Future of Web Development?\" \/>\n<meta property=\"og:description\" content=\"Buzzword or reality? Micro Frontends can really boost your job as a web developer. Learn how to master them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-25T10:32:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-30T13:17:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"6000\" \/>\n\t<meta property=\"og:image:height\" content=\"3375\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Norman Di Palo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Norman Di Palo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/\"},\"author\":{\"name\":\"Norman Di Palo\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/55131e26e4c59236d55c04a6bb1363d0\"},\"headline\":\"Micro Frontends: the Future of Web Development?\",\"datePublished\":\"2022-01-25T10:32:20+00:00\",\"dateModified\":\"2023-05-30T13:17:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/\"},\"wordCount\":1530,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png\",\"keywords\":[\"Software Architecture\",\"Web Developer\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/\",\"name\":\"Micro Frontends: the Future of Web Development? - Codemotion\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png\",\"datePublished\":\"2022-01-25T10:32:20+00:00\",\"dateModified\":\"2023-05-30T13:17:24+00:00\",\"description\":\"Buzzword or reality? Micro Frontends can really boost your job as a web developer. Learn how to master them.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png\",\"width\":6000,\"height\":3375},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Micro Frontends: the Future of Web Development?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/55131e26e4c59236d55c04a6bb1363d0\",\"name\":\"Norman Di Palo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/norman-di-palo-100x100.jpeg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/norman-di-palo-100x100.jpeg\",\"caption\":\"Norman Di Palo\"},\"description\":\"My name is Norman Di Palo, I\u2019m a Robotics and Artificial Intelligence student, researcher and consultant from Rome, Italy. I'm a public speaker and I've given several talks at tech events. I am founder and consultant for startups in Rome and Palo Alto. I write about my work and research on my blog, that is read by tens of thousands of people. I mostly enjoy robotics, deep learning, design, vinyls, and good coffee.\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/norman-di-palo\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Micro Frontends: the Future of Web Development? - Codemotion","description":"Buzzword or reality? Micro Frontends can really boost your job as a web developer. Learn how to master them.","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:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/","og_locale":"en_US","og_type":"article","og_title":"Micro Frontends: the Future of Web Development?","og_description":"Buzzword or reality? Micro Frontends can really boost your job as a web developer. Learn how to master them.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2022-01-25T10:32:20+00:00","article_modified_time":"2023-05-30T13:17:24+00:00","og_image":[{"width":6000,"height":3375,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png","type":"image\/png"}],"author":"Norman Di Palo","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Norman Di Palo","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/"},"author":{"name":"Norman Di Palo","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/55131e26e4c59236d55c04a6bb1363d0"},"headline":"Micro Frontends: the Future of Web Development?","datePublished":"2022-01-25T10:32:20+00:00","dateModified":"2023-05-30T13:17:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/"},"wordCount":1530,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png","keywords":["Software Architecture","Web Developer"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/","name":"Micro Frontends: the Future of Web Development? - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png","datePublished":"2022-01-25T10:32:20+00:00","dateModified":"2023-05-30T13:17:24+00:00","description":"Buzzword or reality? Micro Frontends can really boost your job as a web developer. Learn how to master them.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png","width":6000,"height":3375},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/micro-frontends-the-future-of-web-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Micro Frontends: the Future of Web Development?"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/55131e26e4c59236d55c04a6bb1363d0","name":"Norman Di Palo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/norman-di-palo-100x100.jpeg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/03\/norman-di-palo-100x100.jpeg","caption":"Norman Di Palo"},"description":"My name is Norman Di Palo, I\u2019m a Robotics and Artificial Intelligence student, researcher and consultant from Rome, Italy. I'm a public speaker and I've given several talks at tech events. I am founder and consultant for startups in Rome and Palo Alto. I write about my work and research on my blog, that is read by tens of thousands of people. I mostly enjoy robotics, deep learning, design, vinyls, and good coffee.","url":"https:\/\/www.codemotion.com\/magazine\/author\/norman-di-palo\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-600x600.png","author_info":{"display_name":"Norman Di Palo","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/norman-di-palo\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png",6000,3375,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-300x169.png",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-768x432.png",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-1536x864.png",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-2048x1152.png",2048,1152,true],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2.png",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/01\/89abcb9c-bab5-4cc6-b8e3-e7032b4d9bae-2-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Norman Di Palo","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/norman-di-palo\/"},"uagb_comment_info":0,"uagb_excerpt":"Evolving Architecture: From the Monolith to Micro Frontend The web is evolving. Applications are becoming more and more complex, and the need for more modular and maintainable code is growing with them.&nbsp; Monolithic structures are no longer able to meet these demands. In a monolithic structure, the code for a web application is bundled together&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/16972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=16972"}],"version-history":[{"count":5,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/16972\/revisions"}],"predecessor-version":[{"id":21016,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/16972\/revisions\/21016"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/16981"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=16972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=16972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=16972"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=16972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}