如何接地气地接入微前端?

简介: 微前端带来明显好处的同时,也面临着痛点。对于已有站点,如何在老的技术栈基础上接入一个微前端?需要哪些通

一 、前言

微前端,这个概念已经在国内不止一次的登上各大热门话题,它所解决的问题也很明显,这几个微前端所提到的痛点在我们团队所维护的项目中也是非常凸显。

但我始终认为,一个新的技术、浪潮,每每被讨论最热门的一定是他背后所代表的杰出思考。

"微前端就是...xx 框架,xx 技术"

这种话就有点把这种杰出的思路说的局限了,我只能认为他是外行人,来蹭这个词的热度。

在我所负责的项目和团队中,已经有非常大的存量技术栈和页面已经在线上运行,任何迭代升级都必须要保证小心翼翼,万无一失。

可以说,从一定程度来讲,微前端所带来的这些好处是从用户体验和技术维护方面的,对业务的价值并不能量化体现,落地这项技术秉着既要也要还要的指导方针。

我们对存量技术栈一定需要保持敬畏,隔离,影响范围可控的几个基本要素,然后再考虑落地实施微前端方案。

所以,在这个基本要素和指导方针下,要落地这项新的技术,一定要充分了解当前改造站点所存在的技术方案、占比以及当前成熟的微前端框架已提供的能力差异,切勿生搬硬套。

二 、背景

我所在团队维护的项目都是些 PC 操作后台(Workstation),这些工作台会存在不同的国家,不同时区,不同合作方等等问题。

如果需要开发一个新的页面需求,很可能投入进来的开发人员都来自不同团队,此时我们要在完成现有需求的同时还需要保证多个管理页面的风格统一,设计规范统一,组件统一,交互行为统一这非常困难。

当该业务需要迁移到另外一个工作台时,虽然需要保持逻辑一致,但导航栏、主题等却不同。

当前存量的方案都是采用 Java 直接进行 Template 渲染出 HTML,经过前面几代前辈的迭代,不同系统中已经存在几种不同技术栈产出的页面。

虽然都是 React 来实现的,但是前辈们都非常能折腾,没有一个是按照常规 React 组件形式开发出来的。

比如:

  • 大部分页面是通过一份 JSON 配置,消费组件生成的页面。
  • 部分页面是通过另外一个团队定义的 JSON 配置消费组件生成的,与上面 JSON 完全不一样。
  • 还有一部分页面,是通过一套页面发布平台提供的 JS Bundle 加载出来的。

面对这样的技术背景下,除了微笑的喊 MMP,含泪说着自己听不懂的话(存在即合理,不难要你干嘛?),还得接地气地出这样一个落地方案。

三 、方案 & 流程图

首先,需要明确的分析出站点所有页面,所需要加载的通用特性:

如何接地气地接入微前端?

 

上述是精简过后的一些通用功能特性,这里简单做下介绍:

  • Layout Loader:用于加载不同工作台的导航
  • DADA Loader:用于加载 JSON 配置的页面
  • Source Code Loader:用于加载 JS Bundle
  • Micro Loader:用于处理微前端加载
  • Log Report:用于日志埋点
  • Time Zone:用于切换时区
  • i18n:用于切换多语言
  • Guider:用于统一管控用户引导

除此以外可能还会存在以下这些页面扩展能力:

  • 安全监控
  • 流量管控
  • 弹窗管控
  • 问卷调查
  • 答疑机器人

粗略统一归类后来看,页面的大体加载流程应该是这样:

如何接地气地接入微前端?

 

四、 实现细则

基于上述一个加载思路,首先需要做的是页面加载路径收口,需要保证所有页面的加载入口是在一个统一的 Loader 下,然后才可以较为系统的处理所有页面的加载生命周期。

在收敛的同时,同样需要保持开放,对核心加载路径要保持插件化开放,随时支持不同的扩展能力,渲染技术栈接入。

1 、插件机制

所以,在主路径上,通过 Loader 加载配置进行处理,这份配置在主路径中提供上下文,然后交由插件进行消费,如图所示:

如何接地气地接入微前端?

 

举个例子,拿一个独立的 JS Bundle 类型的子应用来说:

