【前端架构】微前端架构设计
一、微前端
-
微前端架构
-
应用自治
-
单一职责
-
技术栈无关
-
-
为什么需要微前端
-
遗留系统迁移
-
后端解耦,前端聚合
-
热闹驱动开发
-
二、微前端的技术拆分方式
-
路由分发式:通过HTTP服务器的反向代理功能,将请求路由映射到对应的应用上
-
前端微服务化:在不同的框架之上设计通信和加载机制,以在一个页面内加载对应的应用
-
微应用:通过软件工程的方式,在部署构建环境中,把多个独立的应用组合成一个单体应用
-
微件化:开发一个新的构建系统,将部分业务功能构建成一个独立的chunk代码,使用时只需要远程加载即可
-
前端容器化:将iframe作为容器来容纳其它前端应用
-
应用组件化:借助于Web Components技术,来构建跨框架的前端应用
三、微前端的业务划分方式
-
按照业务拆分
-
按照权限拆分
-
按照变更的频率拆分
-
按照组织结构拆分
-
跟随后端微服务拆分
-
按照领域拆分
四、微前端的架构设计
-
组件与模式库
-
样式
-
组件级样式
-
应用级样式
-
系统级样式
-
-
业务组件及共享库
-
-
应用通信机制
-
同级通信
-
通过全局的自定义事件
-
通过共享Window
-
-
父子级通信
-
通过PostMessage在父子窗口之间进行通信
-
通过parent.window寻找到父窗口,再发出全局的自定义事件
-
当其他应用加载时,将消息发送给父窗口,由父窗口发出自定义事件
-
当其他应用未加载时,先将消息传递给父窗口,再由父窗口进行存储,提供一个获取通信的机制
-
-
-
数据共享机制
-
URI参数传递
-
使用LocalStorage共享数据
-
其他客户端存储,如IndexedDB、Web SQL等
-
服务端存储客户端状态,可以采用JSON格式存储
-
-
专用的构建系统
五、微前端的架构模式
-
基座模式:通过一个主应用来管理其他应用,设计难度小,方便实践,但是通用度低
-
自组织模式:应用之间是平等的,不存在相互管理的模式,设计难度大,不方便实施,但是通用度高
六、微前端的设计理念
-
中心化:应用注册表
-
标志化应用
-
生命周期
-
加载应用
-
运行应用
-
卸载应用
-
-
高内聚,低耦合
七、“微”害架构
-
微架构
-
后端拆分
-
App拆分
-
前端拆分
-
-
架构的演进
-
快速实现想法
-
添加越来越多的功能,应用变得臃肿
-
添加新功能的难度越来越大,引出微服务架构
-
-
微架构带来的问题
-
后端:微服务到应用
-
代码架构
-
部署流程
-
-
客户端
-
插件化
-
组件化
-
-
-
解决方式:可拆分式微架构
推荐阅读
参考资料
-
《前端架构:从入门到微前端》