• 自动秒收录
  • 软件:1973
  • 资讯:57811|
  • 收录网站:279872|

IT精英团

基于iframe的微前端框架——青田

基于iframe的微前端框架——青田

浏览次数:
评论次数:
编辑: 乐咏
信息来源: ITPUB
更新日期: 2022-09-08 21:22:29
摘要

vivo互联网前端团队-JiangZuohan一、背景VAPD是一款专为团队协作办公场景设计的项目管理工具,实践敏捷开发与持续交付,以「项目」为核心,融合需求、任务、缺陷等应用,使用敏捷迭代、小

  • 正文开始
  • 相关阅读
  • 推荐作品

Vivo互联网前端团队——蒋作汉

一.背景

VAPD是一款专为团队协作办公场景设计的项目管理工具。它实践敏捷开发和持续交付,以“项目”为核心,整合需求、任务、缺陷等应用,利用敏捷迭代和小步骤进行开发和质量跟踪,简化工作流程,帮助团队快速迭代、高效完成产品开发和交付。

但是早期的VAPD是以“什么都可以配置”的设计理念开发运营了两年,整个前端代码复杂混乱,组件庞大(需要支持多种配置),状态混乱,前端代码封装大到50M。这个项目不可持续,bug多,维护难,新功能有限。简而言之,产品不满意,测试不满意,用户不满意。

所以改版是必然的选择,而改版的要求是用户不能继续使用,网站必须是可用的,并且是逐步更新的,所以微前端是必然的选择。

VAPD修改的想法是:

使用微前端框架,未修改部分作为子应用存在继续服务用户;

对项目模块进行系统化应用,逐一修改,降低项目复杂度;

逐步抛弃旧的项目代码,将功能转移到新的项目中,提高项目的整体性能,提高代码的可维护性。

二、什么是微前端?

技术,战略和食谱建立一个modern web appmultiple teams,可以ship features independently。——微前端。

微前端是多个团队通过独立发布功能,共同构建现代web应用的技术手段和方法策略。

微前端将微服务的概念应用到浏览器中,即单个页面前端应用由单一的单一应用变为聚合多个小型前端应用的应用,每个前端应用独立开发部署。

微前端架构旨在解决单个应用在相对较长的时间跨度内,由于参与者和团队的增加和变化,从普通应用演变为巨石应用后无法维护的问题。这种问题在企业Web应用中尤其常见。

目前微前端最著名的是钱坤,阿里的钱坤。

是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。



但我尝试试用qiankun后发现qiankun 的npm包常常滞后于qiankun源码,有些issue解决了但还要等待其发版;首次加载子应用页面出现抖动;子应用更新后报 ChunkLoadError 问题 。 


同时它存在微前端框架常有的性能问题及冲突问题:


1、加载慢

基本上所有的微前端框架都需要先加载父框架,再加载子应用,都要经历如下图的流程。整个流程是串行的,相同流程需要走两遍,也就比普通的非微前端框架要慢1倍左右,直接影响了用户体验。



 2、切换慢,每次切换都要重新走一次流程

微前端框架中不同子应用切换,需要销毁当前子应用,然后加载其他子应用。子应用又需要进行“下载html --> 下载javascript文件 --> 运行javascript代码 --> 请求服务端数据 --> 页面展示"整个流程,导致微前端框架切换应用卡顿不流畅。


 3、容易出现样式冲突,不同子应用容易影响

传统微前端框架中所有子应用都在同一上下文中,如出现全局样式、全局监听、全局变量,便会对其他子应用有影响,容易出现样式冲突,内存泄漏,或者不可预知的bug。


三、Why Not Iframe


iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、JS隔离这类问题统统都能被完美解决。


那为啥不使用iframe呢?


qiankun 团队也给出了原因:看这里 Why Not Iframe。


总结起来就是:

  • url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。

  • UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框,同时我们要求这个弹框要浏览器居中显示,还要浏览器 resize 时自动居中..

  • 全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。

  • 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。


其中有的问题比较好解决(问题1),有的问题我们可以睁一只眼闭一只眼(问题4),但有的问题我们则很难解决(问题3)甚至无法解决(问题2),而这些无法解决的问题恰恰又会给产品带来非常严重的体验问题, 最终导致我们舍弃了 iframe 方案。


四、擎天框架设计


4.1 设计理论


基于以上微前端缺陷,设计新型的微前端框架需要满足以下要求:

  • —— 页面加载速度、应用切换速度是前端极致的追求,用户操作的响应速度永远是第一体验。

  • 完全隔离—— 不同子应用完全隔离,只在子应用项目初始化时设置一次,之后不需要在后续开发中及后期维护中考虑,降低开发的心智负担。


