{"id":5338,"date":"2024-12-02T05:16:11","date_gmt":"2024-12-02T04:16:11","guid":{"rendered":"https:\/\/rock-the-prototype.com\/uncategorized\/micro-front-end\/"},"modified":"2024-12-02T05:21:34","modified_gmt":"2024-12-02T04:21:34","slug":"micro-front-end","status":"publish","type":"encyclopedia","link":"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/","title":{"rendered":"Micro front end"},"content":{"rendered":"<p><\/p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\"><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1144px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhaltsverzeichnis<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#What_is_a_micro_front_end\" >What is a micro front end?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#Development_of_the_micro-frontend_trend\" >Development of the micro-frontend trend<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#Why_are_there_micro_front_ends\" >Why are there micro front ends?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#Categorization_of_the_micro_front-end_concept\" >Categorization of the micro front-end concept<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#Concept_idea_of_the_microfrontend\" >Concept &amp; idea of the microfrontend<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#Functional_separation_and_creation_of_independent_components\" >Functional separation and creation of independent components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#APIs_connect_the_microservice_components\" >APIs connect the microservice components<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#Advantages_of_the_micro_front-end_strategy\" >Advantages of the micro front-end strategy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#How_do_microfrontends_work\" >How do microfrontends work?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#Improvements_through_progressive_extensions_universal_rendering_and_flexible_routing\" >Improvements through progressive extensions, universal rendering and flexible routing<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#Prototyping_of_web_front-ends_and_microservice_components\" >Prototyping of web front-ends and microservice components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#Try_it_out_for_yourself\" >Try it out for yourself!<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_a_micro_front_end\"><\/span>What is a micro front end?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <strong>Micro Frontend<\/strong> is a <a href=\"https:\/\/rock-the-prototype.com\/wiki\/design-pattern\/\" target=\"_blank\" rel=\"noopener\"><strong>design pattern<\/strong><\/a>that uses the <strong>strengths and advantages of <a href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/microservices\/\" target=\"_blank\" title=\"Microservices are small, autonomous services that work together. The key to a good microservice architecture lies in the implementation of small and autonomous microservices.\" class=\"encyclopedia\">microservices<\/a><\/strong> to improve the <strong>user experience<\/strong> of a web frontend. At the same time, the micro frontend is <strong>more robust<\/strong>, easily <strong>scalable<\/strong>, <strong>flexible<\/strong> and <strong>easy to maintain<\/strong>.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Development_of_the_micro-frontend_trend\"><\/span>Development of the micro-frontend trend<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <strong><a href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/\" target=\"_blank\" title=\"The micro frontend is a design pattern that uses the strengths and advantages of microservices to improve the user experience of a web frontend.\" class=\"encyclopedia\">micro front end<\/a><\/strong> extends the concepts of <a href=\"https:\/\/rock-the-prototype.com\/wiki\/microservices\/\" target=\"_blank\" rel=\"noopener\"><strong>microservices<\/strong><\/a> with a focus on Internet applications as <strong>web front-ends<\/strong> and <a href=\"https:\/\/rock-the-prototype.com\/wiki\/web-app\/\" target=\"_blank\" rel=\"noopener\"><strong>WebApps<\/strong><\/a>. The <strong>micro front-end pattern<\/strong> is aimed at a powerful browser application with convincing functions that is based on a microservice architecture. Such micro frontends are also called <strong>single page apps<\/strong>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Why_are_there_micro_front_ends\"><\/span>Why are there micro front ends?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Typically, a <strong>web frontend<\/strong> grows massively as a classic monolith over the course of the development period. With each frontend extension, such web monoliths become increasingly difficult to maintain and slower for users. For the user, this results in sluggish loading times and often confusing functions. The historically grown <strong>frontend layer<\/strong>, which is often developed by a separate <strong>frontend team<\/strong>, is therefore increasingly difficult to adapt and maintain. Developers call such a web application a <strong>frontend monolith<\/strong>.<\/p>\n<\/div><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Spotify Podcast - Episode 6 - WebApp Prototyping with Nuxt.js &amp; Vue.js - Rock the Prototype - Software development &amp; prototyping \" href=\"#\"><iframe class=\"lazyload\" style=\"border-radius: 12px;\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%27%20height%3D%27352%27%20viewBox%3D%270%200%20100%20352%27%3E%3Crect%20width%3D%27100%27%20height%3D%27352%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/open.spotify.com\/embed\/episode\/3fSJTN40esBPeYWKNj9vKr?utm_source=generator\" width=\"100%\" height=\"352\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/a>\n<div class=\"fusion-text fusion-text-2\"><h2><span class=\"ez-toc-section\" id=\"Categorization_of_the_micro_front-end_concept\"><\/span>Categorization of the micro front-end concept<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The &ldquo;micro frontend&rdquo; refers to an approach in software architecture that is used to break down the frontend architecture of a web application into smaller, independent parts, much like microservices do for the backend area. This is because the micro frontend concept is directly related to the structure and design of software solutions, which places it squarely in the realm of software architecture.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Concept_idea_of_the_microfrontend\"><\/span>Concept &amp; idea of the microfrontend<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <strong>web microservices<\/strong> optimized for the web are based on a proven concept <strong>good <a href=\"https:\/\/rock-the-prototype.com\/en\/tag\/software-architecture-en\/\">software architecture<\/a><\/strong>:<\/p>\n<blockquote>\n<p><em>Break down a large problem into several sub-problems. Solve these sub-problems separately. <\/em><\/p>\n<\/blockquote>\n<p>This software architecture approach goes one step further than the mere modularization of a software application.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Functional_separation_and_creation_of_independent_components\"><\/span>Functional separation and creation of independent components<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Not only is there a functional decomposition within an application, but the functions connected to the backend logic of the monolithic application are also divided into individual, independent components.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"APIs_connect_the_microservice_components\"><\/span>APIs connect the microservice components<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>All individual components are then connected to each other via functional interfaces &ndash; the so-called APIs.<\/p>\n<\/div><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Apple Podcast - Episode 6 - WebApp Prototyping with Nuxt.js &amp; Vue.js - Rock the Prototype - Software development &amp; prototyping \" href=\"#\"><iframe style=\"width: 100%; max-width: 660px; overflow: hidden; border-radius: 10px;\" src=\"https:\/\/embed.podcasts.apple.com\/us\/podcast\/episode-6-webapp-prototyping-with-nuxt-js-vue-js\/id1684835330?i=1000624145271\" height=\"175\" frameborder=\"0\" sandbox=\"allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation\"><\/iframe><\/a>\n<div class=\"fusion-text fusion-text-3\" style=\"--awb-margin-top:4%;\"><h2><span class=\"ez-toc-section\" id=\"Advantages_of_the_micro_front-end_strategy\"><\/span>Advantages of the micro front-end strategy<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The advantages for the microfrontends resulting from such a web microservice architecture are:<\/p>\n<ul class=\"rte__list rte__list--unordered\">\n<li><strong>Simplicity:<\/strong> The complexity of small services is significantly lower than that of a monolithic application that covers the entire range of functions. Software developers gain clarity and better maintainability of their applications. In addition, the services can be developed independently and by several teams in parallel.<\/li>\n<li><strong>Scalability:<\/strong> In contrast to the monolith, the individual microservices can be scaled independently of each other. If a service is under load, the <a href=\"https:\/\/rock-the-prototype.com\/wiki\/cloud\/\" target=\"_blank\" rel=\"noopener\"><strong>cloud<\/strong><\/a> additional instances can be automatically started up in the <a href=\"https:\/\/rock-the-prototype.com\/en\/cloud-computing-cloud-technology\/cloud\/\" target=\"_blank\" title=\"What is cloud? Cloud or cloud computing moves data and programs from desktop PCs or servers in a company to remote cloud servers. Cloud storage therefore consists of a standard server network in a cloud data center or distributed across several cloud server locations.\" class=\"encyclopedia\">cloud<\/a>. All other web services remain unaffected by this change.<\/li>\n<li><strong>Robustness:<\/strong> The failure of a service does not necessarily lead to the failure of the entire system. Thanks to a clean separation in the software architecture, it is always possible to maintain an individual service or offer service alternatives at any time.<\/li>\n<li><strong>Flexibility:<\/strong> With microservice architectures, the best tool for a task can always be used. As the services are independent of each other, it is now also possible to use different technologies for different services. If a <a href=\"https:\/\/rock-the-prototype.com\/en\/programming-languages-frameworks\/java\/\" target=\"_blank\" title=\"What is Java suitable for in programming? Java is very popular as the official language for developing Android apps. It is a general purpose programming language. This programming language is supported by Google and a large active community of developers.\" class=\"encyclopedia\">Java<\/a> service offers advantages for one feature and a <a href=\"https:\/\/kotlinlang.org\/\" target=\"_blank\" rel=\"noopener\">Kotlin application<\/a> for another service, this is exactly what can be implemented with microservices.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"How_do_microfrontends_work\"><\/span>How do microfrontends work?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Microfrontends are feature-driven. This means that we as software developers focus on the elements defined for the user. This increases the interoperability of the individual components, as small-scale <a href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-components\/\" target=\"_blank\" title=\"Web Components are a set of different web technologies that allow you as a web developer to create reusable custom elements whose functionality is encapsulated from the rest of the code.\" class=\"encyclopedia\">web components<\/a> are a good basis for integration into the browser. To this end, each software team creates its component using the technology of its choice. The component defines a user-defined element (e.g. ) and provides its functions via an API. The DOM specification of this particular element (tag name, attributes and events) thus defines its functions as a public API for other teams. This approach offers the enormous advantage that the component with all its functionality can be used independently. The other team that wants to use this API does not need to know how the functions are implemented in detail. The API only needs to be able to interact with the DOM or a backend component.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Improvements_through_progressive_extensions_universal_rendering_and_flexible_routing\"><\/span>Improvements through progressive extensions, universal rendering and flexible routing<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Our flexible API services and web front-ends created in this way offer further advantages such as the option of progressive extensions, universal rendering and flexible routing. To do this, we divide a single web page into two main areas. The page composition design determines how a page can best be composed of individual components. The product owners of these feature components can in turn be different teams. The backend logic can also be encapsulated using this approach.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Prototyping_of_web_front-ends_and_microservice_components\"><\/span>Prototyping of web front-ends and microservice components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong><a href=\"https:\/\/rock-the-prototype.com\/wiki\/prototyping\/\" target=\"_blank\" rel=\"noopener\">Prototyping<\/a><\/strong> is ideal for designing user-centered services. On the basis of a <a href=\"https:\/\/rock-the-prototype.com\/wiki\/gestaltungs-prototype\/\"><strong>design prototype<\/strong><\/a> is ideal for defining the design and usability. This prototype type is then developed in sprints with each iteration stage into an optimized <strong><a href=\"https:\/\/rock-the-prototype.com\/wiki\/engineering-prototype\/\" target=\"_blank\" rel=\"noopener\">engineering prototype<\/a><\/strong> further developed in sprints.<\/p>\n<\/div><div class=\"fusion-video fusion-youtube\" style=\"--awb-max-width:1080px;--awb-max-height:608px;--awb-align-self:center;--awb-width:100%;\"><div class=\"video-shortcode\"><priv-fac-lite-youtube class=\"fusion-hidden lty-load\" data-privacy-type=\"youtube\" videoid=\"IEnIpI5plKs\" params=\"wmode=transparent&amp;autoplay=1&amp;enablejsapi=1\" title=\"YouTube video player 1\" data-button-label=\"Play Video\" width=\"1080\" height=\"608\" data-thumbnail-size=\"auto\" data-no-cookie=\"on\"><\/priv-fac-lite-youtube><div class=\"fusion-privacy-placeholder\" style=\"width:1080px; height:608px;\" data-privacy-type=\"youtube\"><div class=\"fusion-privacy-placeholder-content\"><div class=\"fusion-privacy-label\">For privacy reasons YouTube needs your permission to be loaded. For more details, please see our <a class=\"privacy-policy-link\" href=\"https:\/\/rock-the-prototype.com\/datenschutzerklaerung\/\" rel=\"privacy-policy\">Datenschutzerkl&auml;rung<\/a>.<\/div><button data-privacy-type=\"youtube\" class=\"fusion-button button-default fusion-button-default-size button fusion-privacy-consent\">I Accept<\/button><\/div><\/div><\/div><\/div>\n<div class=\"fusion-text fusion-text-4\"><h2><span class=\"ez-toc-section\" id=\"Try_it_out_for_yourself\"><\/span><strong>Try it out for yourself!<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Why not get started right away and design your own <a href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-app\/\" target=\"_blank\" title=\"What is a web app? A web app is an interactive web application. The interactivity of a web application is one of the most important features that users expect from websites.\" class=\"encyclopedia\">web app<\/a> as a microfrontend? The advantages speak for themselves: independence in development, better scalability and a more robust architecture. Take the opportunity to start with a small functionality and turn it into a microfrontend. This will give you a feel for the architecture and show you how seamlessly different components can interact with each other. Let your creativity run wild and see how powerful and flexible your web project can become with microfrontends!<\/p>\n<\/div><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Podcast Episode 1 - Idea generation and creativity in software development - Rock the Prototype - Software Development\" href=\"#\"><iframe style=\"width: 100%; max-width: 660px; overflow: hidden; border-radius: 10px;\" src=\"https:\/\/embed.podcasts.apple.com\/us\/podcast\/episode-1-idea-generation-and-creativity-in-software\/id1684835330?i=1000611051749\" height=\"175\" frameborder=\"0\" sandbox=\"allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation\"><\/iframe><\/a>\n<div class=\"fusion-text fusion-text-5\"><h3>Rock the Prototype Podcast<\/h3>\n<p>The <strong>Rock the Prototype Podcast<\/strong> and the <strong>Rock the Prototype YouTube channel<\/strong> are the perfect place to go if you want to delve deeper into the world of web development, <a href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/prototyping\/\" target=\"_blank\" title=\"What is prototyping? Prototyping is both a process and a strategy for realizing ideas as quickly as possible.\" class=\"encyclopedia\">prototyping<\/a> and technology.<\/p>\n<p class=\"p1\"><strong>&#127911; Listen on Spotify: &#128073; Spotify Podcast: <a href=\"https:\/\/bit.ly\/41pm8rL\">https:\/\/bit.ly\/41pm8rL<\/a><\/strong><\/p>\n<p class=\"p1\"><strong><span class=\"s1\">&#127822;<\/span> Enjoy on Apple Podcasts: <span class=\"s1\">&#128073;<\/span>&nbsp;<a href=\"https:\/\/bit.ly\/4aiQf8t\">https:\/\/bit.ly\/4aiQf8t<\/a><\/strong><\/p>\n<p>In the podcast, you can expect exciting discussions and valuable insights into current trends, tools and best practices &ndash; ideal for staying on the ball and gaining fresh perspectives for your own projects. On the YouTube channel, you&rsquo;ll find practical tutorials and step-by-step instructions that clearly explain technical concepts and help you get straight into implementation.<\/p>\n<p><strong>Rock the Prototype YouTube Channel<\/strong><\/p>\n<p>&#128640; Rock the Prototype is &#128073; Your format for exciting topics such as software development, prototyping, software architecture, cloud, DevOps &amp; much more.<\/p>\n<p>&#128250; &#128075;&nbsp;<strong><a href=\"https:\/\/www.youtube.com\/@Rock-the-Prototype\" target=\"_blank\" rel=\"noopener\">Rock the Prototype YouTube Channel<\/a>&nbsp;&#128072;&nbsp; &#128064;&nbsp;<\/strong><\/p>\n<p style=\"padding-left: 40px;\">&#9989; Software development &amp; prototyping<\/p>\n<p style=\"padding-left: 40px;\">&#9989; Learning to program<\/p>\n<p style=\"padding-left: 40px;\">&#9989; Understanding software architecture<\/p>\n<p style=\"padding-left: 40px;\">&#9989; Agile teamwork<\/p>\n<p style=\"padding-left: 40px;\">&#9989; Test prototypes together<\/p>\n<p><strong>THINK PROTOTYPING &ndash; PROTOTYPE DESIGN &ndash; PROGRAM &amp; GET STARTED &ndash; JOIN IN NOW!<\/strong><\/p>\n<h4>Why is it worth checking back regularly?<\/h4>\n<p>Both formats complement each other perfectly: in the podcast, you can learn new things in a relaxed way and get inspiring food for thought, while on YouTube you can see what you have learned directly in action and receive valuable tips for practical application.<\/p>\n<p>Whether you&rsquo;re just starting out in software development or are passionate about prototyping, UX design or IT security. We offer you new technology trends that are really relevant &ndash; and with the Rock the Prototype format, you&rsquo;ll always find relevant content to expand your knowledge and take your skills to the next level!<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\"><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1144px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Rock the Prototype - Software development &amp; Prototyping Podcast iTunes\" href=\"#\"><iframe id=\"embedPlayer\" style=\"width: 100%; max-width: 660px; overflow: hidden; border-radius: 10px; transform: translateZ(0px); animation: 2s ease 0s 6 normal none running loading-indicator; background-color: #e4e4e4;\" src=\"https:\/\/embed.podcasts.apple.com\/us\/podcast\/rock-the-prototype-software-development-prototyping\/id1684835330?itsct=podcast_box_player&amp;itscg=30200&amp;ls=1&amp;theme=auto\" height=\"450px\" frameborder=\"0\" sandbox=\"allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation\"><\/iframe><\/a><\/div><\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>The micro frontend is a design pattern that uses the strengths and advantages of microservices to improve the user experience of a web frontend.<\/p>\n","protected":false},"author":1,"featured_media":3375,"template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[1166,1141],"tags":[1171,1172,1336,1977,1144,3585,3577,3584,3580,1731,1943,1296,1464,1174,1142,1626,1170,3578,1147,1146,1148,1173,1262,3579,3581,3583,3582,1291,1384,1287,1288],"class_list":["post-5338","encyclopedia","type-encyclopedia","status-publish","has-post-thumbnail","hentry","category-software-architecture","category-software-development","tag-app-en","tag-apps-en","tag-cloud-en","tag-cloud-services-en","tag-design-pattern-en","tag-design-prototypes","tag-design-prototyping-en","tag-engineering-prototype-en","tag-micro-front-end-pattern","tag-microservice-programming","tag-microservices-en","tag-mvp-en","tag-object-orientation","tag-program-microservice","tag-programming","tag-prototype-en","tag-prototyping-en","tag-single-page-app-en","tag-software-architecture","tag-software-design-en","tag-software-development","tag-web-app-en","tag-web-apps-en","tag-web-front-end","tag-web-front-ends","tag-web-microservice-en","tag-web-microservices-en","tag-webapp-en","tag-webbrowser-en","tag-website-en","tag-websites-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Micro front end - Prototyping of web front-ends and microservices<\/title>\n<meta name=\"description\" content=\"What is a micro front end? \u2705 Micro front-end trends \u2705 Why do micro front ends exist? \u2705 Advantages of the micro front-end strategy \u2705\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Micro front end - Prototyping of web front-ends and microservices\" \/>\n<meta property=\"og:description\" content=\"What is a micro front end? \u2705 Micro front-end trends \u2705 Why do micro front ends exist? \u2705 Advantages of the micro front-end strategy \u2705\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/\" \/>\n<meta property=\"og:site_name\" content=\"Rock the Prototype - Softwareentwicklung &amp; Prototyping\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-02T04:21:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2022\/07\/Micro-Frontends.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"993\" \/>\n\t<meta property=\"og:image:height\" content=\"539\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/software-architecture\\\/micro-front-end\\\/\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/software-architecture\\\/micro-front-end\\\/\",\"name\":\"Micro front end - Prototyping of web front-ends and microservices\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/software-architecture\\\/micro-front-end\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/software-architecture\\\/micro-front-end\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/Micro-Frontends.jpg\",\"datePublished\":\"2024-12-02T04:16:11+00:00\",\"dateModified\":\"2024-12-02T04:21:34+00:00\",\"description\":\"What is a micro front end? \u2705 Micro front-end trends \u2705 Why do micro front ends exist? \u2705 Advantages of the micro front-end strategy \u2705\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/software-architecture\\\/micro-front-end\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/software-architecture\\\/micro-front-end\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/software-architecture\\\/micro-front-end\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/Micro-Frontends.jpg\",\"contentUrl\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/Micro-Frontends.jpg\",\"width\":993,\"height\":539,\"caption\":\"Micro-Frontend - Microservices f\u00fcr Micro-Frontends\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/software-architecture\\\/micro-front-end\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/rock-the-prototype\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prototyping Wiki\",\"item\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/wiki\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Micro front end\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/\",\"name\":\"Rock the Prototype - Softwareentwicklung &amp; Prototyping\",\"description\":\"Prototyping: Software Prototypen, Software entwickeln &amp; Programmieren im Team\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Micro front end - Prototyping of web front-ends and microservices","description":"What is a micro front end? \u2705 Micro front-end trends \u2705 Why do micro front ends exist? \u2705 Advantages of the micro front-end strategy \u2705","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:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/","og_locale":"en_US","og_type":"article","og_title":"Micro front end - Prototyping of web front-ends and microservices","og_description":"What is a micro front end? \u2705 Micro front-end trends \u2705 Why do micro front ends exist? \u2705 Advantages of the micro front-end strategy \u2705","og_url":"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/","og_site_name":"Rock the Prototype - Softwareentwicklung &amp; Prototyping","article_modified_time":"2024-12-02T04:21:34+00:00","og_image":[{"width":993,"height":539,"url":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2022\/07\/Micro-Frontends.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/","url":"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/","name":"Micro front end - Prototyping of web front-ends and microservices","isPartOf":{"@id":"https:\/\/rock-the-prototype.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#primaryimage"},"image":{"@id":"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#primaryimage"},"thumbnailUrl":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2022\/07\/Micro-Frontends.jpg","datePublished":"2024-12-02T04:16:11+00:00","dateModified":"2024-12-02T04:21:34+00:00","description":"What is a micro front end? \u2705 Micro front-end trends \u2705 Why do micro front ends exist? \u2705 Advantages of the micro front-end strategy \u2705","breadcrumb":{"@id":"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#primaryimage","url":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2022\/07\/Micro-Frontends.jpg","contentUrl":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2022\/07\/Micro-Frontends.jpg","width":993,"height":539,"caption":"Micro-Frontend - Microservices f\u00fcr Micro-Frontends"},{"@type":"BreadcrumbList","@id":"https:\/\/rock-the-prototype.com\/en\/software-architecture\/micro-front-end\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/rock-the-prototype.com\/en\/rock-the-prototype\/"},{"@type":"ListItem","position":2,"name":"Prototyping Wiki","item":"https:\/\/rock-the-prototype.com\/en\/wiki\/"},{"@type":"ListItem","position":3,"name":"Micro front end"}]},{"@type":"WebSite","@id":"https:\/\/rock-the-prototype.com\/en\/#website","url":"https:\/\/rock-the-prototype.com\/en\/","name":"Rock the Prototype - Softwareentwicklung &amp; Prototyping","description":"Prototyping: Software Prototypen, Software entwickeln &amp; Programmieren im Team","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rock-the-prototype.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/encyclopedia\/5338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/encyclopedia"}],"about":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/types\/encyclopedia"}],"author":[{"embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/media\/3375"}],"wp:attachment":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/media?parent=5338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/categories?post=5338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/tags?post=5338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}