构建基础设施
在单体应用里,共享层往往只有一个,而在微前端架构里,共享层则往往存在多个,有的是应用间共用的共享层,有的是应用内共用的共享层。在微前端设计初期,构建基础设施要做如下几件事情:
- 组件与模式库。在应用之间提供通用的UI组件、共享的业务组件,以及相应的通用函数功能模块,如日期转换等
- 应用通信机制。设计应用间的通信机制,并提供相应的底层库支持
- 数据共享机制。对于通用的数据,采取一定的策略来缓存数据,而不是每个应用单独获取自己的数据
- 专用的构建系统(可选)。在某些微前端实现里,如微件化,构建系统用于构建出每个单独的应用,又可以构建出最后的整个应用
提取组件与模式库
系统中有多个应用采用同一框架的微前端架构,模式库作为微前端架构的核心基础,可以用于共享代码。
样式
- 组件级样式,只能用于某一特定组件的样式
- 应用级样式,在某一个前端应用中使用的样式
- 系统级样式,可在该页面中使用的样式,往往会影响多个应用
对于组件级样式来说,有些框架可以从底层上直接支持组件模式隔离。对于组件库来说,也会创建对应的CSS前缀来保证唯一性
对于应用级样式而言,则需要制定一个统一的规范,可以根据应用名加前缀,也可以根据路由来增加相应的前缀
系统级样式,大抵只存在于基座模式设计的微前端架构里,在编写这些样式的时候,需要注意对其他应用的影响
业务组件及共享库
对于在多个应用中使用的业务组件和共享函数,我们既可以提供NPM包的方式,又可以提供git submodule的方式,引入其他应用中。前期需要频繁改动,可以将其抽取成为子模块的形式在项目中使用,当组件趋于稳定的时候,可以尝试将其作为NPM包发布
应用通信机制
同级通信
即挂载在同一个HTML Document下的应用间的通信,往往通过全局的自定义事件便可以实现。此外由于应用之间共享一个Window,所以还可以开发自己的发布-订阅模式组件
父子级通信
即采用iframe形式来加载其他应用
普通的父子级通信可以做到:
- 通过PostMessage在父子窗口之间进行通信
- 透过parent.window寻找到父窗口,再发出全局的自定义事件
- 当其他应用加载时,将消息发送给父窗口,由父窗口发出自定义事件
- 当其他应用未加载时,先将消息传递给父窗口,再由父窗口进行存储,提供一个获取通信的机制
在实现的过程中往往会出现两种结果:
- 嵌入业务的特定通信机制
- 剥离业务的通用通信机制
数据管理
应用的数据管理可以分为两部分,一部分是状态,另一部分则是应用数据。状态是一种特殊的应用数据,它更加显示地展示数据
常见的数据交互方式,有以下几种:
- URI参数传递
- 使用LocalStorage共享数据
- 其他客户端存储,如IndexedDB、Web SQL等
- 服务端存储客户端状态,可以采用JSON格式存储
专用的构建系统
- 只有那些依赖于构建及构建工具创建出来的微前端应用,才需要设计出一个专用的构建系统,以支撑系统的开发
- 如果我们采用了微应用化、微件化的架构方案,就需要设计自己的构建流程、构建系统,每种方式在具体实现上各有差异