歡迎小夥伴們推薦微前端優秀的學習資源 —— awesome-micro-frontends
微前端是一種類似於微服務的架構,它將微服務的理念應用於瀏覽器端,即將 Web 應用由單一的單體應用轉變為多個小型前端應用聚合為一的應用。各個前端應用還可以獨立執行、獨立開發、獨立部署。
框架
中文資源
- 黃峰達 - 為什麼微前端開始在流行:後端解耦,前端聚合
- 黃峰達 - 微前端的那些事兒
- 李熠 - 微前端說明書
- 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
React
Vue
示例
書籍
英文資源
下列英文資源主要來源於 Rajasegar - awesome-micro-frontends 專案,感謝 Rajasegar Chandran 的無私分享。
Concepts
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
- Microservice 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