4.2 架构设计


擎天框架架构分为三层,分别是用户入口(浏览器地址栏),主应用层以及子应用集合层。


(1)浏览器(地址栏)是用户入口,用户通过输入URL进入该系统,同时浏览器地址栏URL根据应用页面进行变化,方便用户复制分享二次进入。


(2)主应用是擎天框架的关键部分,主要是由以下两部分组成:

  • 路由引擎:实现浏览器地址栏与子应用展示隐藏的协调控制,用来控制用户第一次进入展示某个应用,当用户切换页面时需同步浏览器地址栏(方便用户复制,再次进入同一页面),并根据页面URL展示隐藏子应用。

  • 数据共享引擎:实现子应用间的数据共享,保证各个应用间数据统一,如登录信息,用户信息等。用户在某个应用修改共享数据后,会同步到数据共享引擎,再分发给其他应用,从而保证共享数据一致。


(3)子应用集合层


该层为系统提前设置好的子应用集合,子应用由全屏iframe加载,同一时刻仅有一个子应用处于可视状态,其他子应用隐藏。当需要应用切换时,隐藏当前应用,显示需要展示的应用,瞬间切换。


子应用响应擎天的路由引擎及数据共享引擎,做到实时的路由同步与数据同步,保证整个微前端项目路由及数据统一。


五、擎天框架实现


擎天框架突破了 iframe UI不同步、URL不同步、数据不共享以及加载慢等问题,并将iframe作为页面容器存在,在实现硬隔离的同时做到了子应用瞬间切换,解决了微前端框架一直以来的通病,从而实现单应用级别的操作体验。


5.1全屏iframe、共同组件


解决问题:UI 不同步

全屏iframe是指整个浏览器窗口全部给子应用iframe,子应用接管浏览器所有功能,无论是全局拖动、全部蒙层、resizie等,由此UI不同步的问题便不存在了。

但不同应用有个相同的公用部分,因此需要把公共部分做成统一组件,发到npm包中,在每一个应用中引入就行。


5.2 父子应用异步加载


解决问题:加载慢

