首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >你想要的【微前端】都在这里了!

你想要的【微前端】都在这里了!

作者头像
京东技术
发布于 2023-08-22 07:25:05
发布于 2023-08-22 07:25:05
67000
代码可运行
举报
文章被收录于专栏:京东技术京东技术
运行总次数:0
代码可运行

Tech 导读 如果你不知道微前端是什么,或者不知道微前端能解决什么问题,那么你可能不需要微前端。 本文认为,对于每一个没有使用过的新技术,都应该有以下几个过程: 1、调研该技术,产出相应的调研文档。 2、输出技术Demo,基本的框架结构。 3、试着在项目中使用它,这一步坑会很多。 4、把它推动到线上完成真正的技术升级。

01

调研微前端

在今年的敏捷团队建设中,我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢?由此我的Runner探索之旅开始了!

1.1 业务背景

某次遇到一个从0到1的大型项目,该项目涉及两个端,除了鉴权和部分业务逻辑不同外,页面UI和其余逻辑几乎一致,遇到这种项目,该如何架构?既能保证项目顺利开发完成,又能保证后期的迭代、维护、可扩展?

1.2 初步方案

首先,想到的技术方案有这么两种:

1、复用同一套代码,通过判断不同的权限,服务端下发标识,处理异同的业务逻辑。

2、开发两套代码,两套鉴权各走各的,页面相同部分从左边Copy到右边。

其次,回过头来想了想,这两种方案都有缺陷:

1、复用同一套代码,后期迭代的过程中,业务差异越来越大的时候,就会形成“屎山”。

2、开发两套代码,后期迭代的过程中,如果业务依然高度相似,那么每次都要把A项目中的代码Copy到B项目中;如果业务逐渐有了各自的风格,那么两套代码的方案显然是更佳的。

最后,除此之外,还有别的更好的方案吗?

1.3 什么是微前端?

微前端的概念是由 ThoughtWorks在2016年提出的,它是一种前端架构风格,将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用融合为一个完整的应用,或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一,又可以减少项目之间的耦合,提高开发效率和可维护性。微前端的核心在于解耦,通过拆分和集成来实现前端应用的可扩展性和灵活性。

图1.微前端示意图,来源于micro-app官网

02

初识微前端

理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕。

2.1 微前端能力

1、独立开发:微前端可以将一个庞大的前端应用拆分成多个小型应用,每个应用都可以独立开发,不会影响其他应用的开发进度。

2、独立部署:每个小型应用都可以独立部署,不会影响其他应用的部署进度。这也意味着可以使用不同的技术栈、不同的部署方式、不同的版本控制工具等。

3、独立运行:每个小型应用都可以独立运行,不会影响其他应用的运行状态。这也意味着可以使用不同的框架、不同的库、不同的语言等。

4、集成灵活:微前端框架可以将多个小型应用集成为一个完整的前端应用,或者将原本运行已久、没有关联的几个应用融合为一个应用。这也意味着可以根据需要动态地增加或删除应用。

5、解耦:微前端可以将前端应用拆分成多个小型应用,每个应用都有自己的职责和业务逻辑,可以减少应用之间的耦合,提高可维护性和可扩展性。

6、增量升级:微前端可以实现增量升级,只需要升级需要更新的小型应用,而不需要升级整个前端应用。这可以减少升级带来的风险和成本。

2.2 微前端核心

1、拆分:将前端应用拆分成多个小型应用,每个应用都有自己的职责和业务逻辑。这样可以减少应用之间的耦合,使得每个应用都可以独立开发、独立部署和独立运行。

2、集成:通过微前端框架将多个小型应用集成为一个完整的前端应用。这样可以根据需要动态地增加或删除应用,实现灵活的集成。

3、通信:通过定义接口和事件等方式,实现小型应用之间的通信。这样可以保证各个应用之间的协作和交互,同时又不会影响应用之间的耦合。

4、样式隔离:通过使用样式隔离技术,使得每个小型应用都可以使用自己的样式,不会影响其他应用的样式。这样可以保证各个应用之间的样式不会互相干扰,同时又不会影响应用之间的耦合。

总之,微前端的核心是解耦,通过拆分、集成、通信和样式隔离等方式,实现前端应用的解耦,提高可维护性和可扩展性。

