ABF平台设计(六)微前端渲染框架-YseraMicroServer

前言

YseraMicroServer 是基于qiankun的微前端平台化解决方案。他基于qiankun的沙箱能力、重新定义的通信机制和接入方式以及ui快照等能力,提供一种微前端快速接入的解决方案。本文将从业务背景、实现思路、运行机制等方面进行阐述。

背景

在业务中,我们会遇到2种情况: 第一种是要把多个平台整合成一个入口,由于前期平台能力的拆分,或则团队的不同,完整链路上的能力被拆分在不同的平台中,这对于运营来说是低效(需要切换不同的平台),而整合成一个入口,可以有效的降低平台切换的成本;第二种是要将平台在技术层面形成拆解,从而降低代码的复杂度,在新需求中也能落地较新的技术。
以上2中情况,其实都在做一件事,那就是‘看(用)起来是一个平台’。‘微前端’就是为解决这个问题。
‘qiankun’是业界比较成熟的方案,因此我们整个方案还是建立在qiankun 的基础上,并结合我们的技术业务场景,衍生出YseraMicroServer。

实现方式

业务中微前端接入的项目运行已久,每个项目的负责人也不同,那如何降低项目接入成本,减少项目代码的侵入性是我们考虑的核心目标。
在方案设计思路上:1是保证渲染框架够简单,这里的简单指的是他只做1件事那就是子应用渲染;2是主子应用的通信标准化, 降低开发者的学习成本;3是将接入方式平台化进一步降低微前端应用的研发成本。
由此 整体的微前端应用研发方案如下:
在这里插入图片描述
其中核心的渲染逻辑:通过路由匹配来进行应用的渲染,同时整个渲染过程提供事件通信机制。(如下图)
在这里插入图片描述
其中
1、如何让框架简单,通过以下3方面进行:
1、无侵入的应用接入
○ 子应用无须对接入进行改造,通过主应用对运行时的子应用进行mount、amount 管理进行子应用的渲染。
2、ui快照
○ 在子应用的渲染过程中,会出现往body上挂载dom的情况,而这些附加的dom是该子应用独有的,在切换至其他子应用事应回到初始的dom树状态,因此就有了ui快照方案;快照生成会出现在子应用的加载前,子应用卸载之后用该快照回到dom树的初始态。
3、事件机制
○ 通过addEventListner这种通用的事件监听方式,降低开发者的使用同步,同时通过渲染过程的事件抛出,可供子应用使用

后话

最后,微前端能力的建设,颠覆了传统的研发模式,拓展了业务的边界,后续我们持续关注各个业务员的接入成本、渲染性能等方面。

猜你喜欢

转载自blog.csdn.net/alienttech/article/details/120956989