ABF平台设计（六）：微前端渲染框架-YseraMicroServer

点击蓝字 关注我们

前言

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

背景

在业务中，我们会遇到2种情况： 第一种是要把多个平台整合成一个入口，由于前期平台能力的拆分，或则团队的不同，完整链路上的能力被拆分在不同的平台中，这对于运营来说是低效（需要切换不同的平台），而整合成一个入口，可以有效的降低平台切换的成本；第二种是要将平台在技术层面形成拆解，从而降低代码的复杂度，在新需求中也能落地较新的技术。

以上2中情况，其实都在做一件事，那就是：“看(用)起来是一个平台”。“微前端”就是为解决这个问题。

‘qiankun’是业界比较成熟的方案，因此我们整个方案还是建立在qiankun 的基础上，并结合我们的技术业务场景，衍生出YseraMicroServer。

实现方式

业务中微前端接入的项目运行已久，每个项目的负责人也不同，那如何降低项目接入成本，减少项目代码的侵入性是我们考虑的核心目标。

在方案设计思路上：1是保证渲染框架够简单，这里的简单指的是他只做1件事那就是子应用渲染；2是主子应用的通信标准化， 降低开发者的学习成本；3是将接入方式平台化进一步降低微前端应用的研发成本。

由此 整体的微前端应用研发方案如下：

其中核心的渲染逻辑：通过路由匹配来进行应用的渲染，同时整个渲染过程提供事件通信机制。（如下图）

其中

如何让框架简单，通过以下3方面进行：

1. 无侵入的应用接入

子应用无须对接入进行改造，通过主应用对运行时的子应用进行mount、amount 管理进行子应用的渲染。

2. ui快照

在子应用的渲染过程中，会出现往body上挂载dom的情况，而这些附加的dom是该子应用独有的，在切换至其他子应用事应回到初始的dom树状态，因此就有了ui快照方案；快照生成会出现在子应用的加载前，子应用卸载之后用该快照回到dom树的初始态。

3. 事件机制

通过addEventListner这种通用的事件监听方式，降低开发者的使用同步，同时通过渲染过程的事件抛出，可供子应用使用。

后话

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

系列文章都在这里