2.3 微前端平台

1、single-spa是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。

2、qiankun 蚂蚁金服出品,基于 single-spa 封装的微前端框架。

3、MicroApp 京东出品,一款基于WebComponent的思想,轻量、高效、功能强大的微前端框架。

由于项目使用的 umi + react +ts 的技术栈,而 qiankun 天生就集成在 umi 框架中了,只需要一些配置就可以使用微前端技术,注意,这里所说的是一些配置,就是这一些配置,使本次项目使用中放弃了 qiankun 微前端框架,因为 single-spa 要求子应用修改渲染逻辑并暴露出三个方法:bootstrap、mount、unmount,分别对应初始化、渲染和卸载,这也导致子应用需要对入口文件进行修改。而 qiankun 是基于single-spa进行封装,所以这些特点也被 qiankun 继承下来,并且需要对 webpack 配置进行一些修改,成本相对较高。

再来看 micro-app 老东家出品的微前端框架,借鉴了 WebComponent 的思想,通过 CustomElement 结合自定义的 ShadowDom,将微前端封装成一个类WebComponent 组件,从而实现微前端的组件化渲染。并且由于自定义ShadowDom的隔离特性,micro-app不需要像single-spa和qiankun一样要求子应用修改渲染逻辑并暴露出方法,也不需要修改 webpack 配置,是目前市面上接入微前端成本最低的方案。

图2.micro-app微前端框架,来源于micro-app官网

03

应用微前端

理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕。

3.1 选择 mirco-app

结合上述的调研结果,决定使用 micro-app 框架来架构这个大型项目。第一,micro-app 使用简单,学习成本低,小巧的体积和更高的扩展性;第二,老东家的技术,必须全力支持。

确定最终技术方案:

1、项目涉及到两个端,准备启用两个基座,这两个基座内管理鉴权和统一调用的公共逻辑,基座独立部署,属主应用。

2、项目中相同的UI部分,独立到业务组件库,可复用,业务逻辑部分,各自在项目中处理,相互独立。

3.2 启动 mirco-app

这里有详细的使用文档,就不再赘述,从引入依赖到项目完全渲染出来,只需要四步即可, micro-app 直通车:https://zeroing.jd.com/docs.html#/zh-cn/start

值得一提的是第二步,有个小坑,入口处引入包,然后调用方法。

如果你的项目是 Vue的话,这里说的入口文件应该是 main.js;如果你的项目是 umi 框架的话,入口文件指的的是 src/pages/.umi/umi.js 文件,这个文件是 umi 自动生成的,无法让你在这里面编码,所以你需要在 src 目录下面新建一个 index 或者 global 的文件,把下面的代码复制进去。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 项目入口处引入
import microApp from '@micro-zoe/micro-app'

microApp.start()

按照文档的指引,你应该看到这个界面,如果没有看到这个界面,那说明你的姿势有问题,可能是跨域导致,关于跨越问题,Q&A里面有解决方案,用《程序员的修炼之路》中的一句话来说:“读一下那些该死的报错信息”,没准你就能启动成功了。

图3.micro-app启动完成界面

顶部导航和左侧菜单是基座,也就是主应用,右侧的内容区域,是子应用。

3.3 踩坑 micro-app

3.3.1 路由问题

项目启动起来要面对的第一个问题就是路由问题。案例里面给的菜单是一级菜单,但是实际项目应用中可能有二级、甚至三级菜单,那怎么匹配路由跳转到对应的子应用呢?

核心代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  microApp.router.push({ 
    name: 'pop',  // 子应用名称
    path: `${config.pop}${item.url}`  // config是配置文件 item是当前点击的菜单路径信息
  });

处理逻辑:

1、优先处理树形菜单,树形菜单使用递归调用,后期不管是几级菜单都不用管它了。

2、与服务端约定好树形菜单的字段,除必要字段外,应该包含对应的子应用名称,路径,icon图标等信息,这些信息是你提前给服务端,配置到表结构中的。如果项目足够大的话,可以启一个SaaS系统,更加灵活和可靠。

3、当点击菜单中对应的某个菜单时,取到当前路径拼接域名即可完成跳转。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <micro-app
   name="pop"
   url={config?.pop}
 />

