526互联

微前端改造前因&可行性分析&计划

发布时间 2023-06-13 14:50:58作者: 脆皮鸡

需要解决的问题：

1.规划EMI平台的全功能架构，同时梳理EMI平台目前的功能框架，明确出来要迭代或重构哪些功能；
2.针对技术方案中的技术实现原理进行讨论，分析技术可行性和先进性、兼容性；
3.重构计划和具体实施方案，如旧系统如何转移等。

前端层面

0.改造的原因：

  1. 技术层面：EMI平台是一个集成中台，在内部使用iframe容器用于加载子应用，web应用隔离的非常完美，使用起来简单，无论是js、css、dom都完全隔离开来。但是路由状态丢失，刷新一下，iframe的url状态就丢失了；dom割裂严重，弹窗只能在iframe内部展示，无法覆盖全局；web应用之间通信非常困难；每次打开白屏时间太长，对于SPA 应用来说无法接受。
  2. 业务层面：在系统管理的设计阶段，由于考虑不充分，加之长时间的迭代开发和不良的开发习惯，导致出现了各种bug，使得问题定位和修改变得异常困难，耗费了巨大的时间和成本。同时，EMI平台是基于北江纺织的ERP系统进行定制开发的，在很大程度上只适用于该公司的特定需求。因此，为了更好地推广EMI平台，需要对其进行改造，提高其通用性和适用性，然而这个改造过程难度极大。
  3. 综上所述，需要构建一个新的更为高效、稳定和通用的平台，需要从技术和业务两个方面入手，注重架构设计、代码质量和测试等方面，以达到提高应用性能和开发效率、降低维护成本和技术风险、增强应用适用性和可扩展性等目标。

1.EMI平台的全功能架构规划及目前功能框架梳理：

  • 目前已有的功能：系统管理（用户管理、权限管理等），审批系统（针对业务的多个过程进行审批，批注），业务相关（成衣系统、新供给系统等）
  • 需要迭代/重构的功能： 基座应用、系统管理（主要是权限配置）、审批系统等
    1. 基座应用：使用新的技术/框架进行构建，解决主子应用通信、子应用保活、白屏时间长等问题。
    2. 系统管理：需要对企业内部的各类系统进行管理、配置和维护，包括服务器管理、数据库管理、数据备份等。此外，还需提供安全策略设置、日志管理、性能监控等功能来确保系统的稳定性和安全性。
    3. 审批系统：需要实现对各种审批流程的管理和控制，包括请假、报销、采购等审批流程的设计和实施，同时支持定制化的审批流程，以满足不同企业不同部门的审批需求。

2.技术方案中实现原理的讨论（可行性|先进性|兼容性）：

  • 无界微前端方案是一种基于 webcomponent 容器和 iframe 沙箱的解决方案，它能够完善地解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心需求。以下是针对该方案的成本、速度、隔离、功能等多个方面的阐述：
  • 接入成本低：无界微前端提供了基于 vue 封装的 wujie-vue 和基于 react 封装的 wujie-react，用户可以当成普通组件一样加载子应用。子应用不需要做任何改造就可以在无界框架中运行，适配成本非常低。可以将多个不同技术栈或不同团队之间的应用快速集成在一起。每个子应用可以独立开发、构建和发布，然后在基座应用中进行动态加载。
  • 速度快：无界微前端能够做到静态资源的预加载和子应用的预执行，实现了首屏打开快的目标。
  • 隔离：无界微前端提供了 css 沙箱和 js 沙箱的原生隔离，避免了子应用之间的污染问题。css 沙箱隔离实现了应用之间 css 的原生隔离，而 js 沙箱隔离则实现了应用之间 window、document、location、history 的完全解耦和隔离。
  • 功能强大：无界微前端提供了以下功能：子应用保活、子应用内嵌、多应用激活、去中心化通信、生命周期、插件系统、vite 框架支持、兼容 IE9、应用共享等。子应用保活模式能够保持状态和路由不会丢失，而子应用的多层嵌套则更加丰富和灵活。通过 EventBus 去中心化通信机制，应用之间可以方便地进行通信。此外，插件系统还可以让用户在运行时去修改子应用代码从而避免将适配代码硬编码到仓库中，而应用共享则可以有效解决包依赖重复打包、重复执行造成的性能和内存浪费问题。
  • 兼容性好：无界微前端方案可在现代浏览器中完美运行，并提供了针对IE浏览器等老旧环境的降级方案，具有优雅降级的特性。
  • 高度可定制化：无界微前端方案提供了丰富的配置项和插件机制，在灵活性和可定制化方面具有很大的优势。

3.重构计划和具体实施方案：

  • 首先完成基座应用的构建，完成登录/注册、公司主体切换、权限管理等功能。
  • 然后完成系统管理子应用的构建，用于配置权限，最后将现在有的系统接入集成中台。
  • 旧系统迁移：
    1. 根据不同系统的特点和企业实际需求，可以采取不同的策略。对于成衣系统、新供给系统等旧系统，由于定制化程度较高，迁移成本较高，如果没有必要，可以考虑直接重构或重新开发一个新的系统。
    2. 而对于新开发的蒸汽节能系统，由于适用性强且可定制，可以考虑在EMI平台中直接进行集成使用，提高EMI平台的功能水平和实用价值。
    3. 因此，综合考虑各方面因素，需要根据实际情况灵活选择不同的策略。