<div id="root"></div>
<script src="https://cdn.address/schema-resolver/index.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/layout.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/source-code.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/micro-loader.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/i18n.js"></script><script>SchemaResolver.render({micro: true,host: "dev.address",hfType: "layout1",externals: ["//{HOST}/theme1/index.css"],// host is cdn prefix, the resource maybe in different env & countryresource: {js: "/index.js",css: "/index.css",},},{ container: document.querySelector("#root") });
</script>

通过上述的 Plugin 引入,即可开启和消费不同的配置。

这里引入了 Layout Plugin,该插件会消费 hfType 字段然后去加载对于的 Layout 资源提供 Container 交给下一个环节。

按照配置,当前页面开启了微前端,那么 Micro Loader 将会消费提供下来的 Container,然后建立沙箱(这里基于 qiankun),再提供 Container 出来。

最后交由 SourceCode Plugin 进行 Bundle 加载运行和渲染。如果这里是另外一种渲染协议或者技术栈,则可以根据不同配置交由不同插件消费 Container。

这个过程中,每个环节的插件是不依赖的,可插拔的。

比如:

如果不加载 Layout Plugin 将不会消费 hfType 字段,也就不会将 Layout 插件逻辑注入到getContainer方法中,那么将直接得到由最外层下穿的 Container 进行渲染,也就不会有菜单相关透出。

如果不加载 Micro Plugin 同样不会有微前端的逻辑注入,也就不会建立沙箱,那么页面渲染流程将会按照常规模式继续运行。

2 、安全迁移

对于我所在团队负责的项目来说,万万做不得一刀切的方案,所以针对现有存量页面,需要完整分析当前存量技术栈:

如何接地气地接入微前端?

 

针对上述存量页面来说,需要从左到右分批进行页面级别控制上线部署,对于左侧部分页面甚至需要做些项目改造后才可部署接入上线。

这类迁移测试需要处理出一套自动化 e2e 测试流程,通过分批迁移同时梳理出 微前端注册表 。

有了这两项流程保证及范围控制,当前方案所上线内容完全可控,剩下要处理的大部分就是较为重复的体力活了,覆盖率也可量化。

3、 微前端形态

按照上述方案迁移,那么预期的微前端形态将会是:

  • 每个开启微前端的页面都可成为主应用。
  • 微前端是插件可选项,如果因为微前端导致的业务异常可随时关闭。
  • 同为微前端的页面路由相互之间切换可实现局部刷新形态,而跳转至非微前端注册表中的页面则会直接页面跳转。随着微前端页面覆盖率提高,局部刷新的覆盖率也会逐渐提高。
  • 可通过不同扩展插件,加载不同技术栈类型的存量页面,转换为对应子应用。

如何接地气地接入微前端?

 

在 SchemaResolver 中的注册和调用路径如下:

如何接地气地接入微前端?

 

五 、总结

透过技术看本质,微前端所代表的杰出思维,才是真正解决具体问题关键所在,只有解决了具体的业务问题,这项技术才有价值转换。

不要为了微前端做微前端,不要为了小程序做小程序。

当前,通过 SchemaResolver,可以针对不同角色提供不同的开放能力:

  • 针对平台管理员,提供插件能力开放全局扩展能力。
  • 针对页面开发者,提供标准化接入方案路径,提供多种技术栈接入能力,并无感知提供微前端,多语言,埋点,菜单,主题加载等能力。解耦了不同系统公共能力,同时,这种方式可以让页面开发者快速将具体业务逻辑迁移到其他平台。
  • 针对第三方接入者,不需要关心了解系统菜单、主题接入方式,提供统一的接入口径,通过微前端隔离技术栈、隔离子应用样式。最后通过统一的页面系统管控,轻松入住对应平台,同时可以全局看到站点页面情况。

作者:开发者小助手_LS

本文为阿里云原创内容,未经允许不得转载

作者:开发者小助手_LS

原文链接

本文为阿里云原创内容,未经允许不得转载

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/514233.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

东南亚再造天猫 Lazada品牌商城LazMall举办第二届品牌未来论坛

9月1日&#xff0c;东南亚领先的旗舰电商平台Lazada在新加坡滨海湾金沙会展中心举办了2021 LazMall Brands Future Forum年度品牌未来论坛&#xff08;以下简称“BFF”&#xff09;。该论坛以“奔向未来&#xff1a;东南亚的数字商务时代”为主题&#xff0c;在庆祝Lazada品牌商…

高可用的本质

简介&#xff1a; 无论是一个域&#xff0c;一个BG&#xff0c;还是一个站点&#xff0c;虽然范围有大有小&#xff0c;对象有所不同&#xff0c;但其高可用的理念都是相通的&#xff0c;今天将自己对高可用的一点点思考以及总结的【nPRT公式】分享给大家。 我是乐羊&#xff0…

技术干货 | 深度解构 Android 应用面临紧急发版时的救星方案:mPaaS 热修复——DexPatch

简介&#xff1a; 关于 Android 热修复方案——DexPatch 的介绍与使用说明 方案介绍 为了解决 Native 模块上线后的问题&#xff0c;mPaaS 提供了热修复功能&#xff0c;实现不发布客户端 apk 场景下的热修复。目前 Android 端热修复主要包括 andfix 和 dexpatch&#xff0c;考…

李飞飞:阿里云数据库已做好全面服务政企市场的准备

“政企市场是检验云数据库产品竞争力的黄金标准。”9月3日&#xff0c;阿里云智能数据库事业部总负责人李飞飞在北京举办的媒体沟通会上表示&#xff0c;阿里云已经做好全面服务政企数据库市场的准备&#xff0c;并已成功助力多家大型组织实现核心系统对传统商业数据库的替换。…

技术改变生活 浅谈阿里云混合云的探索与实践

简介&#xff1a; 也许你并不了解“阿里云混合云”&#xff0c;甚至没有听说过“混合云”&#xff0c;然而它却在幕后“默默”改变着人们的生活。 也许你并不了解“阿里云混合云”&#xff0c;甚至没有听说过“混合云”&#xff0c;然而它却在幕后“默默”改变着人们的生活。大…

公网访问_一文读懂阿里云访问公网的实现方式

NAT网关与EIP作为公有云服务商&#xff0c;提供互联网的访问和接入是必备的条件&#xff0c;阿里云也不例外。和AWS类似&#xff0c;阿里云访问公网的组件为NAT网关和弹性IP&#xff0c;对于刚刚接触云的童鞋&#xff0c;今天这篇文章带你彻底了解这两个组件的使用场景。弹性IP…

阿里巴巴云原生应用安全防护实践与 OpenKruise 的新领域

简介&#xff1a; 得益于 Kubernetes 面向终态的理念&#xff0c;云原生架构天然具备高度自动化的能力。然而&#xff0c;面向终态的自动化是一把“双刃剑”&#xff0c;它既为应用带来了声明式的部署能力&#xff0c;同时也潜在地会将一些误操作行为被终态化放大。 因此&#…

什么是微内核架构设计?

简介&#xff1a; 作为一名Java程序员&#xff0c;相信同学们都听说过微内核架构设计&#xff0c;也有自己的理解。那么微内核是如何被提出来的&#xff1f;微内核在操作系统内核的设计中又有什么作用&#xff1f;本文从插件化(Plug-in)架构的角度来诠释微内核架构设计&#xf…

给力!斩获 GitHub 14000 Star,两周创办开源公司获数百万美元融资

上世纪 90 年代初&#xff0c;21 岁大学生 Linus Torvalds 开源 Linux 操作系统&#xff0c;自此掀起全球开源浪潮。随后“中国 Linux 第一人”宫敏博士用手提肩背的方式将 20 盒磁带背回中国&#xff0c;磁带里装着 80G 容量的自由软件&#xff0c;组建起中国第一个自由软件库…

函数计算镜像加速:从分钟到秒的跨越

简介&#xff1a; 函数计算 FC 正式发布容器镜像加速&#xff0c;通过按需读取和更高效的解压技术在不同场景下加速 50%-80%&#xff0c;即使 GB 级别的镜像也可以在几秒内完成端到端启动。 FaaS 和容器 容器镜像因其颠覆式创新成为云原生时代应用部署格式的事实标准。头部云厂…

阿里云CDN产品经理陈章炜:边缘创新技术和落地实践

简介&#xff1a; CDN除了加速外&#xff0c;不断被赋予更多价值。在阿里云CDN推出的《极速奔跑吧 2021》首场直播中&#xff0c;阿里云架构师和产品经理不仅对近期阿里云发布的CDN产品最佳实践图进行了详细解读&#xff0c;还对CDN产品和客户的场景如何更高效地匹配、形成最优…

极狐GitLab:从硅谷到中国,远程办公背后的挑战与创新

编辑 | 宋 慧 供稿 | 极狐&#xff08;GitLab&#xff09; 头图 | 付费下载于视觉中国 最近&#xff0c;海外的互联网巨头们纷纷开启了远程办公的政策&#xff0c;谷歌允许员工提出更换办公地点的要求或申请成为永久远程办公者&#xff0c;目前已经批准了近 8000 名员工在家办公…

E百科 | 基于MEC的边缘AI服务

简介&#xff1a; 阿里云边缘计算团队付哲解读5G下热门场景&#xff1a;边缘AI。作者&#xff1a;阿里云付哲&#xff0c;计算机科学与技术专业博士后&#xff0c;在流量检测、资源调度领域有深入研究&#xff0c;其论文《Astraea: Deploy AI Services at the Edge in Elegant …

网速dns怎么调快_怎么设置dns?教你快速解决网速慢的问题

体内惊人荒之力很的洪&#xff0c;设置速解速慢设置速解速慢了一但其大批企业高成中中隐藏优质长的&#xff0c;复活&#xff0c;一旦。特斯提高金拉2的第度为的产大量的资7年能投入了三季&#xff0c;教决网仅生0辆产了&#xff0c;理想并不其效果却&#xff0c;交付2辆只有实…

“凡尔赛”式晒校园生活?移动云 9.9 风暴手把手教你!

快开学了卧虎藏龙的校园当然也少不了“凡尔赛大师”看看普通版和进阶版的凡尔赛学霸学神们如何用最低调的话炫最高调的耀LETS GO!考/试/篇假/期/篇生/活/费/篇看完学霸与学神的凡尔赛较量除了羡慕他们能够凡尔赛的资本更重要的是了解到移动云校园套餐原来如&#xff01;此&…

开源微服务运行时 Dapr 发布 1.0 版本

简介&#xff1a; Dapr 是 2019 年 10 月开源的分布式运行时。早在 Dapr 开源初期&#xff0c;阿里云就开始参与 Dapr 社区建设和代码开发&#xff0c;目前已有两位 Dapr 成员&#xff0c;是 Dapr 项目中除微软之外代码贡献最多的公司。作为 Dapr 项目的早期采用者&#xff0c;…

如何应用数据模型

简介&#xff1a; 数据模型对于常规的数据查询或填写数据提交&#xff0c;是否有使用场景或者价值&#xff1f;数据模型这条路走的是否有问题&#xff1f; 一 前言 Vmo 是我在 18 年发布的一个工具库&#xff0c;用于快速创建数据模型&#xff0c;当时我写了一篇文章《Vmo 前端…

一行代码,揭开 CPU 执行原理!

作者 | 轩辕之风O来源 | 编程宇宙技术计算机如何执行你的代码&#xff1f;知乎上有人提问&#xff1a;电脑怎样执行编程语言的&#xff1f;很多刚刚入坑的小白可能对此完全没有概念&#xff0c;或者模模糊糊知道个大概&#xff0c;我们写下的一行行代码&#xff0c;计算机到底是…

有赞 Flink 实时任务资源优化探索与实践

简介&#xff1a; 目前有赞实时计算平台对于 Flink 任务资源优化探索已经走出第一步。 随着 Flink K8s 化以及实时集群迁移完成&#xff0c;有赞越来越多的 Flink 实时任务运行在 K8s 集群上&#xff0c;Flink K8s 化提升了实时集群在大促时弹性扩缩容能力&#xff0c;更好的降…

mysql怎么看端口号_mysql端口号(怎么查看mysql的端口号)

mysql端口号(怎么查看mysql的端口号)2020-05-07 21:54:58共10个回答如何查看mysql的端口号1使用命令showglobalvariableslikeport;查看端口号2修改端口,编辑/etc/my.cnf文件,早期版本有可能是my.conf文件名,增加端口参数,并且设定端口,注意该端口未被使用,保存退出.总结:注意修…