semlinker / awesome-micro-frontends

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

Awesome Micro Frontends

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

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

框架

• Mooa
• Single-Spa
• Qiankun
• Icestark
• Ara Framework
• OpenComponents
• NUT
• PuzzleJs

中文资源

• 黄峰达 - 为什么微前端开始在流行：后端解耦，前端聚合
• 黄峰达 - 微前端的那些事儿
• 李熠 - 微前端说明书
• Belllee - 微前端简介
• 方应杭 - 微前端入门
• Vincent.W - 了解什么是微前端
• 王下邀月熊 - 微前端的设计理念与实践初探
• 云峰yf -【译】我不懂微前端（前端微服务）
• 云峰yf - 【译】采用微前端架构
• 黄峰达 - 微前端如何落地？
• 黄峰达 - 实施前端微服务化的六七种方式
• Fundebug - 如何实现前端微服务化
• Supernavy - 个推前端微服务化：突破传统SPA瓶颈
• Trotyl Yu - 精致化的微前端开发之旅
• 每日优鲜大前端团队 - 每日优鲜供应链前端团队微前端改造
• 美团技术团队 - 用微前端的方式搭建类单页应用
• 美团技术团队 - 微前端在美团外卖的实践
• 字节跳动技术团队 - 字节跳动的微前端沙盒实践
• 爱奇艺号 - 微前端架构实践
• 前端之巅 - 网易严选企业级微前端解决方案与落地实践
• Kuitos - 可能是你见过最完善的微前端解决方案
• 徐海峰 - 使用 Angular 打造微前端架构的 ToB 企业级应用
• 张亚涛 - 带你手写微前端框架
• 张亚涛 - 微内核架构在大型前端系统中的应用
• Kiliwalk - 微前端实践

系列教程

• Alili.tech - 前端微服务化解决方案1 - 思考
• Alili.tech - 前端微服务化解决方案2 - Single-SPA
• Alili.tech - 前端微服务化解决方案3 - 模块加载器
• Alili.tech - 前端微服务化解决方案4 - 消息总线
• Alili.tech - 前端微服务化解决方案5 - 路由分发
• Alili.tech - 前端微服务化解决方案6 - 构建与部署
• Alili.tech - 前端微服务化解决方案7 - 静态数据共享
• Alili.tech - 前端微服务化解决方案8 - 二次构建

第十四届 D2 微前端专场

• 语雀 - 云生态新物种 —— 微前端架构体系
• 语雀 - 标准微前端架构在蚂蚁的落地实践
• 语雀 - 微前端沙盒体系

Angular

• AngularInDepth - 构建微前端 Angular Elements

React

• Ve - 微前端(singleSpa + React )试玩
• 王下邀月熊 - 基于 React & TypeScript & Webpack 的微前端应用模板

Vue

• 王圣松 - Single-Spa + Vue Cli 微前端落地指南

示例

• Joeldenning - Vue Microfrontends
• CanopyTax - single-spa-examples

书籍

• 黄峰达 - 前端架构：从入门到微前端
• Michael Geers - Micro Frontends in Action

英文资源

下列英文资源主要来源于 Rajasegar - awesome-micro-frontends 项目，感谢 Rajasegar Chandran 的无私分享。

Concepts

• micro-frontends.org
• Micro frontends — a microservice approach to front-end web development

Posts

