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

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


前言

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

背景

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

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

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

实现方式

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

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

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

微信图片_20211103142447.jpg

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

其中

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

1. 无侵入的应用接入

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

2. ui快照

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

3. 事件机制

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

后话

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

相关文章
|
14天前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
31 1
|
2天前
|
存储 前端开发 JavaScript
前端技术深度探索:从基础到现代框架的实践之旅
前端技术深度探索:从基础到现代框架的实践之旅
13 2
|
14天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
30 4
|
14天前
|
前端开发 定位技术 API
二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom
文章介绍了如何在前端使用高德地图API渲染标记(Marker),并引入自定义图标,同时展示了如何手动设置地图的缩放级别。
28 1
|
21天前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
2天前
|
前端开发 JavaScript 编译器
前端技术探索:从基础到现代框架的跃迁
前端技术探索:从基础到现代框架的跃迁
5 0
|
1月前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
120 3
|
2月前
|
API Java 数据库连接
从平凡到卓越:Hibernate Criteria API 让你的数据库查询瞬间高大上,彻底告别复杂SQL!
【8月更文挑战第31天】构建复杂查询是数据库应用开发中的常见需求。Hibernate 的 Criteria API 以其强大和灵活的特点,允许开发者以面向对象的方式构建查询逻辑,同时具备 SQL 的表达力。本文将介绍 Criteria API 的基本用法并通过示例展示其实际应用。此 API 通过 API 构建查询条件而非直接编写查询语句,提高了代码的可读性和安全性。无论是简单的条件过滤还是复杂的分页和连接查询,Criteria API 均能胜任,有助于提升开发效率和应用的健壮性。
71 0
|
2月前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
24 0
|
2月前
|
前端开发 开发者 Apache
揭秘Apache Wicket项目结构:如何打造Web应用的钢铁长城,告别混乱代码!
【8月更文挑战第31天】Apache Wicket凭借其组件化设计深受Java Web开发者青睐。本文详细解析了Wicket项目结构,帮助你构建可维护的大型Web应用。通过示例展示了如何使用Maven管理依赖,并组织页面、组件及业务逻辑,确保代码清晰易懂。Wicket提供的页面继承、组件重用等功能进一步增强了项目的可维护性和扩展性。掌握这些技巧,能够显著提升开发效率,构建更稳定的Web应用。
81 0