Micro Frontend Architecture、BFF 和 Microservices — 用真实案例简明解释

I’m ready to translate the article for you, but I don’t see the text you’d like translated—only the source link. Could you please provide the content you want converted to Simplified Chinese? Once I have the text, I’ll keep the source line unchanged and preserve all formatting, markdown, and technical terms as requested.

1️⃣ 为什么传统的单体架构会失败

❌ 单体架构

在单体架构中：

• 前端 + 后端紧密耦合
• 单一代码库
• 单次部署

一次故障 = 整个应用宕机

[ UI ] → [ Backend ] → [ Database ]

问题

• 部署缓慢
• 难以扩展
• 一个小错误可能导致全部崩溃
• 大团队相互阻塞

👉 解决方案

将系统拆分为更小的独立部分。

2️⃣ 微服务架构（后端层）

✅ 什么是微服务？

微服务将后端拆分为 小型、独立的服务，每个服务拥有自己的数据和逻辑。

User Service     Order Service     Payment Service
     │                  │                 │
     └────── API Gateway / BFF ────────┘

示例：电商应用

• 每个服务都有自己的数据库
• 可以独立部署
• 可以独立扩展

🧠 简单示例（Node.js）

// user-service/index.js
app.get('/users/:id', (req, res) => {
  res.json({ id: 1, name: 'Kamal' })
})

3️⃣ 仍然存在哪些问题？

即使使用微服务，前端必须调用多个服务。不同的前端应用（Web、移动端）需要不同的 API，导致前端变得复杂。

Frontend → User Service
Frontend → Order Service
Frontend → Payment Service
Frontend → Notification Service

这就是 BFF 发挥作用的地方。

4️⃣ 前端专用后端（BFF）

✅ 什么是 BFF？

BFF 是一个 专为前端设计的后端层。

Web App   → Web BFF   → 微服务
Mobile App → Mobile BFF → 微服务

为什么使用 BFF？

• 简化前端
• 聚合多个 API
• 针对不同设备定制响应
• 提升性能

🧠 示例

前端需要用户信息、订单和钱包余额。与其进行三次独立调用，它可以请求一个统一的端点：

Frontend → /dashboard

BFF 在内部进行聚合：

/dashboard → 用户服务
           → 订单服务
           → 钱包服务

🧩 BFF 示例（Node.js）

app.get('/dashboard', async (req, res) => {
  const user = await getUser()
  const orders = await getOrders()
  const wallet = await getWallet()

  res.json({ user, orders, wallet })
})

5️⃣ 微前端架构（前端层）

❓ 什么是微前端？

微前端将 微服务概念应用于前端。UI 被拆分为 独立的应用，每个由不同的团队负责。

Shell App
 ├── Header (Team A)
 ├── Product App (Team B)
 ├── Cart App (Team C)
 └── Payment App (Team D)

现实类比 – 购物中心

• 每家店铺独立运营
• 商场只提供场所

6️⃣ 微前端示例

结构

/container-app
/product-app
/cart-app
/payment-app

容器应用（宿主）

// load remote micro frontend
import('productApp/ProductList')

产品应用

export default function ProductList() {
  return 

Products

}

每个应用：
- 拥有自己的代码仓库  
- 拥有自己的部署流水线  
- 可以使用 React、Vue、Angular 等。

## 7️⃣ 一切如何契合（宏观视图）

```text
Browser
   ↓
Micro Frontend Shell
   ↓
BFF (Web)
   ↓
Microservices
   ↓
Databases

职责

8️⃣ 何时使用哪种？

使用 Microservices 的情况

• 大型后端范围
• 需要独立扩展
• 多个后端团队

使用 BFF 的情况

• 多个前端（Web、Mobile 等）
• 需要大量 API 聚合
• 需要针对设备的特定响应

使用 Micro Frontends 的情况

• 大型 UI 界面
• 多个前端团队
• 需要独立的 UI 部署

9️⃣ Pros & Cons Summary

✅ Advantages

• Independent deployments
• Faster development cycles
• Better scalability
• Team autonomy

❌ Challenges

• Increased overall complexity
• Higher DevOps overhead
• Potential network latency from aggregation
• Need for robust observability

🔚 最终思考

微服务、BFF 和微前端不是流行词——它们是大规模系统的生存工具。

• 单体 → 微服务
• 当前端规模扩大时添加 BFF
• 当 UI 团队规模扩大时添加微前端