跳到正文

大型后台管理系统如何把业务操作做可靠(16):多个前端应用如何集成与独立交付

大型后台管理系统如何把业务操作做可靠

  1. 把业务规则写进订单和退款模型
  2. 并发编辑、草稿合并与搜索乱序
  3. 让报表说清统计口径与数据进度
  4. 退款超时后的幂等与对账
  5. 可恢复的导入导出任务
  6. 批量操作的预览、执行与恢复
  7. 多租户授权、撤权与审计
  8. 旧页面、接口和审批模板如何一起演进
  9. 沿真实操作验收可靠性与性能
  10. 设计规范和组件库如何落到日常开发
  11. 脚手架、接口契约与前后端联调
  12. 构建产物、持续交付与灰度回退
  13. 低代码表单与审批流程的执行边界
  14. 功能投放、权限与灰度人群
  15. 桌面、移动端与宿主能力适配
  16. 多个前端应用如何集成与独立交付(当前)
  17. 复杂编辑器的状态、命令与协作

订单、库存和报表由三个团队维护。工作台希望统一登录和导航,同时允许报表独立发布。即使把页面拆成三个部署单元,如果它们共享一个会频繁变化的全局状态,发布仍会互相等待。

先明确业务边界和发布需求

同一技术栈、同一交付节奏时,可以先用单应用加业务模块。每个域维护自己的路由、数据访问与权限契约,跨模块通过公开接口协作。需要历史应用隔离、独立发布或不同运行时共存时,再比较按路由跳转、iframe 和运行时加载。

方式 适用情况 需要承担的成本
同应用模块 发布节奏一致,交互紧密 单一产物,靠模块边界治理
按路由独立应用 可以按页面划分责任 统一身份、深链接、返回与导航
iframe 集成 旧应用需要独立文档和样式环境 布局、键盘、会话及跨窗口消息
运行时加载 需要在主应用中无缝组合 依赖、版本协商、隔离和卸载

独立发布与依赖共享之间存在取舍。共享同一个运行时可能降低下载量,也会要求各应用接受兼容版本。Cam Jackson 的微前端文章讨论了这些成本,Shopify 的模块化单体案例也说明了在单一部署内建立维护边界的方法。Micro Frontends · Shopify 的模块化单体复盘

给主应用和子应用一份协议

主应用维护导航、租户上下文和错误边界。子应用取得经过定义的上下文,在自己的容器内渲染,并负责清理监听、订阅与正在执行的查询。不要把不同应用之间的业务模型全部塞进一个共享对象。

mount(container, hostContext):
  requireSupportedProtocol(hostContext.protocolVersion)
  subscribeToTenantChanges()
  renderInto(container)
  return disposeSubscriptionsRequestsAndView

跨应用传递订单 ID 和业务事件语义,接收方按自己的接口读取并鉴权。iframe 通过消息交换时验证来源、目标窗口与消息结构。主应用动态加载清单时应限定可信来源和兼容版本。加载失败可显示具体子应用的故障与重试入口,工作台导航和其他模块仍可使用。

用一次报表迁移验证拆分依据

假设报表代码原本在工作台里,后来希望由独立团队交付。先把报表对主应用的依赖列出来。导航、当前租户和登录恢复可以成为主应用契约。报表筛选、计算口径和下载由报表域维护。若两个应用仍直接修改同一份全局订单状态,先处理这个共享约束,部署方式变化本身无法解除耦合。

可以先切出独立路由,在真实环境验证深链接、返回和租户切换。如果工作台仍需要在同一个页面内嵌入报表摘要,再比较共享组件、独立请求和运行时集成。采用运行时加载时要有版本清单,包含入口资源、宿主协议范围和应用版本。加载前检查版本,失败时在模块区域展示恢复入口。避免回退时动态清单引用已清理的分包。

将加载和卸载写成对称的责任

挂载前建立应用实例,实例拥有自己的容器、事件监听、定时器与请求生命周期。切换到其他模块时销毁这些资源,并使旧请求结果失效。如果挂载中途失败,已经创建的监听和订阅仍需清理。主应用切换租户时先改变可信上下文,再通知各子应用重读数据。子应用显示上一租户的数据前应检查其是否仍属于当前实例。

破坏性变化 需要验证的组合
主应用升级上下文协议 旧报表能挂载或得到明确的兼容提示
报表切换运行时 主应用导航、登录和其他子应用仍可工作
报表资源不可访问 报表显示错误与重试,订单页可继续操作
子应用多次进出 监听与订阅数量不持续增长

若 iframe 里需要通知父窗口打开订单,消息只传经过校验的动作与资源 ID,父窗口自行完成导航和授权。明确双方可接收的来源、窗口和结构。读写会话或敏感数据应通过受控契约,避免借跨窗口消息传完整令牌。

验收各团队能否真的独立发布

保留旧主应用,部署新报表,直接打开报表深链接并切换租户。让报表资源加载失败,确认订单模块仍可用。反复挂载和卸载子应用,检查全局样式、事件、订阅与内存。发布记录应能还原当时主应用和每个子应用的版本,便于单独回退和复盘。

处理一次独立回退

假设工作台宿主支持协议第 2 版,报表构建 B 使用该协议。故障后希望把报表切回 A。发布前要知道 A 支持哪些宿主版本、它的入口和分包是否还在、当前 API 是否仍接受 A 的请求。如果宿主升级已删除 A 依赖的能力,就不能只修改报表清单完成回退。

更稳妥的交付记录会写出实际验证过的组合,包括宿主版本、报表构建、协议版本和接口兼容范围。每个子应用发布后,把它和仍在线的宿主版本组装验证。若加载失败,只在子应用区域显示当前版本和可恢复入口,公共导航仍可工作。关键的订单处理和退款入口可以有独立的故障处理策略。

跨应用导航也要验收旧链接。报表点击一笔订单时只带租户上下文允许传递的资源标识,订单应用按当前会话读取。若租户刚切换,旧链接不应展示另一租户的结果。自动测试可以先打开报表,再让订单应用加载失败并恢复,最后在两个应用之间往返,检查 URL、标题、焦点和订阅清理。

总结

前端集成先解决责任与通信,再决定部署结构。能独立发布的模块,要有清楚的版本协议、卸载边界和故障隔离方式。