采用微前端来实现新老技术的兼容问题

1.什么是微前端?

微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具,而是一套架构体系。

2.微前端架构具备的核心价值

  1. 技术栈无关:主框架不限制接入应用的技术栈,微应用具备完全自主权
  2. 独立开发、独立部署:微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
  3. 增量升级:在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
  4. 独立运行时每个微应用之间状态隔离,运行时状态不共享

3.微前端由哪些模块组成?

1.当前微前端主要采用组合式应用路由分发,该方案的核心是“主从”思想,即包括一个基座应用和若干个微应用,基座应用大多数是一个前端SPA项目,主要负责注册、路由映射、消息下发等,而微应用是独立的前端项目,这些项目不限于React、Vue、Angular或者JQuery,每个微应用注册到基座应用中,由基座进行管理,但如果脱离基座也能单独访问,基本的流程图如下:
在这里插入图片描述
2.当整个微前端框架运行之后,给用户的体验就类似下图:
在这里插入图片描述
简单描述下就是基座应用中有一些菜单项,点击每个菜单项可以展示对应的微应用,这些应用的切换就是纯前端无感知的,所以基于目前的方案来说,一个微前端的基座框架需要解决以下问题:

  • 路由切换的分发问题
  • 主微应用的隔离问题
  • 通信问题

参考:
1.微前端-最容易看懂的微前端知识

2.记一次 微前端 qiankun 项目 实践 !!! 防踩坑指南

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值