{"id":46008,"url":"https://github.com/semlinker/awesome-micro-frontends","name":"awesome-micro-frontends","description":"An Awesome list of posts, videos and tutorials on Micro Frontends","projects_count":136,"last_synced_at":"2026-08-02T18:00:25.155Z","repository":{"id":80396560,"uuid":"229857173","full_name":"semlinker/awesome-micro-frontends","owner":"semlinker","description":"An Awesome list of posts, videos and tutorials on Micro Frontends","archived":false,"fork":false,"pushed_at":"2020-03-04T01:58:33.000Z","size":19,"stargazers_count":68,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-06-26T07:04:17.860Z","etag":null,"topics":["awesome","awesome-list","microfrontend","microfrontends"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/semlinker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-12-24T02:40:25.000Z","updated_at":"2026-01-28T15:18:38.000Z","dependencies_parsed_at":"2023-06-07T03:00:15.746Z","dependency_job_id":null,"html_url":"https://github.com/semlinker/awesome-micro-frontends","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/semlinker/awesome-micro-frontends","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semlinker%2Fawesome-micro-frontends","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semlinker%2Fawesome-micro-frontends/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semlinker%2Fawesome-micro-frontends/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semlinker%2Fawesome-micro-frontends/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/semlinker","download_url":"https://codeload.github.com/semlinker/awesome-micro-frontends/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semlinker%2Fawesome-micro-frontends/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36202487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-08-02T02:00:06.915Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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"}},"created_at":"2024-01-14T02:28:03.865Z","updated_at":"2026-08-02T18:00:25.155Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Awesome Micro Frontends\n\n![awesome](./media/awesome.svg)  ![zh-cn](./media/zh-cn.svg)  ![license](./media/creative-commons.svg)\n\n微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为**多个小型前端应用聚合为一的应用**。各个前端应用还可以**独立运行**、**独立开发**、**独立部署**。\n\n本文的资源来源于以下网站：\n\n[![sf-favicon.ico](./media/sf-favicon.ico)](https://segmentfault.com/) [![juejin-favicon](./media/juejin-favicon.ico)](https://juejin.im/timeline) [![zhihu-favicon](./media/zhihu-favicon.ico)](https://www.zhihu.com/explore) [![jianshu-favicon](./media/jianshu-favicon.ico)](https://www.jianshu.com/) [![toutiao-favicon](./media/toutiao-favicon.ico)](https://toutiao.io/) [![medium-favicon](./media/medium-favicon.ico)](https://medium.com/)[![github-favicon](./media/github-favicon.ico)](https://github.com/)\n\n### 框架\n\n- [Mooa](https://github.com/phodal/mooa)\n- [Single-Spa](https://single-spa.js.org/)\n- [Qiankun](https://github.com/umijs/qiankun)\n- [Icestark](https://github.com/ice-lab/icestark)\n- [Ara Framework](https://ara-framework.github.io/website/)\n- [OpenComponents](https://github.com/opencomponents/oc)\n- [NUT](https://github.com/nut-project/nut)\n- [PuzzleJs](https://github.com/puzzle-js/puzzle-js)\n\n### 中文资源\n\n- [黄峰达 - 为什么微前端开始在流行：后端解耦，前端聚合](https://segmentfault.com/a/1190000015269379)\n- [黄峰达 - 微前端的那些事儿](https://github.com/phodal/microfrontends)\n- [李熠 - 微前端说明书](https://zhuanlan.zhihu.com/p/82051427)\n- [Belllee - 微前端简介](https://www.jianshu.com/p/785c2ca5a886)\n- [方应杭 - 微前端入门](https://juejin.im/post/5d8adb8ff265da5ba12cd173)\n- [Vincent.W - 了解什么是微前端](https://juejin.im/post/5d1f19e3f265da1bab29ce5f)\n- [王下邀月熊 - 微前端的设计理念与实践初探](https://zhuanlan.zhihu.com/p/41879781)\n- [云峰yf -【译】我不懂微前端（前端微服务）](https://juejin.im/post/5cf472d7f265da1bbb03c431)\n- [云峰yf - 【译】采用微前端架构](https://juejin.im/post/5d04989e5188257a6b40e5c0)\n- [黄峰达 - 微前端如何落地？](https://juejin.im/post/5d1d8d426fb9a07efe2dda40)\n- [黄峰达 - 实施前端微服务化的六七种方式](https://zhuanlan.zhihu.com/p/39102712)\n- [Fundebug - 如何实现前端微服务化](https://segmentfault.com/a/1190000010571346)\n- [Supernavy - 个推前端微服务化：突破传统SPA瓶颈](https://segmentfault.com/a/1190000017362827)\n- [Trotyl Yu - 精致化的微前端开发之旅](https://zhuanlan.zhihu.com/p/46284079)\n- [每日优鲜大前端团队 - 每日优鲜供应链前端团队微前端改造](https://juejin.im/post/5d7f702ce51d4561f777e258)\n- [美团技术团队 - 用微前端的方式搭建类单页应用](https://zhuanlan.zhihu.com/p/43991645)\n- [美团技术团队 - 微前端在美团外卖的实践](https://juejin.im/post/5e57b6f0f265da57547794c9)\n- [字节跳动技术团队 - 字节跳动的微前端沙盒实践](https://juejin.im/post/5e4941d46fb9a07c8334d3e9)\n- [爱奇艺号 - 微前端架构实践](https://mp.weixin.qq.com/s/MgZGuthSv49qXWr_YBhyeQ)\n- [前端之巅 - 网易严选企业级微前端解决方案与落地实践](https://mp.weixin.qq.com/s/x2N-Y5xZV-XbrqxDT_wLKA)\n- [Kuitos - 可能是你见过最完善的微前端解决方案](https://zhuanlan.zhihu.com/p/78362028)\n- [徐海峰 - 使用 Angular 打造微前端架构的 ToB 企业级应用](https://zhuanlan.zhihu.com/p/93813936)\n- [张亚涛 - 带你手写微前端框架](https://segmentfault.com/a/1190000020832808)\n- [张亚涛 - 微内核架构在大型前端系统中的应用](https://segmentfault.com/a/1190000016862735)\n- [Kiliwalk - 微前端实践](https://juejin.im/post/5cadd7835188251b2f3a4bb0)\n\n#### 系列教程\n\n- [Alili.tech - 前端微服务化解决方案1 - 思考](http://alili.tech/archive/ea599f7c/)\n- [Alili.tech - 前端微服务化解决方案2 - Single-SPA](http://alili.tech/archive/11052bf4/)\n- [Alili.tech - 前端微服务化解决方案3 - 模块加载器](http://alili.tech/archive/1a60cede/)\n- [Alili.tech - 前端微服务化解决方案4 - 消息总线](http://alili.tech/archive/a9a1f81b/)\n- [Alili.tech - 前端微服务化解决方案5 - 路由分发](http://alili.tech/archive/5ff0b366/)\n- [Alili.tech - 前端微服务化解决方案6 - 构建与部署](http://alili.tech/archive/ffb0c5ab/)\n- [Alili.tech - 前端微服务化解决方案7 - 静态数据共享](http://alili.tech/archive/5e00e43d/)\n- [Alili.tech - 前端微服务化解决方案8 - 二次构建](http://alili.tech/archive/ce685b9f/)\n\n#### 第十四届 D2 微前端专场\n\n- [语雀 - 云生态新物种 —— 微前端架构体系](https://www.yuque.com/preview/yuque/0/2019/pdf/333434/1577094595095-fc7b3af2-c6e5-4373-93a7-a03a6912d22b.pdf)\n- [语雀 - 标准微前端架构在蚂蚁的落地实践](https://www.yuque.com/office/yuque/0/2019/pdf/333434/1577094607775-dc693f2f-da57-4ddc-b000-776a1cfe4b30.pdf)\n- [语雀 - 微前端沙盒体系](https://www.yuque.com/office/yuque/0/2019/pdf/333434/1577094624429-fc927643-26d4-4af0-a3d9-f630d51eb5ba.pdf)\n\n#### Angular\n\n- [AngularInDepth - 构建微前端 Angular Elements](https://zhuanlan.zhihu.com/p/98754714)\n\n#### React\n\n- [Ve - 微前端(singleSpa + React )试玩](https://juejin.im/post/5dd25f0e5188254a1f4464be)\n- [王下邀月熊 - 基于 React \u0026 TypeScript \u0026 Webpack 的微前端应用模板](https://juejin.im/post/5c4f265e6fb9a049a97a199d)\n\n#### Vue\n\n- [王圣松 - Single-Spa + Vue Cli 微前端落地指南](https://juejin.im/post/5dfd8a0c6fb9a0165f490004)\n\n### 示例\n\n- [Joeldenning - Vue Microfrontends](https://github.com/joeldenning/coexisting-vue-microfrontends)\n- [CanopyTax - single-spa-examples](https://github.com/CanopyTax/single-spa-examples)\n\n### 书籍\n\n- [黄峰达 - 前端架构：从入门到微前端](https://item.jd.com/12621088.html)\n- [Michael Geers - Micro Frontends in Action](https://www.manning.com/books/micro-frontends-in-action)\n\n### 英文资源\n\n\u003e 下列英文资源主要来源于 [Rajasegar - awesome-micro-frontends](https://github.com/rajasegar/awesome-micro-frontends) 项目，感谢 Rajasegar Chandran 的无私分享。\n\n#### Concepts\n\n- [micro-frontends.org](https://micro-frontends.org/)\n- [Micro frontends — a microservice approach to front-end web development ](https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16)\n\n#### Posts\n\n- [Building Micro Frontends with React, Vue, and Single-spa](https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op)\n- [6 Patterns for Microfrontends](https://blog.bitsrc.io/6-patterns-for-microfrontends-347ae0017ec0)\n- [Micro Frontends by Cam Jackson](https://martinfowler.com/articles/micro-frontends.html)\n- [Micro frontends - a microservice approach to front-end web development](https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16)\n- [Microservices to Micro-Frontends](http://www.agilechamps.com/microservices-to-micro-frontends/)\n- [Cookie Cutter Scaling](https://paulhammant.com/categories.html#Cookie_Cutter_Scaling)\n- [Microservice Websites](https://gustafnk.github.io/microservice-websites/)\n- [What is a micro frontend](https://hub.packtpub.com/what-micro-frontend/)\n- [ThoughtWorks Technology Radar](https://www.thoughtworks.com/de/radar/techniques/micro-frontends)\n- [Dynamic vs. static ui composition](https://medium.com/@heartfor.it/dynamic-vs-static-ui-composition-4325282c760d)\n- [Micro-libraries: The Future of front-end development](http://blog.wolksoftware.com/microlibraries-the-future-of-web-development)\n- [The monolithic frontend in the microservices architecture](https://xebia.com/blog/the-monolithic-frontend-in-the-microservices-architecture/)\n- [A Software Architect's Approach towards MicroFrontends](https://www.softwarearchitekt.at/post/2017/12/28/a-software-architect-s-approach-towards-using-angular-and-spas-in-general-for-microservices-aka-microfrontends.aspx)\n- [An approach to building Scalable Web Apps](https://medium.com/@areai51/microfrontends-an-approach-to-building-scalable-web-apps-e8678e2acdd6)\n- [A Take on Micro-Frontends](https://x-team.com/blog/micro-frontend/)\n- [Building Microfrontends - Series](https://medium.com/@_rchaves_/building-microfrontends-part-i-creating-small-apps-710d709b48b7)\n- [Including Front-End Web Components Into Microservices](https://technologyconversations.com/2015/08/09/including-front-end-web-components-into-microservices/)\n- [Microservice Grid and Micro Frontends](https://dejanglozic.com/2017/02/22/microservice-grid-and-micro-frontends/)\n- [Microservice Websites](http://microservice-websites.netlify.com/)\n- [Microservices to Micro-Frontends by Sandeep Jain](http://www.agilechamps.com/microservices-to-micro-frontends/)\n- [Front-end microservices with Web Components](https://hackernoon.com/front-end-microservices-with-web-components-597759313393)\n- [Supporting Micro-frontends with ASP.NET Core MVC](https://blogs.msdn.microsoft.com/premier_developer/2018/03/09/supporting-micro-frontends-with-asp-net-core-mvc/)\n- [Building micro frontends — angular elements](https://itnext.io/building-micro-frontend-applications-with-angular-elements-34483da08bcb)\n- [Micro Front-Ends: Webpack Manifest](https://medium.embengineering.com/micro-front-ends-webpack-manifest-b05fc63a0d53)\n- [My experience using micro frontends by David Den Toom](https://medium.com/@daviddentoom/my-experience-using-micro-frontends-e99a1ad6ed32)\n- [Page Building using Micro-Frontends and Server-Side Include](https://medium.com/js-dojo/page-building-using-micro-frontends-c13c157958c8)\n- [Strangling a Monolith to Micro-frontends with Laravel, Vue.js, and Hypernova](https://medium.com/js-dojo/strangling-a-monolith-to-micro-frontends-decoupling-presentation-layer-18a33ddf591b)\n- [Serverless Micro-frontends using Vue.js, AWS Lambda, and Hypernova](https://medium.com/js-dojo/serverless-micro-frontends-using-vue-js-aws-lambda-and-hypernova-835d6f2b3bc9)\n- [Using Micro-Frontends in WordPress with Gutenberg Blocks](https://itnext.io/using-micro-frontends-in-wordpress-with-gutenberg-blocks-882faad8cd62)\n- [Taming the Frontend Monolith](https://blog.logrocket.com/taming-the-front-end-monolith-dbaede402c39/)\n- [Micro-frontend Architecture: Replacing a Monolith from the Inside Out](https://levelup.gitconnected.com/micro-frontend-architecture-replacing-a-monolith-from-the-inside-out-61f60d2e14c1)\n- [Breaking down the last Monolith - Micro Frontends](https://dev.to/aregee/breaking-down-the-last-monolith-micro-frontends-hd4)\n\n#### Videos\n\n- [Micro Frontend - Web Rebels, Oslo 2018](https://www.youtube.com/watch?v=dTW7eJsIHDg)\n- [Break Up With Your Frontend Monolith - JS Kongress 2017](https://www.youtube.com/watch?v=W3_8sxUurzA)\n- [Youtube Playlist - Micro Frontend Talks](https://www.youtube.com/playlist?list=PLI1AtZo9B3YL_xpi19IuxFcTuCi2_thQT)\n- [Micro­service Websites by Gustaf Nilsson Kotte](https://vimeo.com/242458365)\n- [Breaking The Monolith](https://vimeo.com/97666093)\n- [Microservice UI Composition](https://www.oio.de/m/konf/wjax2016/Microservice-UI_WJAX2016.pdf)\n- [Introduction to Piral](https://www.youtube.com/watch?v=SkKvpBHy_5I)\n\n#### Slides\n\n- [Micro Frontends - JSUnconf.eu 2017](https://speakerdeck.com/naltatis/micro-frontends-building-a-modern-webapp-with-multiple-teams)\n- [Micro Frontend - Web Rebels, Oslo 2018](https://noti.st/naltatis/HxcUfZ/micro-frontends-think-smaller-avoid-the-monolith-love-the-backend)\n- [Migrating from Monolith to Microfrontends](http://slides.com/yaprakayazoglu/monolith-to-microfrontend)\n- [Microservice Websites (microXchg 2017)](https://www.slideshare.net/GustafKotte/microservice-websites-microxchg-2017)\n- [Microservice Websites Presentation](https://www.slideshare.net/GustafKotte/microservice-websites-redev-2017-81811987)\n- [Avoid the Monolith by Michael Geers](https://noti.st/naltatis/HxcUfZ/slides)\n- [Micro Frontends by Michael Geers](https://speakerdeck.com/naltatis/micro-frontends-yglf-tel-aviv)\n- [Micro Frontends - The Nitty Gritty Details or Frontend, Backend, 🌈 Happyend](https://noti.st/naltatis/zQb2m5/micro-frontends-the-nitty-gritty-details-or-frontend-backend-happyend)\n- [Micro Frontends by Assaf Gannon](https://de.slideshare.net/AssafGannon/micro-frontends)\n- [Micro Frontends by Srikanth Jallapuram](https://de.slideshare.net/SrikanthJallapuram/micro-frontends-78813796)\n- [Micro Frontends: Building a modern webapp with multiple teams by Michael Geers](https://speakerdeck.com/naltatis/micro-frontends-building-a-modern-webapp-with-multiple-teams)\n- [Introduction to micro frontends by Kuba Holak](https://slides.com/kubaholak/introduction-to-micro-frontends)\n- [Microfrontends architecture by Lucca Mezzalira](https://docs.google.com/presentation/d/1-SGjpuL6TibMlnawW42nFA9rDXclLrC_vQrn2cBJMo8/edit#slide=id.g35f391192_00)\n- [Lets talk about Micro Frontends](https://microfrontend.deckset.net/)\n- [Micro Frontends - a strive for fully verticalized systems](https://speakerdeck.com/duffleit/micro-frontends-a-strive-for-fully-verticalized-systems)\n- [Building micro-frontends by Luca Mezzalira](https://docs.google.com/presentation/d/1DgK2mjJ9IYbCmjgzJH5ru5YLv88zKpcCxKrMozqnT3A/edit#slide=id.g42f50ce565_0_651)\n\n#### Experience Reports\n\n- [Upwork: Modernizing Upwork with Micro Frontends](https://www.upwork.com/blog/2017/05/modernizing-upwork-micro-frontends/)\n- [allegro: Managing Frontend in the Microservices Architecture](https://allegro.tech/2016/03/Managing-Frontend-in-the-microservices-architecture.html)\n- [Hello Fresh: Front-end Microservices](https://engineering.hellofresh.com/front-end-microservices-at-hellofresh-23978a611b87)\n- [OpenTable: Microservices in the Frontend World](http://tech.opentable.co.uk/blog/2016/04/27/opencomponents-microservices-in-the-front-end-world/)\n- [OpenTable: Dismantling the monolith](http://tech.opentable.co.uk/blog/2015/02/09/dismantling-the-monolith-microsites-at-opentable/)\n- [5 years of OpenComponents](https://medium.com/@matteofigus/5-years-of-opencomponents-3114e6d6a35b)\n- [AutoScout24: UI Composition](https://medium.com/scout24-engineering)\n- [Klarna Checkout](https://news.ycombinator.com/item?id=13012916)\n- [Spotify: Technology Stack](https://www.quora.com/What-is-the-technology-stack-behind-the-Spotify-web-client/answer/Andreas-Blixt)\n- [Let's build a Webshop out of Micro Frontends](https://blog.senacor.com/microfrontends/)\n- [Using Micro-Frontends to Permanently Solve the Legacy JavaScript Problem](https://medium.com/hacking-talent/using-micro-frontends-to-permanently-solve-the-legacy-javascript-problem-5fba18b0ceac)\n- [Micro Frontends with Gustaf Nilsson Kotte](https://www.case-podcast.org/22-micro-frontends-with-gustaf-nilsson-kotte)\n- [Experiences Using Micro Frontends at IKEA](https://www.infoq.com/news/2018/08/experiences-micro-frontends/)\n- [Microservice Websites: Building consumer-facing websites with multiple teams](https://gustafnk.github.io/microservice-websites)\n\n#### Related\n\n- [Angular_MicroApps_Different_Technologies](https://github.com/manfredsteyer/Angular_MicroApps_Different_Technologies)\n- [A tiny, fast, zero-dependency event emitter](https://github.com/chrisdavies/eev)\n- [Exercises for course \"Integrating microservices on the frontend\"](https://github.com/0xR/micro-frontend)\n- [Extending the microservice paradigms to web development](https://github.com/neuland/micro-frontends)\n- [Micromono](https://github.com/lsm/micromono)\n- [Microservices in the frontend with BFFs providing their own bundles and API.](https://github.com/dactylographsy/browser-dactylographsy)\n- [Proxy middleware for express that enables composition of microservices.](https://github.com/tes/compoxure)\n- [Service Oriented Front-end](https://github.com/CanopyTax/sofe)\n- [Simulate a micro frontend project using NodeJS, React and NGinx Reverse Proxy in Alpine Docker images](https://github.com/willmendesneto/micro-frontend-pages)\n\n#### Platforms\n\n- [Mashroom Server](https://www.mashroom-server.com/)\n- [Piral](https://piral.io/)\n\n#### Awesome Micro Frontends\n\n- [Rajasegar - awesome-micro-frontends](https://github.com/rajasegar/awesome-micro-frontends)\n- [ChristianUlbrich - awesome-microfrontends](https://github.com/ChristianUlbrich/awesome-microfrontends)\n\n## 贡献\n\n欢迎您的贡献 🌺\n\n### 指南\n\n1. 请您确保在正确的目录下补充资源项。\n2. 总是在列表项的末尾添加新的资源项，新增的规则请您保持与当前目录资源项格式一致。\n3. 如果您觉得某些项目归属到错误的目录下或认为需要添加新的目录，请您自由编辑。\n\n**[⬆ 返回顶部](#框架)**","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/semlinker%2Fawesome-micro-frontends/projects"}