{"id":4679,"date":"2021-06-09T11:42:59","date_gmt":"2021-06-09T09:42:59","guid":{"rendered":"https:\/\/www.evertop.pl\/?p=4679"},"modified":"2021-07-14T11:55:30","modified_gmt":"2021-07-14T09:55:30","slug":"micro-frontend-deep-dive-into-micro-frontends-part-ii","status":"publish","type":"post","link":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/","title":{"rendered":"Micro Frontend &#8211; Deep Dive Into Micro-Frontends. Part II"},"content":{"rendered":"<h2>1. Practical approach<\/h2>\n<p><span style=\"font-weight: 400;\">Here we are in 2021 and the question is whether the journey into Micro-Frontends is still worth watching? &#8211; of course, but on several conditions.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the first part, we discussed the pros and cons of using a micro-frontend approach in our project in frontend development. <\/span><span style=\"font-weight: 400;\">We also touched on when we might consider this approach.<\/span><\/p>\n<div class=\"media\"><span class=\"media-left\"><br \/>\n<img loading=\"lazy\" src=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/02\/read-also.png\" alt=\"...\" width=\"40\" height=\"40\" \/><br \/>\n<\/span><\/p>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Read also: <a href=\"https:\/\/www.evertop.pl\/en\/introduction-to-micro-frontend-part-i\/\" rel=\"noopener\">Introduction To Micro Frontend. Part I<\/a><\/h4>\n<\/div>\n<\/div>\n<p><span style=\"font-weight: 400;\">Although micro-frontends are quite a new approach in the frontend architecture ecosystem they are used for several years in medium and large organizations.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">On the Internet there are many examples of successful implementation of micro-frontend in their major projects such as the global sales giant Zalando &#8211; German mail order online store with headquarters in Berlin, but also on the domestic market in Poland, the use of micro-frontend has been found in Allegro &#8211; the largest e-commerce platform in Poland.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">More information about the techniques used and the journey that the project would take is described in an interesting way on:\u00a0<\/span><a href=\"https:\/\/blog.allegro.tech\/2016\/03\/Managing-Frontend-in-the-microservices-architecture.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">https:\/\/blog.allegro.tech\/2016\/03\/Managing-Frontend-in-the-microservices-architecture.html<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">The article is a few years old now but it is worth spending some more time on it and finding out what made the giant of sales in Poland change its approach to its large project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In short, at first they tried to work with many components in real time using ESI, but it was not enough, the problems multiplied, even when choosing a framework and its version to create a particular component.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I will not describe more how it was solved, but I recommend reading the entire article and learn much more about the solution of all the problems that have arisen.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We must also mention a very important point about the micro-frontend approach to application development.<\/span><\/p>\n<h3>Client side composition<\/h3>\n<p><span style=\"font-weight: 400;\">In the Compositing approach, the non-standard elements on the client side are certainly distinguished by the fact that the user does not want to wait for the whole page to load, he wants a responsive reaction to the user&#8217;s movements. In this approach, our application is built from many micro applications, often independent from each other, with separate teams, data sources and dependencies; these teams, often scattered around the world, create micro applications which constitute the whole entity. On the client side, a technique called client-side is used, which is a lazy loading of components that replace empty tags with so-called placeholders and the HTML markup itself is created and updated directly in the browser.<\/span><\/p>\n<figure id=\"attachment_4686\" aria-describedby=\"caption-attachment-4686\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-4686 size-large\" src=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-32-1024x514.png\" alt=\"client side composition\" width=\"640\" height=\"321\" srcset=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-32-1024x514.png 1024w, https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-32-300x151.png 300w, https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-32-768x385.png 768w, https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-32.png 1281w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-4686\" class=\"wp-caption-text\">Source: https:\/\/drek4537l1klr.cloudfront.net\/geers\/Figures\/CH04_F01_Geers.png<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h3>Server side composition<\/h3>\n<p><span style=\"font-weight: 400;\">The server-side composition approach to creating custom components results in a very fast page generation that is sent to the browser client. The browser client receives a ready rendered and prepared page from the server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is undoubtedly one of the biggest advantages of this approach.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One disadvantage is undoubtedly the increase in complexity. We must also remember whether our current solution solves the problem with application performance and data processing.<\/span><\/p>\n<figure id=\"attachment_4685\" aria-describedby=\"caption-attachment-4685\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-4685 size-large\" src=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-33-1024x514.png\" alt=\"server side composition\" width=\"640\" height=\"321\" srcset=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-33-1024x514.png 1024w, https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-33-300x151.png 300w, https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-33-768x385.png 768w, https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-33.png 1281w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-4685\" class=\"wp-caption-text\">Source: https:\/\/drek4537l1klr.cloudfront.net\/geers\/Figures\/CH04_F01_Geers.png<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2>2. Module Federation, game changer in micro frontend architecture?<\/h2>\n<p><span style=\"font-weight: 400;\">Is there a real evolution coming in micro frontend applications with Webpack 5, Federation?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Webpack 5 which was released some time ago will bring us many improvements, in combination with a module federation the pleasure of creating web applications will become a pleasure.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What is Webpack and module federation?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Wikipedia says:<\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">&#8220;Webpack, a free and open-source JavaScript transpiler whose main purpose is to create packages that incorporate dependencies between modules and classes and improve performance. Admittedly, Webpack is used mainly to build a JS package, but it can also process other resources such as HTML, CSS and images.&#8221;<\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">And what is said about module federation?<\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">&#8220;Module Federation is a JavaScript architecture invented by Zack Jackson, who then proposes to create a Webpack plugin for it. In short, Module Federation allows JavaScript applications to import code dynamically from another application at runtime.&#8221;<\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">Webpack is a well-known framework that has been used and applied to web application development for years, but has received a very interesting plugin for creating micro-frontends that addresses the shortcomings of previous years.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Webpack Module Federation allows you to import code dynamically from another application at runtime using different URLs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It also solves the code dependency problem.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The module will intelligently use the source of our React application, Angular, etc. that you already have and import only the component code.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We will not write the whole application, but we will use a simple example of two independent applications written in react framework and we will show how easy it is to cooperate between the components of two applications.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Similar examples and applications can be found on github.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Of course with more advanced examples integration can be more difficult because of complexity and consistency between applications.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We create two separate applications and call them app1 and app2 (of course frameworks with custom element can be completely different).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After cosmetic preparation of the place we create our projects.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In order to do this, we use the well-known command:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">npx create-react-app app1<\/span><\/p>\n<p><span style=\"font-weight: 400;\">yarn add webpack webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server<\/span><\/p>\n<p><span style=\"font-weight: 400;\">and\\or in the second IDE<\/span><\/p>\n<p><span style=\"font-weight: 400;\">npx create-react-app app2<\/span><\/p>\n<p><span style=\"font-weight: 400;\">yarn add webpack webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Our applications will download the necessary dependencies, configurations and they are ready to run.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-4709 size-full\" src=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/tree_project.png\" alt=\"\" width=\"241\" height=\"402\" srcset=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/tree_project.png 241w, https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/tree_project-180x300.png 180w\" sizes=\"(max-width: 241px) 100vw, 241px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Create a Webpack.config.js on the root and put the following inside it. We can install and configure our webpack configurations or use command in the console:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">yarn add webpack webpack-cli<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In short app1 generates component consisting only of header and app2 imports header component from app1.<\/span><\/p>\n<p><img src=\"https:\/\/images.surferseo.art\/29eea08e-98b2-4225-801b-ddcaa8acc27c.png\" \/><\/p>\n<p>and the same in our second application<\/p>\n<p><img src=\"https:\/\/images.surferseo.art\/629449ed-43e4-402b-9ec9-60363dea9ead.png\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In our app1 application in the configuration apart from the standard entries like port in the ModuleFederationPlugin section we add <\/span><span style=\"font-weight: 400;\">information in the exposes section &#8211; this is where we indicate all the components from another application that we will use.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this case we have only one component named Header.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let&#8217;s look at a comparison of App files from the index in our applications:<\/span><\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-4711\" src=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/App.png\" alt=\"diff App files\" width=\"634\" height=\"152\" srcset=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/App.png 883w, https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/App-300x72.png 300w, https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/App-768x184.png 768w\" sizes=\"(max-width: 634px) 100vw, 634px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-4713\" src=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/App2.png\" alt=\"diff Index files\" width=\"634\" height=\"85\" srcset=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/App2.png 1017w, https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/App2-300x40.png 300w, https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/App2-768x103.png 768w\" sizes=\"(max-width: 634px) 100vw, 634px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The only significant difference is that in our app2 application we use the header from app1.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The result of our use of the application is as follows:<\/span><\/p>\n<p><img src=\"https:\/\/images.surferseo.art\/427d3dc1-792c-4939-bb0f-dd1b9e3e1d92.png\" \/><\/p>\n<p><span style=\"font-weight: 400;\">There are many approaches to the topic of micro-frontend architecture using event bus, iframe or frameworks such as single-spa (single page). In the example I used the easiest way to use component generation with different applications in micro frontends.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h1>3. Summary<\/h1>\n<p><span style=\"font-weight: 400;\">I am curious to see what the solution architecture will look like in a few years, whether something new will emerge, a new approach that will replace the current solutions, the technology world is changing very fast and the solution architecture needs to adapt to it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let&#8217;s remember at the very end.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Microfrontend generally do not apply to every application because of their complexity at the domain and structure level, as well as the pros and cons of this approach, but with the right design they can provide us with many great solutions, never cut off this choice of architecture at the very beginning of the project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Many organizations around the world, such as Zalando, or our native Allegro use this solution architecture in software production with great success. But web development is not the only branch in which we can use this approach, sometimes you can find a choice of this solution in mobile applications or consoles.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the third part we will talk about:<\/span><\/p>\n<h5><b>* micro-frontend using web Components and\u00a0 custom element,<br \/>\n<\/b><b>* discuss about some practical approaches to web application development.<\/b><\/h5>\n","protected":false},"excerpt":{"rendered":"<p>1. Practical approach Here we are in 2021 and the question is whether the journey into Micro-Frontends is still worth watching? &#8211; of course, but on several conditions. In the first part, we discussed the pros and cons of using a micro-frontend approach in our project in frontend development. We also touched on when we [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":4687,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[13],"tags":[153,138,131],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Micro Frontend - Deep Dive Into Micro-Frontends. Part II - Evertop<\/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:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Micro Frontend - Deep Dive Into Micro-Frontends. Part II - Evertop\" \/>\n<meta property=\"og:description\" content=\"1. Practical approach Here we are in 2021 and the question is whether the journey into Micro-Frontends is still worth watching? &#8211; of course, but on several conditions. In the first part, we discussed the pros and cons of using a micro-frontend approach in our project in frontend development. We also touched on when we [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/\" \/>\n<meta property=\"og:site_name\" content=\"Evertop\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/EvertopPoland\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-09T09:42:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-14T09:55:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-31.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1281\" \/>\n\t<meta property=\"og:image:height\" content=\"643\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafa\u0142 Czarkowski\" \/>\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\":\"Organization\",\"@id\":\"https:\/\/www.evertop.pl\/#organization\",\"name\":\"Evertop\",\"url\":\"https:\/\/www.evertop.pl\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/EvertopPoland\/\",\"https:\/\/www.linkedin.com\/company\/evertop-software-development\/\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.evertop.pl\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/04\/logo_new.png\",\"contentUrl\":\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/04\/logo_new.png\",\"width\":582,\"height\":114,\"caption\":\"Evertop\"},\"image\":{\"@id\":\"https:\/\/www.evertop.pl\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.evertop.pl\/#website\",\"url\":\"https:\/\/www.evertop.pl\/\",\"name\":\"Evertop\",\"description\":\"we code the future\",\"publisher\":{\"@id\":\"https:\/\/www.evertop.pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.evertop.pl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-31.png\",\"contentUrl\":\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-31.png\",\"width\":1281,\"height\":643,\"caption\":\"micro-frontend-2\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#webpage\",\"url\":\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/\",\"name\":\"Micro Frontend - Deep Dive Into Micro-Frontends. Part II - Evertop\",\"isPartOf\":{\"@id\":\"https:\/\/www.evertop.pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#primaryimage\"},\"datePublished\":\"2021-06-09T09:42:59+00:00\",\"dateModified\":\"2021-07-14T09:55:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\\u0142\\u00f3wna\",\"item\":\"https:\/\/www.evertop.pl\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Micro Frontend &#8211; Deep Dive Into Micro-Frontends. Part II\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.evertop.pl\/#\/schema\/person\/05241f55b0571cacd73a963a945799ca\"},\"headline\":\"Micro Frontend &#8211; Deep Dive Into Micro-Frontends. Part II\",\"datePublished\":\"2021-06-09T09:42:59+00:00\",\"dateModified\":\"2021-07-14T09:55:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#webpage\"},\"wordCount\":1279,\"publisher\":{\"@id\":\"https:\/\/www.evertop.pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-31.png\",\"keywords\":[\"micro frontend\",\"web development\",\"web frameworks\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.evertop.pl\/#\/schema\/person\/05241f55b0571cacd73a963a945799ca\",\"name\":\"Rafa\\u0142 Czarkowski\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.evertop.pl\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1474254019b2d4c12001a795c72aa336?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1474254019b2d4c12001a795c72aa336?s=96&d=mm&r=g\",\"caption\":\"Rafa\\u0142 Czarkowski\"},\"url\":\"https:\/\/www.evertop.pl\/en\/author\/rczarkowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Micro Frontend - Deep Dive Into Micro-Frontends. Part II - Evertop","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.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/","og_locale":"en_US","og_type":"article","og_title":"Micro Frontend - Deep Dive Into Micro-Frontends. Part II - Evertop","og_description":"1. Practical approach Here we are in 2021 and the question is whether the journey into Micro-Frontends is still worth watching? &#8211; of course, but on several conditions. In the first part, we discussed the pros and cons of using a micro-frontend approach in our project in frontend development. We also touched on when we [&hellip;]","og_url":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/","og_site_name":"Evertop","article_publisher":"https:\/\/www.facebook.com\/EvertopPoland\/","article_published_time":"2021-06-09T09:42:59+00:00","article_modified_time":"2021-07-14T09:55:30+00:00","og_image":[{"width":1281,"height":643,"url":"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-31.png","path":"\/home\/evertop\/web-evertop\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-31.png","size":"full","id":4687,"alt":"micro-frontend-2","pixels":823683,"type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Rafa\u0142 Czarkowski","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.evertop.pl\/#organization","name":"Evertop","url":"https:\/\/www.evertop.pl\/","sameAs":["https:\/\/www.facebook.com\/EvertopPoland\/","https:\/\/www.linkedin.com\/company\/evertop-software-development\/"],"logo":{"@type":"ImageObject","@id":"https:\/\/www.evertop.pl\/#logo","inLanguage":"en-US","url":"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/04\/logo_new.png","contentUrl":"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/04\/logo_new.png","width":582,"height":114,"caption":"Evertop"},"image":{"@id":"https:\/\/www.evertop.pl\/#logo"}},{"@type":"WebSite","@id":"https:\/\/www.evertop.pl\/#website","url":"https:\/\/www.evertop.pl\/","name":"Evertop","description":"we code the future","publisher":{"@id":"https:\/\/www.evertop.pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.evertop.pl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#primaryimage","inLanguage":"en-US","url":"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-31.png","contentUrl":"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-31.png","width":1281,"height":643,"caption":"micro-frontend-2"},{"@type":"WebPage","@id":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#webpage","url":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/","name":"Micro Frontend - Deep Dive Into Micro-Frontends. Part II - Evertop","isPartOf":{"@id":"https:\/\/www.evertop.pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#primaryimage"},"datePublished":"2021-06-09T09:42:59+00:00","dateModified":"2021-07-14T09:55:30+00:00","breadcrumb":{"@id":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/www.evertop.pl\/en\/"},{"@type":"ListItem","position":2,"name":"Micro Frontend &#8211; Deep Dive Into Micro-Frontends. Part II"}]},{"@type":"Article","@id":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#article","isPartOf":{"@id":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#webpage"},"author":{"@id":"https:\/\/www.evertop.pl\/#\/schema\/person\/05241f55b0571cacd73a963a945799ca"},"headline":"Micro Frontend &#8211; Deep Dive Into Micro-Frontends. Part II","datePublished":"2021-06-09T09:42:59+00:00","dateModified":"2021-07-14T09:55:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#webpage"},"wordCount":1279,"publisher":{"@id":"https:\/\/www.evertop.pl\/#organization"},"image":{"@id":"https:\/\/www.evertop.pl\/en\/micro-frontend-deep-dive-into-micro-frontends-part-ii\/#primaryimage"},"thumbnailUrl":"https:\/\/www.evertop.pl\/wp-content\/uploads\/2021\/06\/micro-frontend_Obszar-roboczy-1-kopia-31.png","keywords":["micro frontend","web development","web frameworks"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.evertop.pl\/#\/schema\/person\/05241f55b0571cacd73a963a945799ca","name":"Rafa\u0142 Czarkowski","image":{"@type":"ImageObject","@id":"https:\/\/www.evertop.pl\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/1474254019b2d4c12001a795c72aa336?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1474254019b2d4c12001a795c72aa336?s=96&d=mm&r=g","caption":"Rafa\u0142 Czarkowski"},"url":"https:\/\/www.evertop.pl\/en\/author\/rczarkowski\/"}]}},"_links":{"self":[{"href":"https:\/\/www.evertop.pl\/en\/wp-json\/wp\/v2\/posts\/4679"}],"collection":[{"href":"https:\/\/www.evertop.pl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.evertop.pl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.evertop.pl\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.evertop.pl\/en\/wp-json\/wp\/v2\/comments?post=4679"}],"version-history":[{"count":27,"href":"https:\/\/www.evertop.pl\/en\/wp-json\/wp\/v2\/posts\/4679\/revisions"}],"predecessor-version":[{"id":4976,"href":"https:\/\/www.evertop.pl\/en\/wp-json\/wp\/v2\/posts\/4679\/revisions\/4976"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.evertop.pl\/en\/wp-json\/wp\/v2\/media\/4687"}],"wp:attachment":[{"href":"https:\/\/www.evertop.pl\/en\/wp-json\/wp\/v2\/media?parent=4679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.evertop.pl\/en\/wp-json\/wp\/v2\/categories?post=4679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.evertop.pl\/en\/wp-json\/wp\/v2\/tags?post=4679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}