3.3.2 面包屑问题

强烈建议把面包屑放到子应用中,面包屑在子应用中的好处是自由完成跳转,不用主应用做特别的处理,唯一需要处理的是面包屑里面的首页,因为面包屑放到子应用中,点击回首页时,回到的其实是子应用的首页,并非是主应用的首页。

主应用处理逻辑:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import React from 'react';
import config from '@/config';

/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event';

export default ():React.ReactElement => {
  // 子应用点击了面包屑的回到首页
  const onDispathChild = (e:any) => {
    const { isBackHome } = e.detail.data;
    if (isBackHome) window.location.href = '/';
  };

  return (
    <>
      <micro-app
        name="pop"
        url={config?.pop}
        default-page={`${config?.pop}${config.defaultUrl}`}
        onDataChange={onDispathChild}
      />
    </>
  );
};

子应用逻辑:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  // 点击回到首页的时候,需要告诉父应用,让父应用去重置路由
  const onBackHome = () => {
    window.microApp?.dispatch({ isBackHome: true });
  };

micro-app 在 window 下面挂载了一个全局的对象,只需要去触发它提供的方法,完成主子之间的通信即可,这个逻辑想明白之后,不管是交互逻辑还是数据传递逻辑,一通都通。

3.3.3 打包问题

主子应用两个项目,在进行打包的过程,做了分包的处理,micro-app 中的js沙箱隔离技术有点小缺陷,由于主子应用使用的都是 umi 的框架,打包之后会错误的把子应用的包插入主应用中,导致应用报错,加载不出来。

处理逻辑:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 不分割组件

dynamicImport: false,

由于在实际项目操作中遇到的问题可能会比以上列举的比较多,上面举的是几个比较典型的例子。

04

总结微前端

理解,首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板,当获取到模板后进行模板加载,加载阶段会将产物转换为视图树的结构,转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目

最终这个大型项目采用微前端实现了业务解耦,维护性高,扩展性高的期望,后期迭代so easy。

用起来其实还是蛮简单的,但是用好了不容易,目前正在规划把一整个业务线集成到微前端中,因为有些项目太老了,无法维护了,把这些老项目直接一个链接成子应用,新的迭代的都独立成一个单独的子应用,可以使用新框架,新技术去实现,技能提高开发效率,又能很好的扩展和迭代,于是有些人觉得微前端技术很优秀,很受用。

以下是一些拆分逻辑,希望给使用微前端技术的同学一些参考:

使用微前端拆分一个大型项目需要注意以下几点:

1、拆分粒度:应该根据业务功能、团队职责、技术栈等因素来确定拆分粒度。拆分粒度太小会增加应用之间的通信成本,拆分粒度太大会影响独立开发和部署的能力。

2、拆分边界:应该确定每个小型应用的边界,使得每个应用都有自己的职责和业务逻辑。拆分边界应该尽可能地减少应用之间的耦合,同时又保证各个应用之间的协作和交互。

3、通信方式:应该确定小型应用之间的通信方式,包括接口、事件等。通信方式应该尽可能地简单和高效,同时又能够满足各个应用之间的协作和交互需求。

4、数据管理:应该确定小型应用之间的数据管理方式,包括数据共享、数据隔离等。数据管理方式应该尽可能地简单和高效,同时又能够满足各个应用之间的数据共享和隔离需求。

5、样式隔离:应该使用样式隔离技术,使得每个小型应用都可以使用自己的样式,不会影响其他应用的样式。这样可以保证各个应用之间的样式不会互相干扰,同时又不会影响应用之间的耦合。

6、集成方式:应该确定集成方式,包括微前端框架的选择、部署方式等。集成方式应该尽可能地简单和高效,同时又能够满足各个应用之间的集成需求。

总之,使用微前端拆分一个大型项目需要注意拆分粒度、拆分边界、通信方式、数据管理、样式隔离和集成方式等方面,以实现前端应用的解耦,提高可维护性和可扩展性。

打造SAAS化服务的会员徽章体系,可以作为标准的产品化方案统一对外输出。结合现有平台的通用能力,实现会员行为全路径覆盖,并能结合企业自身业务特点,规划相应的会员精准营销活动,提升会员忠诚度和业务的持续增长。

