微前端的架构设计
@ 姜波 | 星期四,十一月 12 日,2020 年 | 3 分钟阅读 | 更新于 星期四,十一月 12 日,2020 年

构建基础设施

在单体应用里,共享层往往只有一个,而在微前端架构里,共享层则往往存在多个,有的是应用间共用的共享层,有的是应用内共用的共享层。在微前端设计初期,构建基础设施要做如下几件事情:

  • 组件与模式库。在应用之间提供通用的UI组件、共享的业务组件,以及相应的通用函数功能模块,如日期转换等
  • 应用通信机制。设计应用间的通信机制,并提供相应的底层库支持
  • 数据共享机制。对于通用的数据,采取一定的策略来缓存数据,而不是每个应用单独获取自己的数据
  • 专用的构建系统(可选)。在某些微前端实现里,如微件化,构建系统用于构建出每个单独的应用,又可以构建出最后的整个应用

提取组件与模式库

系统中有多个应用采用同一框架的微前端架构,模式库作为微前端架构的核心基础,可以用于共享代码。

样式

  • 组件级样式,只能用于某一特定组件的样式
  • 应用级样式,在某一个前端应用中使用的样式
  • 系统级样式,可在该页面中使用的样式,往往会影响多个应用

对于组件级样式来说,有些框架可以从底层上直接支持组件模式隔离。对于组件库来说,也会创建对应的CSS前缀来保证唯一性

对于应用级样式而言,则需要制定一个统一的规范,可以根据应用名加前缀,也可以根据路由来增加相应的前缀

系统级样式,大抵只存在于基座模式设计的微前端架构里,在编写这些样式的时候,需要注意对其他应用的影响

业务组件及共享库

对于在多个应用中使用的业务组件和共享函数,我们既可以提供NPM包的方式,又可以提供git submodule的方式,引入其他应用中。前期需要频繁改动,可以将其抽取成为子模块的形式在项目中使用,当组件趋于稳定的时候,可以尝试将其作为NPM包发布

应用通信机制

同级通信

即挂载在同一个HTML Document下的应用间的通信,往往通过全局的自定义事件便可以实现。此外由于应用之间共享一个Window,所以还可以开发自己的发布-订阅模式组件

父子级通信

即采用iframe形式来加载其他应用

普通的父子级通信可以做到:

  • 通过PostMessage在父子窗口之间进行通信
  • 透过parent.window寻找到父窗口,再发出全局的自定义事件
  • 当其他应用加载时,将消息发送给父窗口,由父窗口发出自定义事件
  • 当其他应用未加载时,先将消息传递给父窗口,再由父窗口进行存储,提供一个获取通信的机制

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

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

数据管理

应用的数据管理可以分为两部分,一部分是状态,另一部分则是应用数据。状态是一种特殊的应用数据,它更加显示地展示数据

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

  • URI参数传递
  • 使用LocalStorage共享数据
  • 其他客户端存储,如IndexedDB、Web SQL等
  • 服务端存储客户端状态,可以采用JSON格式存储

专用的构建系统

  • 只有那些依赖于构建及构建工具创建出来的微前端应用,才需要设计出一个专用的构建系统,以支撑系统的开发
  • 如果我们采用了微应用化、微件化的架构方案,就需要设计自己的构建流程、构建系统,每种方式在具体实现上各有差异

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接