【前端架构】微前端架构设计

4,286 阅读3分钟

一、微前端

  1. 微前端架构

    • 应用自治

    • 单一职责

    • 技术栈无关

  2. 为什么需要微前端

    • 遗留系统迁移

    • 后端解耦,前端聚合

    • 热闹驱动开发

二、微前端的技术拆分方式

  1. 路由分发式:通过HTTP服务器的反向代理功能,将请求路由映射到对应的应用上

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

  3. 微应用:通过软件工程的方式,在部署构建环境中,把多个独立的应用组合成一个单体应用

  4. 微件化:开发一个新的构建系统,将部分业务功能构建成一个独立的chunk代码,使用时只需要远程加载即可

  5. 前端容器化:将iframe作为容器来容纳其它前端应用

  6. 应用组件化:借助于Web Components技术,来构建跨框架的前端应用

三、微前端的业务划分方式

  1. 按照业务拆分

  2. 按照权限拆分

  3. 按照变更的频率拆分

  4. 按照组织结构拆分

  5. 跟随后端微服务拆分

  6. 按照领域拆分

四、微前端的架构设计

  1. 组件与模式库

    • 样式

      • 组件级样式

      • 应用级样式

      • 系统级样式

    • 业务组件及共享库

  2. 应用通信机制

    • 同级通信

      • 通过全局的自定义事件

      • 通过共享Window

    • 父子级通信

      • 通过PostMessage在父子窗口之间进行通信

      • 通过parent.window寻找到父窗口,再发出全局的自定义事件

      • 当其他应用加载时,将消息发送给父窗口,由父窗口发出自定义事件

      • 当其他应用未加载时,先将消息传递给父窗口,再由父窗口进行存储,提供一个获取通信的机制

  3. 数据共享机制

    • URI参数传递

    • 使用LocalStorage共享数据

    • 其他客户端存储,如IndexedDB、Web SQL等

    • 服务端存储客户端状态,可以采用JSON格式存储

  4. 专用的构建系统

五、微前端的架构模式

  1. 基座模式:通过一个主应用来管理其他应用,设计难度小,方便实践,但是通用度低

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

六、微前端的设计理念

  1. 中心化:应用注册表

  2. 标志化应用

  3. 生命周期

    • 加载应用

    • 运行应用

    • 卸载应用

  4. 高内聚,低耦合

七、“微”害架构

  1. 微架构

    • 后端拆分

    • App拆分

    • 前端拆分

  2. 架构的演进

    • 快速实现想法

    • 添加越来越多的功能,应用变得臃肿

    • 添加新功能的难度越来越大,引出微服务架构

  3. 微架构带来的问题

    • 后端:微服务到应用

      • 代码架构

      • 部署流程

    • 客户端

      • 插件化

      • 组件化

  4. 解决方式:可拆分式微架构


推荐阅读

  1. 上篇:【前端架构】前后端分离架构设计

  2. 下篇:【前端架构】微前端实战

参考资料

  1. 《前端架构:从入门到微前端》

微信公众号“前端那些事儿”