• Building Micro Frontends with React, Vue, and Single-spa
• 6 Patterns for Microfrontends
• Micro Frontends by Cam Jackson
• Micro frontends - a microservice approach to front-end web development
• Microservices to Micro-Frontends
• Cookie Cutter Scaling
• Microservice Websites
• What is a micro frontend
• ThoughtWorks Technology Radar
• Dynamic vs. static ui composition
• Micro-libraries: The Future of front-end development
• The monolithic frontend in the microservices architecture
• A Software Architect's Approach towards MicroFrontends
• An approach to building Scalable Web Apps
• A Take on Micro-Frontends
• Building Microfrontends - Series
• Including Front-End Web Components Into Microservices
• Microservice Grid and Micro Frontends
• Microservice Websites
• Microservices to Micro-Frontends by Sandeep Jain
• Front-end microservices with Web Components
• Supporting Micro-frontends with ASP.NET Core MVC
• Building micro frontends — angular elements
• Micro Front-Ends: Webpack Manifest
• My experience using micro frontends by David Den Toom
• Page Building using Micro-Frontends and Server-Side Include
• Strangling a Monolith to Micro-frontends with Laravel, Vue.js, and Hypernova
• Serverless Micro-frontends using Vue.js, AWS Lambda, and Hypernova
• Using Micro-Frontends in WordPress with Gutenberg Blocks
• Taming the Frontend Monolith
• Micro-frontend Architecture: Replacing a Monolith from the Inside Out
• Breaking down the last Monolith - Micro Frontends

Videos

• Micro Frontend - Web Rebels, Oslo 2018
• Break Up With Your Frontend Monolith - JS Kongress 2017
• Youtube Playlist - Micro Frontend Talks
• Micro­service Websites by Gustaf Nilsson Kotte
• Breaking The Monolith
• Microservice UI Composition
• Introduction to Piral

Slides

• Micro Frontends - JSUnconf.eu 2017
• Micro Frontend - Web Rebels, Oslo 2018
• Migrating from Monolith to Microfrontends
• Microservice Websites (microXchg 2017)
• Microservice Websites Presentation
• Avoid the Monolith by Michael Geers
• Micro Frontends by Michael Geers
• Micro Frontends - The Nitty Gritty Details or Frontend, Backend, 🌈 Happyend
• Micro Frontends by Assaf Gannon
• Micro Frontends by Srikanth Jallapuram
• Micro Frontends: Building a modern webapp with multiple teams by Michael Geers
• Introduction to micro frontends by Kuba Holak
• Microfrontends architecture by Lucca Mezzalira
• Lets talk about Micro Frontends
• Micro Frontends - a strive for fully verticalized systems
• Building micro-frontends by Luca Mezzalira

Experience Reports

• Upwork: Modernizing Upwork with Micro Frontends
• allegro: Managing Frontend in the Microservices Architecture
• Hello Fresh: Front-end Microservices
• OpenTable: Microservices in the Frontend World
• OpenTable: Dismantling the monolith
• 5 years of OpenComponents
• AutoScout24: UI Composition
• Klarna Checkout
• Spotify: Technology Stack
• Let's build a Webshop out of Micro Frontends
• Using Micro-Frontends to Permanently Solve the Legacy JavaScript Problem
• Micro Frontends with Gustaf Nilsson Kotte
• Experiences Using Micro Frontends at IKEA
• Microservice Websites: Building consumer-facing websites with multiple teams

Related

• Angular_MicroApps_Different_Technologies
• A tiny, fast, zero-dependency event emitter
• Exercises for course "Integrating microservices on the frontend"
• Extending the microservice paradigms to web development
• Micromono
• Microservices in the frontend with BFFs providing their own bundles and API.
• Proxy middleware for express that enables composition of microservices.
• Service Oriented Front-end
• Simulate a micro frontend project using NodeJS, React and NGinx Reverse Proxy in Alpine Docker images

Platforms

• Mashroom Server
• Piral

Awesome Micro Frontends

• Rajasegar - awesome-micro-frontends
• ChristianUlbrich - awesome-microfrontends

贡献

欢迎您的贡献 🌺

指南

1. 请您确保在正确的目录下补充资源项。
2. 总是在列表项的末尾添加新的资源项，新增的规则请您保持与当前目录资源项格式一致。
3. 如果您觉得某些项目归属到错误的目录下或认为需要添加新的目录，请您自由编辑。

⬆ 返回顶部