在前端静态页面中预留子应用dom节点,如下图 所示,每一个div有唯一id,代表一个预制子应用。同时该id对应子应用路由pathname,如New对应/New/*路由,即以New开头的路由全部对应id为"New"的子应用。


当用户进入页面后,父框架拿到浏览器url,并获取到pathname,从而知道需要首先加载那个子应用。并且直接创建iframe,并直接挂到对应的dom节点中,父应用和子应用异步加载。



加载完首个子应用后,开始加载其他子应用,并使用display: none将它们隐藏到页面dom结构中。最终dom节点如下图所示。



5.3 子应用iframe瞬间切换


解决问题:子应用切换卡顿

用户进行多个子应用切换时,擎天框架监听浏览器url地址,如pathname从/New/*变成/Web/*,则将/New/*对应的子应用iframe隐藏起来,将/Web/对应的子应用iframe显示出来,实现应用的瞬间切换。


用户可视范围内只能看一个应用,切换时仅仅是将New应用隐藏不可见,Web应用页面可见。




5.4 路由引擎,同步切换


解决方案:URL不同步

受vue2中数组方法(如push、shift)响应式处理的启发,擎天对前端路由框架进行特殊处理,重写了vue-router的push、replace等方法,当监听到子应用使用以上方法进行路由切换时,会同步到父框架进行操作。



父子应用简单配置后,父子路由同步便做好了。路由切换分为单应用以及多应用间路由切换。


(1)单应用路由切换

单应用子iframe路由切换,如/New/b 切换到/New/c,其pathname结构一致,是单应用的路由切换。子应用先切换路由,随后发送syncRoute给父框架,父框架使用replace方法改变浏览器地址栏即可,具体流程如下图所示。



(2)多应用间路由切换

如/New/b 切换到/Web/c,其pathname结构不一致。子应用先切换路由,随后发送syncRoute消息给父框架,父框架使用replace方法改变浏览器地址栏,同时将应用A隐藏起来,并发送消息到子应用B中。子应用B获得消息后修改其本身路由。




5.5 数据共享


解决问题:内存变量不共享

父应用将需要共享的数据放到store中,并使用syncStore进行注册。



子应用通过类vuex似的 mapGlobalState 方法可以获取父应用store中数据,同时该数据为响应式,数据变更可触发UI重新渲染。


通过mapGlobalMutations获取修改数据的方法,通过该方法可以修改父应用store数据,修改成功后擎天共享数据引擎将修改好的数据分发给各个子应用,保证共享数据一致。



其内部逻辑是:


父应用将需要共享的数据放到store中,并暴露getTopStore(获取store数据)、syncTopMutation(更新store数据)、syncTopStore(分发store数据)等接口。


系统加载时子应用通过getTopStore方法可以获取store中数据,并赋值到子应用$pstore中,从而获得数据响应式等能力。


当某个子应用需要修改共享数据时,调用syncTopMutation方法进行修改,修改成功后擎天通过syncTopStore分发给各个子应用,保证共享数据一致。



六、总结


擎天基于全屏Iframe与搭建公共组件等方式,解决了iframe UI不同步的难题,并充分发挥了iframe作为页面容器的优势,实现了父子应用异步加载、子应用瞬间切换的能力,从而达到单应用项目的体验。



END


标签:路由 数据 框架
数字人技术在直播场景中的应用
« 上一篇 2022-09-08
基于位置变化的市县弹出引导切换
下一篇 » 2022-09-08
  • 如何在Ubuntu中保留文件系统并备份当前开发板镜像
    0阅读 0条评论 个赞
    在Ubuntu保留文件系统或者说备份当前开发板镜像的需求在不断增加。比如Ubuntu文件系统需要安装库文件的话直接使用apt-get工具就可以下载,但由于需要下载的核心板较多,比较费时间,这时需要将安……
  • 国产核心板全志T507助力消防系统升级
    0阅读 0条评论 个赞
    9月16日下午,位于湖南长沙市区内的中国电信大楼发生火灾,建筑高度218米,现场浓烟滚滚,数十层楼体燃烧剧烈。消防救援人员赶到现场后很快将火势控制住,目前大楼火势已被扑灭,所幸未发现人员伤亡。湖南电信……
  • 教大家如何处理Spring Boot易流中的用户和群体!
    0阅读 0条评论 个赞
    1.准备工作2.用户操作2.1添加用户2.2修改用户2.3删除用户2.4查询用户3.组操作3.1添加组3.2修改组3.3删除组3.4查询组4.查看表详情虽然说我们在实际开发中,……
  • 从PG15开始WAL压缩优化
    0阅读 0条评论 个赞
    PG15传闻中的超级令人激动的功能大多数跳票了,年初我也写过一个关于PG15新功能跳票的文章。PG15BETA已经发出几个月了,似乎PG15里令人激动人心的功能不多,不过从长长的新功能列表里,……
  • 深入了解美团叶子发射器开源方案
    0阅读 0条评论 个赞
    大家好,我是树哥。之前我们有聊过「如何设计一个分布式ID发号器」,其中有讲过4种解决方案,分别是:UUID类雪花算法数据库自增主键Redis原子自增美团以第2、3种解决方案为基础,开发出……
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
  • 记录在线超时的分析和故障排除过程
    0阅读 0条评论 个赞
    .css-1yuhvjn{margin-top:16px;}.css-3jt6os.FileLinkCard{-webkit-align-items:center;-webkit-box-align……
  • Velox简介:一个开源的统一执行引擎
    0阅读 0条评论 个赞
    •Meta正在引入Velox,这是一个开源的统一执行引擎(unifiedexecutionengine),旨在加速数据管理系统和简化其开发。•Velox正在积极开发中,Meta在2022……
  • i.MX8MQ自制背板无PCIe问题详解
    9阅读 0条评论 个赞
    在飞凌嵌入式OKMX8MQ-C开发板上有两个PCIe接口,对应着两个PCIe差分时钟,两路PCIe分别用作了M.2接口卡槽KEYE(P37)和KEYM(P34)。很多使用FETMX8MQ-C核心板的用……
  • Java接口自动测试框架系列(1)自动测试框架
    0阅读 0条评论 个赞
    一、什么是自动化测试自动化测试是把以人为驱动的测试行为转化为机器执行的一种过程。通常,在设计了测试用例并通过评审之后,由测试人员根据测试用例一步步执行测试,得到实际结果与期望结果的比较。为了节省人力、……
  • 图解架构| SaaS、PaaS、IaaS
    0阅读 0条评论 个赞
    这是悟空的第164篇原创文章官网:www.passjava.cn你好,我是悟空哥。上次聊到了架构图如何画,其中涉及到了云服务的架构图,里面提到了很重要的三个概念PaaS、IaaS、SaaS,很有必要……
  • 适时变革 共创未来| 2022数字技能职业教育生态研讨会圆满落幕
    0阅读 0条评论 个赞
    2022年8月25日,由恒利联创主办的“适时而变,联创未来”2022数字技能职业教育生态研讨会在线上举行。本届大会围绕“数字技能职业教育和数字化人才培养”的话题,邀请了Oracle技术人才发展部总经理……
  • 订单超时案例的RabbitMQ实现
    0阅读 0条评论 个赞
    前言#人间清醒目录前言业务场景JUC(DelayQueue)方案DelayQueue简介JUCDelayQueue实现订单超时案例代码案例代码RedisKey过期事件方案简介RabbitKey……
  • SQL Server 2005分区模板和实例
    0阅读 0条评论 个赞
    一、场景这一段时间使用SQLServer2005对几个系统进行表分区,这几个系统都有一些特点,比如数据库某张表持续增长,给数据库带来了很大的压力。现在假如提供一台新的服务器,那么我们应该如何规划……
  • 能够在JAVA中自定义和扩展Swagger 自动生成参数值的含义 提高开发效率
    0阅读 0条评论 个赞
    大家好,又见面了。在JAVA做前后端分离的项目开发的时候,服务端需要提供接口文档供周边人员做接口的对接指导。越来越多的项目都在尝试使用一些基于代码自动生成接口文档的工具来替代由开发人员手动编写接口文档……
  • 详细解释MySQL隔离级别
    0阅读 0条评论 个赞
    一个事务具有ACID特性,也就是(Atomicity、Consistency、Isolation、Durability,即原子性、一致性、隔离性、持久性),本文主要讲解一下其中的Isolation,也……
  • 如何使用helm优雅地安装prometheus-operator并监控k8s集群微服务
    0阅读 0条评论 个赞
    前言:随着云原生概念盛行,对于容器、服务、节点以及集群的监控变得越来越重要。Prometheus作为Kubernetes监控的事实标准,有着强大的功能和良好的生态。但是它不支持分布式,不支持数据……
  • spring项目中启动包的原理 以及自定义启动包的使用
    0阅读 0条评论 个赞
    MAVEN项目中starter的原理一.原始方式我们最早配置spring应用的时候,必须要经历的步骤:1.pom文件中引入相关的jar包,包括spring,redis,jdbc等等2.通过prope……
  • 深入理解Redis数据结构-字典
    0阅读 0条评论 个赞
    字典,又称为符号表、关联数组或映射,是一种用于保存键值对的抽象数据结构。在字典中,一个键可以和一个值进行关联,这些关联的键和值称为键值对。键值对中键是唯一的,我们可以根据键key通过映射查找或者更新对……
  • 拓扑岭CEO雷鹏:创业不只是技术
    0阅读 0条评论 个赞
    云计算的出现,加速了企业信息技术的发展。数据库是最常用的基础软件之一,它通常能提供计算和存储的能力。虽然分布式数据库也做到了很好的扩展性,但它不能算是「云原生」。「云原生数据库」的核心,是要设计一种更……
  • 谈ASP.NET核心认证与授权
    0阅读 0条评论 个赞
    使用asp.netcore开发应用系统过程中,基本上都会涉及到用户身份的认证,及授权访问控制,因此了解认证和授权流程也相当重要,下面通过分析asp.netcore框架中的认证和授权的源码来分析……
  • Python自学教程7:字典类型有什么用
    0阅读 0条评论 个赞
    字典是Python中的一个重要操作,如果字典玩得顺,很多其他的数据类型就可以一通百通。Python字典的定义字典使用一对大括号进行定义,键值对之间使用逗号隔开,键和值使用冒号分隔。键必须是不可变类型,……
  • 计算机网络-了解-DNS和HTTPDNS
    0阅读 0条评论 个赞
    DNS和HTTPDNSDNS域名解析的过程传统DNS存在的问题1、域名缓存问题2、域名转发问题3、出口NAT问题4、DNS域名更新问题5、解析延迟问题6、运营商劫持HTTPDNSHTTP……
  • Sql Server连接池及其用法
    0阅读 0条评论 个赞
    其实我们一直在使用SqlServer的连接池。在连接字符串中,Pooling为是否启用连接池,默认值为true,表示启用。与连接池相关的两个重要参数是MinPoolSize和MaxPoo……
  • 海量小文件总结及解决策略(三)NameNode、Hadoop归档文件等
    0阅读 0条评论 个赞
    .css-1yuhvjn{margin-top:16px;}.css-3jt6os.FileLinkCard{-webkit-align-items:center;-webkit-box-align……
  • 关于Redis在windows上运行的问题和fork函数
    0阅读 0条评论 个赞
    Redis在将数据库进行持久化操作时,需要fork一个进程,但是windows并不支持fork,导致在持久化操作期间,Redis必须阻塞所有的客户端直至持久化操作完成。微软的一些工程师花费时间在解决在……
最近发布资讯
更多