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这种通用的事件监听方式,降低开发者的使用同步,同时通过渲染过程的事件抛出,可供子应用使用。

后话

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

相关文章
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
78 9
|
2月前
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
|
8天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
37 3
|
1月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
32 9
|
2月前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
139 7
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
2月前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
125 2
|
2月前
|
前端开发 JavaScript 开发者
qiankun(乾坤)微前端框架简介
qiankun(乾坤)微前端框架简介
254 1
|
2月前
|
前端开发 JavaScript API
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
95 3

热门文章

最新文章