底层能力:维护用户基础数据、行为数据建模、用户画像分析、精准营销策略的制定

▪功能支撑:会员成长体系、等级计算策略、权益体系、营销底层能力支持

▪用户活跃:会员关怀、用户触达、活跃活动、业务线交叉获客、拉新促活

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-06-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 京东技术 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
浅入深出的微前端MicroApp
导读 本文将深入浅出地探讨微前端架构模式——MicroApp,从微前端的基本概念、核心优势以及如何在现代web开发中实现它,详解微前端如何使得大型应用能够分解为小型、简单、可独立开发和部署的子应用,同时还能保持各个子应用间的完整性和协调性。此外,本文还将探讨实施微前端时可能遇到的挑战和最佳实践,为开发者提供一条清晰的实施路径,帮助其构建更加灵活和可维护的前端生态系统。
京东技术
2024/02/04
3K0
浅入深出的微前端MicroApp
[14章附电子书]从0到1落地微前端架构, MicroApp实战招聘网站
能够应对不同技术栈、不同构建工具的巨石应用架构是前端高级工程师的衡量标准之一。本文为你提供一套大型中台项目构建、多技术栈项目融合的最佳落地方案,并结合主流微前端框架MicroApp,流行技术栈Vue3、React18、Nuxt2、Vue2、Vite、Webpack最终聚合实现多个子应用的大型招聘网站,助力你成长为独当一面、具备team leader潜质的前端高级工程师。
小企鹅204415010
2024/04/22
3690
微前端架构:使用不同框架构建可扩展的大型应用
随着前端项目的不断膨胀,传统的单体应用架构逐渐暴露出越来越多的问题,比如开发周期长、维护困难等。为了解决这些问题,微前端架构应运而生,它借鉴了后端微服务的思想,将大型前端应用拆分成多个小型、可独立开发和部署的模块。这种架构模式不仅可以提高开发效率,还能更好地适应快速变化的业务需求。本文将通过实战的方式,介绍如何使用流行的微前端框架Qiankun构建一个简单的微前端应用,其中包括同时使用Vue和React作为子应用的技术栈。
井九
2024/10/12
2710
微前端架构:使用不同框架构建可扩展的大型应用
我们是怎么在项目中落地qiankun的
由于业务增长,团队拆分,我们需要将原有系统的一部分模块(Vue实现)迁移到另外一个系统(React)中。但两个系统技术栈不同,导致重构成本变大,但业务又希望在短期内看到效果,后面可以增量的重构。
GopalFeng
2022/08/01
1.6K0
我们是怎么在项目中落地qiankun的
Qiankun要被取代了!京东微前端框架C位出道
微前端是一种页面整合方案,它的核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用融合为一个完整的应用,或者将原本运行已久、没有关联的几个应用融合为一个应用。
程序员老鱼
2024/04/15
2K0
Qiankun要被取代了!京东微前端框架C位出道
微前端乾坤
qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台。
leader755
2022/03/09
1.6K0
微前端——理论
天下大势,分久必合合久必分。大型组织的组织结构、软件架构在不断的发生变化。一款软件从最初的单一,进行不断的细化,最终变得庞大,从而不得不拆分到不同部门,出现多样化。然而在多样化的道路上,用户厌倦了一家公司的软件却要分散于不同的应用中,于是应用又再一次走向聚合。
maureen
2022/09/25
2.4K0
微前端概述
Tech 导读 本文由浅到深地对微前端进行了概括性介绍,读者可以了解到微前端的概念、微前端的特点与价值、微前端的实现方案、一个微前端框架应具备的功能,以及微前端的适用场景。读者可以多关注下本文提到的各个开源的优秀的微前端实现方案,通过对比及借鉴来实现一套适合自身业务的微前端方案。 01 微前端是什么 传统的分而治之的策略已经无法应对现代 Web 应用的复杂性,因此衍生出了微前端这样一种新的架构模式,与后端微服务相同,它同样是延续了分而治之的设计模式,不过却以全新的方法来实现。微前端是一种由独立交付的多个前
京东技术
2022/03/17
1.7K0
这种微前端设计思维听说过吗?
众所周知,Web Components 是一种原生实现可服用web组件的方案,你可以理解为类似在vue、React这类框架下开发的组件。不同的是,基于这个标准下开发的组件可以直接在html下使用,不用依赖其他第三方的库。
树酱
2022/03/08
1.4K0
这种微前端设计思维听说过吗?
浅析微前端技术
微前端是一种类似于微服务的架构,是一种由独立交付的多个前端应用组成整体的架构风格,将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用,而在用户看来仍然是内聚的单个产品。
码之有理
2023/04/14
1.6K0
初探 MicroApp,一个极致简洁的微前端框架
在微前端的领域里,相信大家都听说过阿里的 qiankun。我自己在上几个月也一直用它来做一些实践:
写代码的海怪
2022/03/30
1.8K0
初探 MicroApp,一个极致简洁的微前端框架
微前端方案 qiankun 只是更完善的 single-spa
一个前端应用能够单独跑,也能被作为一个模块集成到另一个应用里,这种架构方式就叫做微前端。
神说要有光zxg
2022/11/11
1.2K0
微前端方案 qiankun 只是更完善的 single-spa
作为面试官,为什么我推荐微前端作为前端面试的亮点?
作为面试官,我经常听到很多候选人说在公司做的项目很简单,平常就是堆页面,写管理端,写H5,没有任何亮点,我以我一次面试候选人的经历分享给大家
linwu
2023/07/27
1.4K0
作为面试官,为什么我推荐微前端作为前端面试的亮点?
【微前端】1443- 将微前端做到极致-无界方案
微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题,或无法提供支持。本文提供一种基于 iframe 的全新微前端方案,完善的解决了这些核心诉求。
pingan8787
2022/11/15
5.4K1
【微前端】1443- 将微前端做到极致-无界方案
深入探讨微前端架构:挑战、解决方案与实际应用
随着前端技术的不断发展,单体应用(Monolithic Architecture)逐渐暴露出越来越多的痛点,尤其是在大型应用的开发和维护过程中。微前端(Micro Frontend)作为一种新的架构模式,正逐步成为解决这些问题的有效方案。本文将介绍微前端的概念、优势,并通过一个实际开发中的应用案例,展示如何在前端项目中实现微前端。
一键难忘
2024/12/28
7640
基于微前端的大型中台项目融合方案
关于微前端是什么,以及微前端落地方案,社区遍地都是,本篇文章不会再赘述这些基础知识。当然如果你没了解过上述知识,也可以直接读下这篇文章,足够浅显易懂。 这篇文章通过实现一个商城后台,介绍了基于 umi 框架的微前端落地方案,通过这篇文章,你可以收获
coder_koala
2020/09/08
1.5K0
基于微前端的大型中台项目融合方案
微前端在小米 CRM 系统的实践
大型组织的组织结构、软件架构在不断地发生变化。移动优先(Mobile First)、App中台(One App)、中台战略等,各种口号在不断的提出、修改和演进。同时,业务也在不断地发展,导致应用不断膨胀,进一步映射到软件架构上。
苏南
2020/12/16
1.1K0
微前端在小米 CRM 系统的实践
微前端究竟是什么?微前端核心技术揭秘!
导语 | 微前端是将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的一种手段。本文从微前端的基础理论出发,对其核心技术进行阐述,最后结合项目进行简单的应用实践。 一、微前端背景 (一)什么是微前端 微前端提供了一种技术:可以将多个独立的Web应用聚合到一起,提供统一的访问入口。一个微前端应用给用户的感观就是一个完整的应用,但是在技术角度上是由一个个独立的应用组合通过某种方式组合而成的。 为了防止概念有点抽象,可以看一个具体的例子:上图是一个微前端的demo,主应用中有导航栏,footer组件以及
腾讯云开发者
2022/02/24
2.7K0
微前端架构初探以及我的前端技术盘点
最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用。各个子应用可以独立运行、独立开发和独立部署。
徐小夕
2020/04/07
1.1K0
微前端架构初探以及我的前端技术盘点
微前端方案 qiankun 的样式隔离能不用就别用吧,比较坑
qiankun 是主流的微前端方案,其他的还有京东的 micro-app、腾讯的 wujie 等。
神说要有光zxg
2023/02/01
2.9K0
推荐阅读
相关推荐
浅入深出的微前端MicroApp
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验