{"id":16295533,"url":"https://github.com/santoshshinde2012/micro-frontends-mindmaps","last_synced_at":"2025-03-16T13:31:42.022Z","repository":{"id":97918811,"uuid":"464093084","full_name":"santoshshinde2012/micro-frontends-mindmaps","owner":"santoshshinde2012","description":"A mindmap summarising micro-frontends concepts ","archived":false,"fork":false,"pushed_at":"2025-03-13T02:56:31.000Z","size":3375,"stargazers_count":40,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-13T03:29:09.989Z","etag":null,"topics":["angular","microframework","microfrontend-architecture","microfrontends","microservices","module-federation","reactjs","vuejs","webpack5"],"latest_commit_sha":null,"homepage":"https://blog.santoshshinde.com/four-micro-frontend-anti-patterns-58aaa9fe19d5","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/santoshshinde2012.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-27T09:35:57.000Z","updated_at":"2025-03-13T02:56:34.000Z","dependencies_parsed_at":"2024-06-28T14:39:24.081Z","dependency_job_id":"38046d3d-e13f-4b71-9bf8-9ced5848a446","html_url":"https://github.com/santoshshinde2012/micro-frontends-mindmaps","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santoshshinde2012%2Fmicro-frontends-mindmaps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santoshshinde2012%2Fmicro-frontends-mindmaps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santoshshinde2012%2Fmicro-frontends-mindmaps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/santoshshinde2012%2Fmicro-frontends-mindmaps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/santoshshinde2012","download_url":"https://codeload.github.com/santoshshinde2012/micro-frontends-mindmaps/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243817302,"owners_count":20352535,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","microframework","microfrontend-architecture","microfrontends","microservices","module-federation","reactjs","vuejs","webpack5"],"created_at":"2024-10-10T20:19:02.559Z","updated_at":"2025-03-16T13:31:42.016Z","avatar_url":"https://github.com/santoshshinde2012.png","language":null,"funding_links":["https://www.buymeacoffee.com/santoshshin"],"categories":["Architecture and Advanced Topics"],"sub_categories":["Micro-Frontends"],"readme":"# Micro-Frontend Mindmaps\n\n#### What\n\nIn this repository, you will find mindmaps we created about Micro-Frontend based on public information. As all of the information is already in the public domain, please feel free to use and share these mindmaps however you like.  \n\n#### What is Micro-Frontend ?\n\nMicro-frontends are the technical representation of a business subdomain, they allow independent implementation with the same and different technology.\n\nPlease find the key factors for micro-frontends below.\n\n- Decomposed\n- Independent\n- Tech-Agnostic\n- Deployable Separately\n- Loosely Coupled\n- Customizable\n- Updated Incrementally\n- Fault-Tolerant\n\n\n\n#### The History of Microfrontends\n\n![The History of Microfrontends](assets/mf-history.png)\n![The History of Microfrontends](assets/micro-frontend-history.png)\n\n\n- 2011: Microservices\n- 2016: [Thought Works added Micro frontends to the technology radar](https://www.thoughtworks.com/radar/techniques/micro-frontends)\n- Nov 2017: [Thought Works recommended Single-Spa for Micro-frontends implementation](https://www.thoughtworks.com/en-in/radar/languages-and-frameworks/single-spa)\n- 2019: [Martin Fowler wrote his article about Micro-frontends and promoted Micro-frontends architecture in his article “Micro Frontends.”](https://martinfowler.com/articles/micro-frontends.html)\n- Apr 2020: [We see microfrontend architect design as a trend early in 2020 - Software Architecture and Design InfoQ Trends](https://www.infoq.com/articles/architecture-trends-2020/)\n- Oct 2020: [By the end of 2020, Zack Jackson released his masterpiece “Module Federation” as a plugin in Webpack 5](https://webpack.js.org/concepts/module-federation/)\n- 2021: Discovery\n- Apr 2021: [Thought-works started to recommend Module Federation for Micro-frontends implementations](https://www.thoughtworks.com/radar/languages-and-frameworks/webpack-5-module-federation)\n\n#### Micro-frontends decisions framework\n\nThe 4 pillars that we need to decide up-front when architecting micro-frontends, as stated by [Luca Mezzalira](https://github.com/lucamezzalira) here in his medium article - [Micro-frontends decisions framework](https://medium.com/@lucamezzalira/micro-frontends-decisions-framework-ebcd22256513).\n\n```mermaid\ngraph TD;\n  A1[Micro-frontends decisions framework]--\u003eB1[Definition];\n  A1[Micro-frontends decisions framework]--\u003eB2[Composition];\n  A1[Micro-frontends decisions framework]--\u003eB3[Route];\n  A1[Micro-frontends decisions framework]--\u003eB4[Communication];\n```\n\n#### Defining Micro-Frontends\n\nIdentifying micro-frontends becomes quite straightforward. Understanding how users behave is of great use in determining our micro-frontends. You can read Luca Mezzalira's full article [here](https://medium.com/dazn-tech/identifying-micro-frontends-in-our-applications-4b4995f39257) for more details.\n\n[Identifying micro-frontends in our applications](https://medium.com/dazn-tech/identifying-micro-frontends-in-our-applications-4b4995f39257)\n\n\n\n```mermaid\ngraph TD;\n  A1[Defining Micro-Frontends]--\u003eB1[Horizontal split];\n  A1[Defining Micro-Frontends]--\u003eB2[Vertical split];\n  B1--Domain Driven Design--\u003eC1[Core Subdomains]\n  B1--Domain Driven Design--\u003eC2[Supporting Subdomains]\n  B1--Domain Driven Design--\u003eC3[Generic Subdomains]\n  B2--Domain Driven Design--\u003eC1[Core Subdomains]\n  B2--Domain Driven Design--\u003eC2[Supporting Subdomains]\n  B2--Domain Driven Design--\u003eC3[Generic Subdomains]\n```\n\n\n#### Composition of Micro-frontends\n\nAnalyzing how different frameworks can be used with different micro frontends on the same page.\n\n```mermaid\ngraph TD;\n  A[Composition of Micro-frontends]--\u003eA1[Client-side composition];\n  A[Composition of Micro-frontends]--\u003eA2[Edge-side composition];\n  A[Composition of Micro-frontends]--\u003eA3[Server-side composition];\n  A[Composition of Micro-frontends]--\u003eA4[Build Time Composition];\n```\n\n##### 1. Client-side composition\n\nClient Side Composition is one of the patterns that combine Fragments on client-side\n\n```mermaid\ngraph TD;\n  A1[Client-side composition]--\u003eB1[Fragments]\n  A1[Client-side composition]--\u003eB2[Libraries]\n  B2[Libraries]--\u003eC1[single-spa/single-spa]\n  B2[Libraries]--\u003eC2[frintjs/frint]\n  B2[Libraries]--\u003eC3[smapiot/piral]\n```\n\n##### 2. Edge-side composition\nBasically its combination of client side and server side composition to take the advantages of CDN caching.\nIdea behind edge-side composition – fragments are stitched together, close to the client. \n\n```mermaid\ngraph TD;\n  A1[Edge-side composition]--\u003eB1[Lambda Edge]\n  A1[Edge-side composition]--\u003eB2[Rendering Example]\n  B1[Lambda Edge]--\u003eC1[AWS Lambda CloudFront]\n  B2[Rendering Example]--\u003eD1[Next js using Lambda Edge and Serverless Framework]\n  B2[Rendering Example]--\u003eD2[Cloudflare Workers using a framework called Flareact]\n```\n\n\n##### 3. Server-side composition\nPattern that assembles Fragments on the server side.\n\n```mermaid\ngraph TD;\n  A1[Server-side composition]--\u003eB1[Layout Server]\n  A1[Server-side composition]--\u003eB2[Fragments Server]\n  A1[Server-side composition]--\u003eB3[Fragment Gateway]\n  A1[Server-side composition]--\u003eB4[Libraries]\n  B4[Libraries]--\u003eC1[Ara Framework]\n  B4[Libraries]--\u003eC2[OpenComponents]\n  B4[Libraries]--\u003eC3[Piral]\n  B4[Libraries]--\u003eC4[Tailor]\n```\n\n##### 4. Build Time Composition\nBuild Time Composition assembles Fragments at build time, not at client or server. Publish each micro frontend as a package, and have the container application include them all as library dependencies.\n\n```mermaid\ngraph TD;\n  A1[Build Time Composition]--\u003eB1[Shared libraries]\n  A1[Build Time Composition]--\u003eB2[Static Site Generators]\n  A1[Build Time Composition]--\u003eB3[Bit]\n```\n\n#### Micro-Frontends Communication\n\nThere are sometimes UI fragments belonging to different teams that need to interact or communicate. When a user adds an item to the basket by clicking the buy button, other micro frontends such as the mini basket want to be notified to update their content accordingly. \n\n##### 1. User interface communication\n\n```mermaid\ngraph TD;\n  A1[User interface communication]--\u003eB1[Parent to fragment]\n  A1[User interface communication]--\u003eB2[Fragment to parent]\n  A1[User interface communication]--\u003eB3[Fragment to fragment]\n  A1[User interface communication]--\u003eB4[Publish Subscribe with the Broadcast Channel API]\n\n```\n\n##### 2. Sharing state\n\n```mermaid\ngraph TD;\n  A1[Sharing state]--\u003eB1[Web Workers]\n  A1[Sharing state]--\u003eB2[Props and callbacks]\n  A1[Sharing state]--\u003eB3[Custom Events]\n  A1[Sharing state]--\u003eB4[Pub Sub library]\n  A1[Sharing state]--\u003eB5[Custom implementation]\n```\n\n#### Micro-Frontends Communication Patterns\n\n\n##### 1. Parent to Fragment\n\n\n```mermaid\ngraph TD;\n  A1[Parent to Fragment]--\u003eB1[Element Attributes]\n  A1[Parent to Fragment]--\u003eB2[Connected Callback]\n  A1[Parent to Fragment]--\u003eB3[Attribute Change Callback]\n```\n\n##### 2. Fragment to Parent\n\n```mermaid\ngraph TD;\n  A1[Fragment to Parent]--\u003eB1[Custom Events]\n  A1[Fragment to Parent]--\u003eB2[Event Listeners]\n```\n\n##### 3. Fragment to Fragment\n\n```mermaid\ngraph TD;\n  A1[Fragment to Fragment]--\u003eB1[DOM Manipulation]\n  A1[Fragment to Fragment]--\u003eB2[Attributes and Callbacks]\n  A1[Fragment to Fragment]--\u003eB3[Event Bus]\n  A1[Fragment to Fragment]--\u003eB4[Broadcast Channel API]\n```\n\n##### 4. Global Communication\n\n```mermaid\ngraph TD;\n  A1[Global Communication]--\u003eB1[URL Params]\n  A1[Fragment to Fragment]--\u003eB2[Global Context and State]\n  A1[Fragment to Fragment]--\u003eB3[State Management Libraries Redux]\n```\n\n\n#### Micro-Frontends anti-patterns\n\n- Difference between micro-frontend and component\n- Multi frameworks approach\n- Write programs that do thing and do it well\n- Dependency hell\n- Unidirectional flow at the rescue\n- Avoid organizational coupling\n- Multiple micro-frontends calling same endpoint\n\n![4 Micro-Frontend Anti-Patterns](assets/four-micro-frontend-anti-patterns.jpeg)\n\n##### 1. Difference between micro-frontend and component\n\nA micro-frontend is a technical representation of a business subdomain that has a specific behavior that is controlled by the self.\n\nA Component is a technical solution for any frontend element that has a specific behavior that may be modified by a controlled component or container.\n\n\n| Component | Micro-Frontends |\n| :---: | :---: | \n| Technical Solution | Technical Representation of business subdomain |\n|  Having a specific behavior that may be modified by a controlled component or container. | Having some Behaviour but driven by self |\n\n\n#### Implementation of  Micro Frontends\n\nThere are several ways to implement a microfrontend, and this article([3 Ways to Build Micro-Frontends](https://javascript.plainenglish.io/3-ways-to-develop-micro-frontends-in-2022-e29984158b6d)) will help you understand them.\n\nAccording to my understanding, the application shell is the most crucial component of a micro-frontend architecture, as it is the component that enables you to render your all micro-frontends inside of a container.\n\n###### Application shell\n\nThe application shell serves as the parent application to all micro-frontends. All incoming requests arrive there, It selects the micro-frontend that the user wishes to view and renders it in the \u003cbody\u003e documents.\n\n![Application shell](assets/micro-frontends-application-shell.jpg)\n\n#### Micro Frontends Frameworks\n\n1. [Bit](https://bit.dev/)\n2. [Webpack 5 and Module Federation](https://webpack.js.org/concepts/module-federation/)\n3. [Single SPA](https://single-spa.js.org/)\n4. [Systemjs](https://github.com/systemjs/systemjs)\n5. [Piral](https://github.com/smapiot/piral)\n6. [Open Components](https://github.com/opencomponents/oc)\n7. [Qiankun](https://github.com/umijs/qiankun)\n8. [Luigi](https://luigi-project.io/)\n9. [FrintJS](https://github.com/frintjs/frint)\n10. [Mosaic 9](https://www.mosaic9.org/)\n11. [PuzzleJS](https://github.com/puzzle-js/puzzle-js)\n\n\n#### Microfrontends with Module Federation\n\nModule federation allows a JavaScript application to dynamically run code from another bundle/build, on both client and server.\n\n- loading the module (asynchronous)\n- evaluating the module (synchronous)\n\n##### Why Use Module Federation?\n\n- Better way to share code : Expose any code from any application that Webpack supports.\n- Environment-Independent : Use shared code in different environment web, Node.js etc.\n- Resolves Dependency Issues : Federated code defines their dependencies and if Webpack can’t find it in the scope, will download it.\n- Modernize Legacy Applications: The microfrontend approach divides a frontend into smaller, deployable parts, but is crucial for real-time scenarios with legacy applications and modernization, as companies may be reluctant to rewrite entire applications.\n\n###### Advanced Topics\n\n- Version Mismatches\n- Dynamic Federation\n- Mono vs. Multirepo\n- Multiple Frameworks/Versions\n#### [Summary](https://www.xmind.net/m/nfT7ef/) \n\n![Micro-Frontend Mindmap](assets/v1-microfrontend-mandmap.png)\n\n\n### Case Studies\n\n- [Experiences Using Micro Frontends at IKEA](https://www.infoq.com/news/2018/08/experiences-micro-frontends/)\n- [What is a Micro Frontend? Examples and Mobile App Benefits](https://ionic.io/resources/articles/micro-frontends-for-mobile-with-ionic-portals)\n  \n\n#### When to use Micro Frontends ?\n\nEach pattern, as we know, has advantages and disadvantages, and in order to use it, we must establish a boundary between these and our requirements.\n\n- Ideal for large, fast-growing, and complex enterprise applications.\n- Provides implementation independence, preventing blockages and bottlenecks.\n- Ideal for independent deployments, allowing frequent updates without disrupting the entire application.\n- Ideal for fast-paced environments requiring agility and quick response to changing marketing demands.\n- Can accommodate different technology stacks, allowing teams to select the technology stack that best suits their needs\n- Minimizes the risk of failure by detaching or detanglering different components of the application\n- Enables collaboration between multiple, independent teams on a single application\n- Creates a flexible application, allowing different configurations for different user types.\n- Ideal for gradual modernization of existing solutions, allowing for gradual replacement of old components with micro-frontends.\n\n#### References\n\n1. [Mindmap](https://www.xmind.net/m/nfT7ef/)\n2. [Behind leroymerlin.fr: Micro Frontends](https://medium.com/adeo-tech/behind-leroymerlin-fr-micro-frontends-47fd7c53f99d)\n3. [Resources to start with Micro Frontend](https://gist.github.com/santoshshinde2012/ff346ae8aca26644fe15409847138e49)\n4. [Micro Frontends Conference](https://hasgeek.com/jsfoo/microfrontends-conf/videos)\n5. [Micro frontend resources](https://github.com/billyjov/microfrontend-resources)\n6. [Four Micro-frontend Anti-patterns](https://blog.santoshshinde.com/four-micro-frontend-anti-patterns-58aaa9fe19d5)\n7. [What’s the Difference Between a Component and a Micro-Frontend?](https://javascript.plainenglish.io/whats-the-difference-between-a-component-and-a-micro-frontend-43aefd0af062)\n8. [Awesome Micro-Frontends](https://github.com/rajasegar/awesome-micro-frontends)\n9. [Use React components inside Angular](https://github.com/microsoft/angular-react)\n10. [Micro Frontend Architecture: Helping you move from theory to practice with our workshop](https://www.nearform.com/digital-community/micro-frontend-architecture-helping-you-move-from-theory-to-practice-with-our-workshop)\n11. [Micro Frontends — The Better Way to Modernize Legacy Applications](https://medium.com/@johnlawrimore/micro-frontends-a-game-changing-strategy-for-legacy-app-migrations-6288f50a6f72)\n12. [Micro frontend architecture](https://www.rst.software/blog/micro-frontend-architecture-101-what-is-it-when-to-use-it-and-how-to-migrate-your-existing-monolithic-app-in-9-steps)\n13. [Microfrontends: Are We Solving Problems or Creating Them?](https://medium.com/gitconnected/microfrontends-are-we-solving-problems-or-creating-them-35f1098b0820?sk=6c4acc16fe754bfc09fd666db6dca08a)\n\n#### Videos\n1. [Micro-frontend Anti-patterns](https://www.youtube.com/watch?v=b9Zpi-oajA0)\n2. [Micro-Frontends with Module Federation: Beyond the Basics](https://www.youtube.com/watch?v=tzXCrCwybgE)\n\n#### Courses\n\n1. [Microfrontends with React: A Complete Developer's Guide](https://www.udemy.com/course/microfrontend-course/learn/lecture/23206792#overview) by [Stephen Grider](https://www.linkedin.com/in/stephengrider)\n\n\n### Recent Medium Posts\n\n\u003ctable\u003e\n  \u003ctr\u003e\u003cth\u003eTitle\u003c/th\u003e\u003cth\u003eCategories\u003c/th\u003e\u003c/tr\u003e\n  \u003c!-- BLOG-POST-LIST:START --\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@sanjeevanibhandari3/micro-frontends-vs-monorepos-which-one-actually-scales-better-for-large-teams-4574c40a08bc?source=rss------micro_frontends-5\u003eMicro-Frontends vs. Monorepos: Which One Actually Scales Better for Large Teams?\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003efront-end-development, performance, monorepo, javascript, micro-frontends\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@ivanilsonmartinsantonio7/os-famosos-micro-frontends-com-angular-umguia-pr%C3%A1tico-573b3d215bf7?source=rss------micro_frontends-5\u003eOs famosos Micro Frontends com Angular, umGuia prático.\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003eangular-19, angular, micro-front-end, micro-frontends\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@olima94/microfrontends-and-monolithic-frontends-a-case-study-on-scalability-0f512f6a508c?source=rss------micro_frontends-5\u003eMicrofrontends and Monolithic Frontends: A Case Study on Scalability\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003efrontend, monolithic-architecture, micro-frontends\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@reddy.mallidi/micro-frontends-architecture-how-it-works-ee495d3a5a9f?source=rss------micro_frontends-5\u003eMicro Frontends Architecture, How it works?\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003emicro-frontends, microservices, cloud, microservice-architecture, api-gateway\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@sivaraj.mca17/unlocking-the-power-of-microfrontends-single-spa-with-module-federation-728ce82c4cfe?source=rss------module_federation-5\u003eUnlocking the Power of Microfrontends: Single-SPA with Module Federation\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003ereact, architecture, implement-microfrontend, single-spa, module-federation\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@ozguraktas.55555/what-is-micro-frontend-5aeac5c656fd?source=rss------micro_frontends-5\u003eWhat is Micro Frontend?\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003efrontend-development, micro-frontends, frontend, backend\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@larissavbenedet/como-surgiram-os-micro-frontends-e-porque-essa-arquitetura-domina-o-mercado-b9fd702620a3?source=rss------micro_frontends-5\u003eComo surgiram os micro frontends e porque essa arquitetura domina o mercado\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003esystem-design-concepts, micro-frontends, javascript, software-development, frontend-architecture\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@ayomitunde.isijola/micro-frontends-burgers-0736da8a5c24?source=rss------micro_frontends-5\u003eMicro-Frontends \u0026amp; Burgers\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003emicro-frontends, mfe, react, software-development, burgers\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@gersonjunior12/micro-front-end-with-vue-js-3-module-federation-93188cad8bd7?source=rss------module_federation-5\u003eMicro Front-end with Vue.js 3 + Module Federation\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003efrontend, webpack, module-federation, vuejs, micro-front-end\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://alihalabyah.medium.com/micro-frontends-for-scalable-web-applications-in-2025-dc34cbb88a97?source=rss------micro_frontends-5\u003eMicro-Frontends for Scalable Web Applications in 2025\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003efrontend, scalability, micro-frontends, module-federation, monorepo\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://alihalabyah.medium.com/micro-frontends-for-scalable-web-applications-in-2025-dc34cbb88a97?source=rss------module_federation-5\u003eMicro-Frontends for Scalable Web Applications in 2025\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003efrontend, scalability, micro-frontends, module-federation, monorepo\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/understanding-javascript-developwithmi/managing-angular-micro-frontends-with-git-submodules-a-step-by-step-guide-09d7676be353?source=rss------micro_frontends-5\u003eStop Struggling! How to Manage Angular Micro Frontends with Git\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003eangular, javascript, git, micro-frontends, devwithmi\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@sidelnykovvalery/monolithic-to-micro-frontend-the-never-ending-story-of-the-breakup-we-all-needed-d94164519c01?source=rss------micro_frontends-5\u003eMonolithic to Micro Frontend: The Never ending Story of the Breakup We All Needed\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003euse-cases, micro-frontends, architecture, front-end-development, monolithic-architecture\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@maheshlondhe/revolutionizing-web-development-a-deep-dive-into-react-js-microfrontend-architecture-010a3bcf6ef3?source=rss------module_federation-5\u003eRevolutionizing Web Development: A Deep Dive into React JS Microfrontend Architecture\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003ereactjs, react-microfrontend, web-development, module-federation, micro-frontend-deployment\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/front-end-weekly/exploring-react-micro-frontend-options-for-building-mf-apps-6720f36f56e4?source=rss------module_federation-5\u003eExploring React micro-frontend options for building MF apps.\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003emodule-federation, react-microfrontend, craco, micro-frontends, micro-frontend-deployment\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/@ermaneng/creating-an-nx-dynamic-module-federation-workspace-with-webpack-enhanced-runtime-in-angular-70a43a2fb875?source=rss------module_federation-5\u003eCreating an Nx Dynamic Module Federation Workspace with Webpack Enhanced Runtime in Angular\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003enx, havelsan, webpack, module-federation, angular\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://medium.com/odds-team/micro-frontend-with-vite-react-and-module-federation-1c397967ef1f?source=rss------module_federation-5\u003eMicro-frontend with Vite, React, and Module Federation\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003evitejs, micro-frontends, react, module-federation\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://levelup.gitconnected.com/micro-frontend-module-federation-da48d2f7ba19?source=rss------module_federation-5\u003eMicro Frontend Module Federation\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003eturborepo, micro-front-end, webpack, monorepo, module-federation\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003ca target='_blank' href=https://javascript.plainenglish.io/module-federation-in-rolldown-what-it-means-for-vite-6fc093e8c2d5?source=rss------module_federation-5\u003eModule Federation in Rolldown — What It Means for Vite?\u003c/a\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003ewebpack, frontend, module-federation, vitejs\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\u003c!-- BLOG-POST-LIST:END --\u003e\n\u003c/table\u003e\n\n\u003chr/\u003e\n\n### Connect with me on\n\u003cdiv id=\"badges\"\u003e\n  \u003ca href=\"https://twitter.com/shindesan2012\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/shindesan2012-black?style=for-the-badge\u0026logo=twitter\u0026logoColor=white\" alt=\"Twitter Badge\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.linkedin.com/in/shindesantosh/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/shindesantosh-blue?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" alt=\"LinkedIn Badge\"/\u003e\n  \u003c/a\u003e\n   \u003ca href=\"https://blog.santoshshinde.com/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Blog-black?style=for-the-badge\u0026logo=medium\u0026logoColor=white\" alt=\"Medium Badge\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/santoshshin\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/buymeacoffee-black?style=for-the-badge\u0026logo=buymeacoffee\u0026logoColor=white\" alt=\"Buy Me A Coffee\"/\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsantoshshinde2012%2Fmicro-frontends-mindmaps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsantoshshinde2012%2Fmicro-frontends-mindmaps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsantoshshinde2012%2Fmicro-frontends-mindmaps/lists"}