Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/semlinker/awesome-micro-frontends

An Awesome list of posts, videos and tutorials on Micro Frontends
https://github.com/semlinker/awesome-micro-frontends

List: awesome-micro-frontends

awesome awesome-list microfrontend microfrontends

Last synced: 3 months ago
JSON representation

An Awesome list of posts, videos and tutorials on Micro Frontends

Awesome Lists containing this project

README 

        
# Awesome Micro Frontends



![awesome](./media/awesome.svg)  ![zh-cn](./media/zh-cn.svg)  ![license](./media/creative-commons.svg)



微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为**多个小型前端应用聚合为一的应用**。各个前端应用还可以**独立运行**、**独立开发**、**独立部署**。



本文的资源来源于以下网站：



[![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/)



### 框架



- [Mooa](https://github.com/phodal/mooa)

- [Single-Spa](https://single-spa.js.org/)

- [Qiankun](https://github.com/umijs/qiankun)

- [Icestark](https://github.com/ice-lab/icestark)

- [Ara Framework](https://ara-framework.github.io/website/)

- [OpenComponents](https://github.com/opencomponents/oc)

- [NUT](https://github.com/nut-project/nut)

- [PuzzleJs](https://github.com/puzzle-js/puzzle-js)



### 中文资源



- [黄峰达 - 为什么微前端开始在流行：后端解耦，前端聚合](https://segmentfault.com/a/1190000015269379)

- [黄峰达 - 微前端的那些事儿](https://github.com/phodal/microfrontends)

- [李熠 - 微前端说明书](https://zhuanlan.zhihu.com/p/82051427)

- [Belllee - 微前端简介](https://www.jianshu.com/p/785c2ca5a886)

- [方应杭 - 微前端入门](https://juejin.im/post/5d8adb8ff265da5ba12cd173)

- [Vincent.W - 了解什么是微前端](https://juejin.im/post/5d1f19e3f265da1bab29ce5f)

- [王下邀月熊 - 微前端的设计理念与实践初探](https://zhuanlan.zhihu.com/p/41879781)

- [云峰yf -【译】我不懂微前端（前端微服务）](https://juejin.im/post/5cf472d7f265da1bbb03c431)

- [云峰yf - 【译】采用微前端架构](https://juejin.im/post/5d04989e5188257a6b40e5c0)

- [黄峰达 - 微前端如何落地？](https://juejin.im/post/5d1d8d426fb9a07efe2dda40)

- [黄峰达 - 实施前端微服务化的六七种方式](https://zhuanlan.zhihu.com/p/39102712)

- [Fundebug - 如何实现前端微服务化](https://segmentfault.com/a/1190000010571346)

- [Supernavy - 个推前端微服务化：突破传统SPA瓶颈](https://segmentfault.com/a/1190000017362827)

- [Trotyl Yu - 精致化的微前端开发之旅](https://zhuanlan.zhihu.com/p/46284079)

- [每日优鲜大前端团队 - 每日优鲜供应链前端团队微前端改造](https://juejin.im/post/5d7f702ce51d4561f777e258)

- [美团技术团队 - 用微前端的方式搭建类单页应用](https://zhuanlan.zhihu.com/p/43991645)

- [美团技术团队 - 微前端在美团外卖的实践](https://juejin.im/post/5e57b6f0f265da57547794c9)

- [字节跳动技术团队 - 字节跳动的微前端沙盒实践](https://juejin.im/post/5e4941d46fb9a07c8334d3e9)

- [爱奇艺号 - 微前端架构实践](https://mp.weixin.qq.com/s/MgZGuthSv49qXWr_YBhyeQ)

- [前端之巅 - 网易严选企业级微前端解决方案与落地实践](https://mp.weixin.qq.com/s/x2N-Y5xZV-XbrqxDT_wLKA)

- [Kuitos - 可能是你见过最完善的微前端解决方案](https://zhuanlan.zhihu.com/p/78362028)

- [徐海峰 - 使用 Angular 打造微前端架构的 ToB 企业级应用](https://zhuanlan.zhihu.com/p/93813936)

- [张亚涛 - 带你手写微前端框架](https://segmentfault.com/a/1190000020832808)

- [张亚涛 - 微内核架构在大型前端系统中的应用](https://segmentfault.com/a/1190000016862735)

- [Kiliwalk - 微前端实践](https://juejin.im/post/5cadd7835188251b2f3a4bb0)



#### 系列教程



- [Alili.tech - 前端微服务化解决方案1 - 思考](http://alili.tech/archive/ea599f7c/)

- [Alili.tech - 前端微服务化解决方案2 - Single-SPA](http://alili.tech/archive/11052bf4/)

- [Alili.tech - 前端微服务化解决方案3 - 模块加载器](http://alili.tech/archive/1a60cede/)

- [Alili.tech - 前端微服务化解决方案4 - 消息总线](http://alili.tech/archive/a9a1f81b/)

- [Alili.tech - 前端微服务化解决方案5 - 路由分发](http://alili.tech/archive/5ff0b366/)

- [Alili.tech - 前端微服务化解决方案6 - 构建与部署](http://alili.tech/archive/ffb0c5ab/)

- [Alili.tech - 前端微服务化解决方案7 - 静态数据共享](http://alili.tech/archive/5e00e43d/)

- [Alili.tech - 前端微服务化解决方案8 - 二次构建](http://alili.tech/archive/ce685b9f/)



#### 第十四届 D2 微前端专场



- [语雀 - 云生态新物种 —— 微前端架构体系](https://www.yuque.com/preview/yuque/0/2019/pdf/333434/1577094595095-fc7b3af2-c6e5-4373-93a7-a03a6912d22b.pdf)

- [语雀 - 标准微前端架构在蚂蚁的落地实践](https://www.yuque.com/office/yuque/0/2019/pdf/333434/1577094607775-dc693f2f-da57-4ddc-b000-776a1cfe4b30.pdf)

- [语雀 - 微前端沙盒体系](https://www.yuque.com/office/yuque/0/2019/pdf/333434/1577094624429-fc927643-26d4-4af0-a3d9-f630d51eb5ba.pdf)



#### Angular



- [AngularInDepth - 构建微前端 Angular Elements](https://zhuanlan.zhihu.com/p/98754714)



#### React



- [Ve - 微前端(singleSpa + React )试玩](https://juejin.im/post/5dd25f0e5188254a1f4464be)

- [王下邀月熊 - 基于 React & TypeScript & Webpack 的微前端应用模板](https://juejin.im/post/5c4f265e6fb9a049a97a199d)



#### Vue



- [王圣松 - Single-Spa + Vue Cli 微前端落地指南](https://juejin.im/post/5dfd8a0c6fb9a0165f490004)



### 示例



- [Joeldenning - Vue Microfrontends](https://github.com/joeldenning/coexisting-vue-microfrontends)

- [CanopyTax - single-spa-examples](https://github.com/CanopyTax/single-spa-examples)



### 书籍



- [黄峰达 - 前端架构：从入门到微前端](https://item.jd.com/12621088.html)

- [Michael Geers - Micro Frontends in Action](https://www.manning.com/books/micro-frontends-in-action)



### 英文资源



> 下列英文资源主要来源于 [Rajasegar - awesome-micro-frontends](https://github.com/rajasegar/awesome-micro-frontends) 项目，感谢 Rajasegar Chandran 的无私分享。



#### Concepts



- [micro-frontends.org](https://micro-frontends.org/)

- [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)



#### Posts



- [Building Micro Frontends with React, Vue, and Single-spa](https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op)

- [6 Patterns for Microfrontends](https://blog.bitsrc.io/6-patterns-for-microfrontends-347ae0017ec0)

- [Micro Frontends by Cam Jackson](https://martinfowler.com/articles/micro-frontends.html)

- [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)

- [Microservices to Micro-Frontends](http://www.agilechamps.com/microservices-to-micro-frontends/)

- [Cookie Cutter Scaling](https://paulhammant.com/categories.html#Cookie_Cutter_Scaling)

- [Microservice Websites](https://gustafnk.github.io/microservice-websites/)

- [What is a micro frontend](https://hub.packtpub.com/what-micro-frontend/)

- [ThoughtWorks Technology Radar](https://www.thoughtworks.com/de/radar/techniques/micro-frontends)

- [Dynamic vs. static ui composition](https://medium.com/@heartfor.it/dynamic-vs-static-ui-composition-4325282c760d)

- [Micro-libraries: The Future of front-end development](http://blog.wolksoftware.com/microlibraries-the-future-of-web-development)

- [The monolithic frontend in the microservices architecture](https://xebia.com/blog/the-monolithic-frontend-in-the-microservices-architecture/)

- [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)

- [An approach to building Scalable Web Apps](https://medium.com/@areai51/microfrontends-an-approach-to-building-scalable-web-apps-e8678e2acdd6)

- [A Take on Micro-Frontends](https://x-team.com/blog/micro-frontend/)

- [Building Microfrontends - Series](https://medium.com/@_rchaves_/building-microfrontends-part-i-creating-small-apps-710d709b48b7)

- [Including Front-End Web Components Into Microservices](https://technologyconversations.com/2015/08/09/including-front-end-web-components-into-microservices/)

- [Microservice Grid and Micro Frontends](https://dejanglozic.com/2017/02/22/microservice-grid-and-micro-frontends/)

- [Microservice Websites](http://microservice-websites.netlify.com/)

- [Microservices to Micro-Frontends by Sandeep Jain](http://www.agilechamps.com/microservices-to-micro-frontends/)

- [Front-end microservices with Web Components](https://hackernoon.com/front-end-microservices-with-web-components-597759313393)

- [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/)

- [Building micro frontends — angular elements](https://itnext.io/building-micro-frontend-applications-with-angular-elements-34483da08bcb)

- [Micro Front-Ends: Webpack Manifest](https://medium.embengineering.com/micro-front-ends-webpack-manifest-b05fc63a0d53)

- [My experience using micro frontends by David Den Toom](https://medium.com/@daviddentoom/my-experience-using-micro-frontends-e99a1ad6ed32)

- [Page Building using Micro-Frontends and Server-Side Include](https://medium.com/js-dojo/page-building-using-micro-frontends-c13c157958c8)

- [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)

- [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)

- [Using Micro-Frontends in WordPress with Gutenberg Blocks](https://itnext.io/using-micro-frontends-in-wordpress-with-gutenberg-blocks-882faad8cd62)

- [Taming the Frontend Monolith](https://blog.logrocket.com/taming-the-front-end-monolith-dbaede402c39/)

- [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)

- [Breaking down the last Monolith - Micro Frontends](https://dev.to/aregee/breaking-down-the-last-monolith-micro-frontends-hd4)



#### Videos



- [Micro Frontend - Web Rebels, Oslo 2018](https://www.youtube.com/watch?v=dTW7eJsIHDg)

- [Break Up With Your Frontend Monolith - JS Kongress 2017](https://www.youtube.com/watch?v=W3_8sxUurzA)

- [Youtube Playlist - Micro Frontend Talks](https://www.youtube.com/playlist?list=PLI1AtZo9B3YL_xpi19IuxFcTuCi2_thQT)

- [Micro­service Websites by Gustaf Nilsson Kotte](https://vimeo.com/242458365)

- [Breaking The Monolith](https://vimeo.com/97666093)

- [Microservice UI Composition](https://www.oio.de/m/konf/wjax2016/Microservice-UI_WJAX2016.pdf)

- [Introduction to Piral](https://www.youtube.com/watch?v=SkKvpBHy_5I)



#### Slides



- [Micro Frontends - JSUnconf.eu 2017](https://speakerdeck.com/naltatis/micro-frontends-building-a-modern-webapp-with-multiple-teams)

- [Micro Frontend - Web Rebels, Oslo 2018](https://noti.st/naltatis/HxcUfZ/micro-frontends-think-smaller-avoid-the-monolith-love-the-backend)

- [Migrating from Monolith to Microfrontends](http://slides.com/yaprakayazoglu/monolith-to-microfrontend)

- [Microservice Websites (microXchg 2017)](https://www.slideshare.net/GustafKotte/microservice-websites-microxchg-2017)

- [Microservice Websites Presentation](https://www.slideshare.net/GustafKotte/microservice-websites-redev-2017-81811987)

- [Avoid the Monolith by Michael Geers](https://noti.st/naltatis/HxcUfZ/slides)

- [Micro Frontends by Michael Geers](https://speakerdeck.com/naltatis/micro-frontends-yglf-tel-aviv)

- [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)

- [Micro Frontends by Assaf Gannon](https://de.slideshare.net/AssafGannon/micro-frontends)

- [Micro Frontends by Srikanth Jallapuram](https://de.slideshare.net/SrikanthJallapuram/micro-frontends-78813796)

- [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)

- [Introduction to micro frontends by Kuba Holak](https://slides.com/kubaholak/introduction-to-micro-frontends)

- [Microfrontends architecture by Lucca Mezzalira](https://docs.google.com/presentation/d/1-SGjpuL6TibMlnawW42nFA9rDXclLrC_vQrn2cBJMo8/edit#slide=id.g35f391192_00)

- [Lets talk about Micro Frontends](https://microfrontend.deckset.net/)

- [Micro Frontends - a strive for fully verticalized systems](https://speakerdeck.com/duffleit/micro-frontends-a-strive-for-fully-verticalized-systems)

- [Building micro-frontends by Luca Mezzalira](https://docs.google.com/presentation/d/1DgK2mjJ9IYbCmjgzJH5ru5YLv88zKpcCxKrMozqnT3A/edit#slide=id.g42f50ce565_0_651)



#### Experience Reports



- [Upwork: Modernizing Upwork with Micro Frontends](https://www.upwork.com/blog/2017/05/modernizing-upwork-micro-frontends/)

- [allegro: Managing Frontend in the Microservices Architecture](https://allegro.tech/2016/03/Managing-Frontend-in-the-microservices-architecture.html)

- [Hello Fresh: Front-end Microservices](https://engineering.hellofresh.com/front-end-microservices-at-hellofresh-23978a611b87)

- [OpenTable: Microservices in the Frontend World](http://tech.opentable.co.uk/blog/2016/04/27/opencomponents-microservices-in-the-front-end-world/)

- [OpenTable: Dismantling the monolith](http://tech.opentable.co.uk/blog/2015/02/09/dismantling-the-monolith-microsites-at-opentable/)

- [5 years of OpenComponents](https://medium.com/@matteofigus/5-years-of-opencomponents-3114e6d6a35b)

- [AutoScout24: UI Composition](https://medium.com/scout24-engineering)

- [Klarna Checkout](https://news.ycombinator.com/item?id=13012916)

- [Spotify: Technology Stack](https://www.quora.com/What-is-the-technology-stack-behind-the-Spotify-web-client/answer/Andreas-Blixt)

- [Let's build a Webshop out of Micro Frontends](https://blog.senacor.com/microfrontends/)

- [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)

- [Micro Frontends with Gustaf Nilsson Kotte](https://www.case-podcast.org/22-micro-frontends-with-gustaf-nilsson-kotte)

- [Experiences Using Micro Frontends at IKEA](https://www.infoq.com/news/2018/08/experiences-micro-frontends/)

- [Microservice Websites: Building consumer-facing websites with multiple teams](https://gustafnk.github.io/microservice-websites)



#### Related



- [Angular_MicroApps_Different_Technologies](https://github.com/manfredsteyer/Angular_MicroApps_Different_Technologies)

- [A tiny, fast, zero-dependency event emitter](https://github.com/chrisdavies/eev)

- [Exercises for course "Integrating microservices on the frontend"](https://github.com/0xR/micro-frontend)

- [Extending the microservice paradigms to web development](https://github.com/neuland/micro-frontends)

- [Micromono](https://github.com/lsm/micromono)

- [Microservices in the frontend with BFFs providing their own bundles and API.](https://github.com/dactylographsy/browser-dactylographsy)

- [Proxy middleware for express that enables composition of microservices.](https://github.com/tes/compoxure)

- [Service Oriented Front-end](https://github.com/CanopyTax/sofe)

- [Simulate a micro frontend project using NodeJS, React and NGinx Reverse Proxy in Alpine Docker images](https://github.com/willmendesneto/micro-frontend-pages)



#### Platforms



- [Mashroom Server](https://www.mashroom-server.com/)

- [Piral](https://piral.io/)



#### Awesome Micro Frontends



- [Rajasegar - awesome-micro-frontends](https://github.com/rajasegar/awesome-micro-frontends)

- [ChristianUlbrich - awesome-microfrontends](https://github.com/ChristianUlbrich/awesome-microfrontends)



## 贡献



欢迎您的贡献 🌺



### 指南



1. 请您确保在正确的目录下补充资源项。

2. 总是在列表项的末尾添加新的资源项，新增的规则请您保持与当前目录资源项格式一致。

3. 如果您觉得某些项目归属到错误的目录下或认为需要添加新的目录，请您自由编辑。



**[⬆ 返回顶部](#框架)**