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

一、微前端

1. 微前端架构

   1. 应用自治

   2. 单一职责

   3. 技术栈无关

2. 为什么需要微前端

   1. 遗留系统迁移

   2. 后端解耦，前端聚合

   3. 热闹驱动开发

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

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

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

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

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

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

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

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

1. 按照业务拆分

2. 按照权限拆分

3. 按照变更的频率拆分

4. 按照组织结构拆分

5. 跟随后端微服务拆分

6. 按照领域拆分

四、微前端的架构设计

1. 组件与模式库

   1. 样式

      1. 组件级样式

      2. 应用级样式

      3. 系统级样式

   2. 业务组件及共享库

2. 应用通信机制

   1. 同级通信

      1. 通过全局的自定义事件

      2. 通过共享Window

   2. 父子级通信

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

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

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

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

3. 数据共享机制

   1. URI参数传递

   2. 使用LocalStorage共享数据

   3. 其他客户端存储，如IndexedDB、Web SQL等

   4. 服务端存储客户端状态，可以采用JSON格式存储

4. 专用的构建系统

五、微前端的架构模式

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

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

六、微前端的设计理念

1. 中心化：应用注册表

2. 标志化应用

3. 生命周期

   1. 加载应用

   2. 运行应用

   3. 卸载应用

4. 高内聚，低耦合

七、“微”害架构

1. 微架构

   1. 后端拆分

   2. App拆分

   3. 前端拆分

2. 架构的演进

   1. 快速实现想法

   2. 添加越来越多的功能，应用变得臃肿

   3. 添加新功能的难度越来越大，引出微服务架构

3. 微架构带来的问题

   1. 后端：微服务到应用

      1. 代码架构

      2. 部署流程

   2. 客户端

      1. 插件化

      2. 组件化

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

---

推荐阅读

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

参考资料

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

延伸阅读

---

▶ Walkthrough007