{"id":1156,"date":"2020-11-11T12:05:02","date_gmt":"2020-11-11T12:05:02","guid":{"rendered":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?p=1156"},"modified":"2021-02-26T12:54:45","modified_gmt":"2021-02-26T12:54:45","slug":"micro-front-ends","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/","title":{"rendered":"Scalable Web Development with Micro Front-ends"},"content":{"rendered":"\n<p>To meet the requirements of a rapidly evolving market environment and the expectations of different user groups, the demand for the realization of complex business applications by means of state-of-the-art web technologies is continuously growing.<\/p>\n\n\n\n<p>This is precisely why the interest in microservices has been increasing significantly in the past few years. They help to split complex applications into smaller, more controllable components, enabling a clearer separation and thus a more agile approach.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">More flexibility through microservices for web front-ends<\/h2>\n\n\n\n<p>While microservices have been part of the standard inventory for the back-end for years, allowing for parallel development by several teams, diversity in the technologies used and the flexible use of components of the application, many web front-ends still use a monolithic approach.<\/p>\n\n\n\n<p>Due to the increasing complexity of the applications, the desire to integrate various specific applications into a single end-user application, and due to the short-lived technology stack, using a similar approach for the front-end as for the back-end is advisable.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1-438x600.png\" alt=\"\" class=\"wp-image-1163\" width=\"329\" height=\"450\" srcset=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1-438x600.png 438w, https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1.png 614w\" sizes=\"auto, (max-width: 639px) 98vw, (max-width: 1199px) 64vw, 329px\" \/><figcaption><em>Figure 1: Division of the front-end into different domains and teams<\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>What is the main advantage of the so-called micro front-ends? Most projects where a complex front-end is being developed are based on a similarly complex back-end, creating a highly heterogeneous project setup. This makes working with a single development team ever more difficult, and the work is often divvied up among several teams. Due to the technical complexity and interdependencies, a monolithic approach in the front-end development often has a negative effect on the system\u2019s maintainability. Micro front-ends allow for the same kind of parallelization and diversity that has long been the standard for the back-end in web development, too.<\/p>\n\n\n\n<p>This approach aims at splitting the front-end up into several domains. As a result, it can be developed by several teams using different technological approaches. In the case of extensions or modifications, it is not necessary to redeploy the entire front-end, but it is possible to replace individual parts. The goal is for the user to get the impression of a single high-performance application, even though it is based on several different technical systems.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Lecture at online campus event (German only)<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/www.facebook.com\/plugins\/video.php?href=https%3A%2F%2Fwww.facebook.com%2FZEISSDigitalInnovation%2Fvideos%2F365496098221147%2F&amp;show_text=0&amp;width=560\" width=\"600\" height=\"338\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowtransparency=\"true\" allowfullscreen=\"true\"><\/iframe>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In our presentation at<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/knowledge-transfer-and-team-building-during-the-coronavirus-pandemic\/\"> the first ZEISS Digital Innovation online campus event<\/a>, we discuss for whom a monolith may still be profitable, and who should perhaps take a closer look at an architecture that is based on micro front-ends. We go into more or less complex project setups and their respective benefits and drawbacks. We also show the different web technologies that currently exist, which technology is suitable for one\u2019s project, and the different possibilities of implementation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The demand for the realization of complex business applications by means of state-of-the-art web technologies is continuously growing. Microservices help to split complex applications into smaller, more controllable components, enabling a clearer separation and thus a more agile approach.<\/p>\n","protected":false},"author":100,"featured_media":1170,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[8],"tags":[482,608,612,613,614,268],"topics":[591],"class_list":["post-1156","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-web-application-development","tag-microservices","tag-web-application","tag-web-technologies","tag-front-end-development","tag-web-development","topics-online-campus"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Scalable web development with micro ... - ZEISS Digital Innovation Blog<\/title>\n<meta name=\"description\" content=\"Microservices help to split complex applications into smaller, more controllable components, enabling a more agile approach.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scalable web development with micro ... - ZEISS Digital Innovation Blog\" \/>\n<meta property=\"og:description\" content=\"Microservices help to split complex applications into smaller, more controllable components, enabling a more agile approach.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Innovation Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-11T12:05:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-26T12:54:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1_fi.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1125\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Lucas Braeschke\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lucas Braeschke\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/\",\"name\":\"Scalable web development with micro ... - ZEISS Digital Innovation Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1_fi.png\",\"datePublished\":\"2020-11-11T12:05:02+00:00\",\"dateModified\":\"2021-02-26T12:54:45+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/bf48cfbddd65553f2922da1d339569c0\"},\"description\":\"Microservices help to split complex applications into smaller, more controllable components, enabling a more agile approach.\",\"breadcrumb\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/#primaryimage\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1_fi.png\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1_fi.png\",\"width\":2000,\"height\":1125},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scalable Web Development with Micro Front-ends\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/\",\"name\":\"Digital Innovation Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/bf48cfbddd65553f2922da1d339569c0\",\"name\":\"Lucas Braeschke\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2023\/08\/Braeschke_Lucas_Profilbild_1000x1000px-150x150.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2023\/08\/Braeschke_Lucas_Profilbild_1000x1000px-150x150.jpg\",\"caption\":\"Lucas Braeschke\"},\"description\":\"Lucas Braeschke studied computer science at TU Dresden and works as a consultant for software development at ZEISS Digital Innovation. His main focus is on cloud, angular and typescript. He is particularly interested in the web in general as well as microfrontends and web components.\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/enlucasbraeschke1\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scalable web development with micro ... - ZEISS Digital Innovation Blog","description":"Microservices help to split complex applications into smaller, more controllable components, enabling a more agile approach.","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:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/","og_locale":"en_US","og_type":"article","og_title":"Scalable web development with micro ... - ZEISS Digital Innovation Blog","og_description":"Microservices help to split complex applications into smaller, more controllable components, enabling a more agile approach.","og_url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/","og_site_name":"Digital Innovation Blog","article_published_time":"2020-11-11T12:05:02+00:00","article_modified_time":"2021-02-26T12:54:45+00:00","og_image":[{"width":2000,"height":1125,"url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1_fi.png","type":"image\/png"}],"author":"Lucas Braeschke","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Lucas Braeschke","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/","name":"Scalable web development with micro ... - ZEISS Digital Innovation Blog","isPartOf":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/#primaryimage"},"image":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1_fi.png","datePublished":"2020-11-11T12:05:02+00:00","dateModified":"2021-02-26T12:54:45+00:00","author":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/bf48cfbddd65553f2922da1d339569c0"},"description":"Microservices help to split complex applications into smaller, more controllable components, enabling a more agile approach.","breadcrumb":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/#primaryimage","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1_fi.png","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1_fi.png","width":2000,"height":1125},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/micro-front-ends\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/"},{"@type":"ListItem","position":2,"name":"Scalable Web Development with Micro Front-ends"}]},{"@type":"WebSite","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/","name":"Digital Innovation Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/bf48cfbddd65553f2922da1d339569c0","name":"Lucas Braeschke","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/image\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2023\/08\/Braeschke_Lucas_Profilbild_1000x1000px-150x150.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2023\/08\/Braeschke_Lucas_Profilbild_1000x1000px-150x150.jpg","caption":"Lucas Braeschke"},"description":"Lucas Braeschke studied computer science at TU Dresden and works as a consultant for software development at ZEISS Digital Innovation. His main focus is on cloud, angular and typescript. He is particularly interested in the web in general as well as microfrontends and web components.","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/enlucasbraeschke1\/"}]}},"author_meta":{"display_name":"Lucas Braeschke","author_link":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/enlucasbraeschke1\/"},"featured_img":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2020\/11\/202011_Microfrontends_1_fi-600x338.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Web<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Web<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">web application development<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Microservices<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">web application<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">web technologies<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">front-end development<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Web development<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">web application development<\/span>","<span class=\"advgb-post-tax-term\">Microservices<\/span>","<span class=\"advgb-post-tax-term\">web application<\/span>","<span class=\"advgb-post-tax-term\">web technologies<\/span>","<span class=\"advgb-post-tax-term\">front-end development<\/span>","<span class=\"advgb-post-tax-term\">Web development<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 5 years ago","modified":"Updated 5 years ago"},"absolute_dates":{"created":"Posted on November 11, 2020","modified":"Updated on February 26, 2021"},"absolute_dates_time":{"created":"Posted on November 11, 2020 12:05 pm","modified":"Updated on February 26, 2021 12:54 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/1156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/users\/100"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/comments?post=1156"}],"version-history":[{"count":9,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/1156\/revisions"}],"predecessor-version":[{"id":1368,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/1156\/revisions\/1368"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/media\/1170"}],"wp:attachment":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/media?parent=1156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/categories?post=1156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/tags?post=1156"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/topics?post=1156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}