年度文章集合 | 最全微前端集合【建議收藏】

歡迎小夥伴們推薦微前端優秀的學習資源 —— awesome-micro-frontends

微前端是一種相似於微服務的架構，它將微服務的理念應用於瀏覽器端，即將 Web 應用由單一的單體應用轉變爲多個小型前端應用聚合爲一的應用。各個前端應用還能夠獨立運行、獨立開發、獨立部署。

框架

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

中文資源

• 黃峯達 - 爲何微前端開始在流行：後端解耦，前端聚合
• 黃峯達 - 微前端的那些事兒
• 李熠 - 微前端說明書
• Belllee - 微前端簡介
• 方應杭 - 微前端入門
• Vincent.W - 瞭解什麼是微前端
• 王下邀月熊 - 微前端的設計理念與實踐初探
• 雲峯yf -【譯】我不懂微前端（前端微服務）
• 雲峯yf - 【譯】採用微前端架構
• 黃峯達 - 微前端如何落地？
• 黃峯達 - 實施前端微服務化的六七種方式
• Fundebug - 如何實現前端微服務化
• Supernavy - 個推前端微服務化：突破傳統SPA瓶頸
• Trotyl Yu - 精緻化的微前端開發之旅
• 每日優鮮大前端團隊 - 每日優鮮供應鏈前端團隊微前端改造
• 美團技術團隊 - 用微前端的方式搭建類單頁應用
• 美團技術團隊 - Bifrost微前端框架及其在美團閃購中的實踐
• 前端之巔 - 網易嚴選企業級微前端解決方案與落地實踐
• 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

本人的全棧修仙之路訂閱號，會按期分享 Angular、TypeScript、Node.js/Java 、Spring 相關文章，歡迎感興趣的小夥伴訂閱哈！