0%

微服务客户端

简介

微服务的客户端层与三层架构的展示层一样, 为用户提供一个应用界面, 客户端的开发完全独立于后端功能的开发, 仅依赖相关的契约 API, 客户端可以有很多, 例如移动设备, 网站, 或者针对不同角色开发的, 每种客户端都可以有各自的选型

单体客户端

每个客户端都是一个单独的项目, 相对于后端被独立部署的服务, 现在的前端已经是一个单体应用, 当前需要什么功能就加入什么功能, 各个前端也都是自己开发

flowchart TD
  subgraph ga[单体前端]
    a([订单管理])
    b([账号管理])
    c([费用管理])
    d([个人中心])
    e([...])
  end
  ga --> f[API 网关]
  subgraph gb[微服务后端]
    g{{服务 A}}
    h{{服务 B}}
    i{{服务 C}}
    j{{服务 D}}
    k{{...}}
  end
  f --> gb

微前端

单体前端一样会面临和大规模后端一样的协助和冲突问题

在 Web 应用中出现的一个新的趋势是微前端, 以独立打包和部署的组件来提供 UI 的各个部分的功能, 然后访问的时候组合起来, 这样每个前端组件考虑的就只有对应后端服务的状态, 可以随着后端服务的更新而进行更新和交付

虽然方法很理想, 但是现实中会有各种各样的问题, 各种组件加载的公共 JavaScript 代码可能是多个源头的, 这样需要打包一整个大而全的 Bundle 并交由公共的 CDN 管理, 将所有组件全部指向该地址, 这是一个复杂而且困难的工作

现实环境中, 客户端还是需要尽量快速加载来使用户体验更优的, 这样一个包含所有组件样式和公共库会影响到用户体验, 当然每个组件的 UI 交互, 设计准则也需要花很多精力来进行统一

一种比较方便实践的微前端是通过域名路径来区分的, 通过 /home, /orders 来指向每一个微前端

目前已有的微前端技术方案

  • Web 组件通过清晰的, 事件驱动的 API 来提供 UI 片段
  • 使用客户端包含 (client-side include) 技术来集成片段
  • 使用 iframe 来将微 app 放置到不同的屏幕区域
  • 在缓存层使用 ESI (edge side inclue) 来集成组件

可以参考 Micro Frontends, Zalando, Mosaic 等项目