前端架构有哪些常见模式？微前端、低代码、BFF 是什么？

单体应用 → 组件化 → 模块化 → 微前端 → 低代码

前端 → BFF → 微服务A、微服务B、微服务C
      ↑
   数据聚合、格式转换、缓存

// BFF 示例
app.get('/dashboard', async (req, res) => {
  const [user, orders, notifications] = await Promise.all([
    userService.getUser(req.userId),
    orderService.getOrders(req.userId),
    notificationService.getNotifications(req.userId)
  ])
  res.json({ user, orders, notifications })
})

my-project/
├── packages/
│   ├── ui/          # 共享 UI 组件库
│   ├── utils/       # 共享工具函数
│   ├── types/       # 共享类型定义
│   ├── web/         # Web 应用
│   ├── mobile/      # 移动应用
│   └── admin/       # 管理后台
├── package.json
└── turbo.json       # Turborepo 配置

// 页面 Schema
{
  "type": "page",
  "children": [
    {
      "type": "form",
      "props": { "title": "用户信息" },
      "children": [
        { "type": "input", "props": { "label": "姓名", "field": "name" } },
        { "type": "select", "props": { "label": "角色", "field": "role", "options": [...] } }
      ]
    }
  ]
}

// 渲染器
function renderSchema(node) {
  const Component = componentMap[node.type]
  return (
    <Component {...node.props}>
      {node.children?.map(renderSchema)}
    </Component>
  )
}

// 设计系统
├── tokens/          # 设计变量（颜色、间距、字体）
├── primitives/      # 原子组件（Button、Input）
├── components/      # 业务组件（Form、Table）
├── templates/       # 页面模板
└── theme/           # 主题配置

// 逻辑与 UI 分离
// Headless Hooks（如 @tanstack/react-table）
const table = useTable({ columns, data })
// table.getRowModel() 等纯逻辑 API
// 你自己写 UI