浅谈微前端架构

1,063 阅读6分钟

什么是前端微服务

前端微服务化是指,在不同的框架之上设计通信、加载机制,以在一个页面内加载对应的应用

为什么要使用微前端架构:

  • 遗留系统迁移
  • 聚合前端应用
  • 热闹驱动开发

微前端的技术划分方式

单体前端应用拆分成微前端架构的几种方式:

  • 路由分发式。
    路由分发式微前端,即通过路由将不同的业务分发到不同的独立前端应用上。其通常可以通过HTTP服务器的反向代理来实现,或者通过应用框架自带的路由来解决。
  • 前端微服务化。
    前端微服务化,是微服务架构在前端的实施,每个前端应用都是完全独立(技术栈、开发、部署、构建独立)、自主运行的,最后通过模块化的方式组合出完整的前端应用。
  • 微应用(组合式集成)。
    微应用化是指,在开发时应用都是以单一、微小应用的形式存在的,而在运行时,则通过构建系统合并这些应用,并组合成一个新的应用。
    如果以微前端的单独开发、单独部署、运行时聚合的基本思想来看,微应用化就是微前端的一种实践,只是使用微应用化意味着我们只能使用唯一的一种前端框架。
  • 微件化。
    每个业务团队编写自己的业务代码,并将编译好的代码部署(上传或者放置)到指定的服务器上。在运行时,我们只需要加载相应的业务模块即可。在更新代码的时候,我们只需要更新响应模块的代码。
  • 前端容器化:iframe。
    它能有效地将另一个网页/单页面应用嵌入当前页面中,除了父子通信的部分,这两个页面的环境完全隔离,代码互相不会影响。
    采用iframe有几个重要的前提:1. 网站不需要SEO支持。2. 设计相应的应用管理机制。
  • 应用WebComponents化。
    结合WebComponents来构建前端应用,是一种面向未来演进的架构。

微前端的业务划分方式

如何从业务的角度来拆分前端应用:

  • 按照业务拆分。
  • 按照权限拆分。
  • 按照变更的频率拆分。
  • 按照组织结构拆分。
  • 跟随后端微服务进行划分。

微前端的架构设计

在基础设施上,微前端架构与单体应用架构有相当大的差异。在单体应用里,共享层往往只有一个。而在微前端架构里,共享层则往往存在多个,有的是应用间共用的共享层,有的是应用内共用的共享层。 在微前端设计初期可以从一下几个方面来构建基础设施

提取公共组件与模式库

在应用之间提供通用的UI组件、共享的业务组件,以及相应的通用函数功能模块,如日期转换等。

  • 样式
    组件级样式:scoped
    应用级样式: 根据应用名或者路由名加前缀
    系统级样式
  • 业务组件及共享库
    对于在多个应用中使用的业务组件和共享函数,我们既可以提供NPM包的方式,又可以提供gitsubmodule的方式,引入其他应用中。
应用通信机制。

设计应用间的通信机制,并提供相应的底层库支持。

  1. 同级通信,即挂载在同一个HTMLDocument下的应用间的通信。
  • 自定义事件(CustomEvent)实现
  • 开发自己的发布订阅模式组件
  1. 父子级通信,即采用iframe形式来加载其他应用。
  • 通过PostMessage在父子窗口之间进行通信。
  • 透过parent.window寻找到父窗口,再发出全局的自定义事件。
  • 当其他应用加载时,将消息发送给父窗口,由父窗口发出自定义事件。
  • 当其他应用未加载时,先将消息传递给父窗口,再由父窗口进行存储,提供一个获取通信的机制。

在实现的过程中往往会出现两种结果:

  • 嵌入业务的特定通信机制。
  • 剥离业务的通用通信机制。

后者是一个通用的通信机制,开发成本相对较高。前者则是一个业务绑定的模式,一旦添加新功能,便需要进行修改。

数据共享机制。

对于通用的数据,采取一定的策略来缓存数据,而不是每个应用单独获取自己的数据。

去中心化的管理数据

常见的数据交互方式,有以下几种:

  • URI参数传递。
  • 使用LocalStorage共享数据。
  • 其他客户端存储,如IndexedDB、WebSQL等。
  • 服务端存储客户端状态,可以采用JSON格式存储。
专用的构建系统(可选)

在某些微前端实现里,如微件化,构建系统用于构建出每个单独的应用,又可以构建出最后的整个应用。

微前端的架构模式

从应用间方式可以分为两种

1. 基座模式。

通过一个主应用来管理其他应用。设计难度小、方便实践,但是通用度低。

基座模式中的主应用,类似于APIGateway的概念,它作为系统的统一入口,负责将对应的请求指向对应的服务。作为应用的基础核心,他需要

  • 维护应用注册表
  • 管理其他子应用

这个主应用,既可以只带有单纯的基座功能,也可以带有业务功能。它所处理的业务功能指的是核心部分的业务功能,如:

  • 用户的登录、注册管理。
  • 系统的统一鉴权管理导航菜单管理。
  • 路由管理。
  • 数据管理。
  • 通信代理。
  • ...
2. 自组织模式

应用之间是平等的,不存在相互管理的模式。设计难度大,不方便实施,但是通用度高。

不管哪种方式都需要提供应用注册表。 它主要做以下一些事情:

  • 应用发现。让主应用可以寻找到其他应用。
  • 应用注册。即提供新的微前端应用,向应用注册表注册的功能。
  • 第三方应用注册。即让第三方应用接入系统中。
  • 访问权限等相关配置。

微前端的设计理念

以下几点是我们在设计以及实现为前端架构中时需要关注和考虑的要点:

1. 中心化:应用注册表。
2. 标识化应用。
3. 应用生命周期管理。

微前端应用作为一个客户端应用拥有自己的生命周期,生命周期包括如下3个部分:

  • 加载应用。
  • 运行应用。
  • 卸载应用。
4. 高内聚,低耦合。
  • 单一职责原则
  • 关注点分离原则