乐趣区

关于前端: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 这种通用的事件监听形式,升高开发者的应用同步,同时通过渲染过程的事件抛出,可供子利用应用

后话

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

退出移动版