首页 > 其他分享 >微前端框架哪个好?QianKun还是MicroApp

微前端框架哪个好?QianKun还是MicroApp

时间:2023-08-09 11:22:59浏览次数:40  
标签:qiankun 服务 框架 前端 MicroApp QianKun 应用

在当前云原生微服务、业务中台、低代码平台等IT架构下,不再是传统的烟囱式应用系统建设,而是打破企业业务部门竖井,建立企业级的信息化平台(数据中台、业务中台),那么对业务开发的解耦和聚合将成为关键技术,目前对于系统后端已有成熟的微服务架构,基于SpringBoot开发微服务,通过SpringCloud或istio进行微服务治理。前端也同样有类似的需求,如何支持不同的前端团队开发各自业务的UI页面,运行时通过统一的框架集成整合起来,这就是微前端框架出现的主要诉求。

一、什么是微前端

2016年底,“Micro frontend”一词首次出现在ThoughtWorks Technology Radar上。它将微服务的概念扩展到前端世界。当前的趋势是构建一个功能丰富、功能强大的浏览器应用程序,也就是单页应用程序,它位于微服务架构之上。随着时间的推移,前端层(通常由一个独立的团队开发)不断增长,并且越来越难以维护。这就是我们所说的前端巨石(Frontend Monolith)。

 

Micro frontend背后的理念是将网站或网页应用视为独立团队所拥有的功能的组合。每个团队都有自己关心和擅长的独特业务或任务领域。团队是跨功能的,开发从数据库到用户界面的端到端特性。

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

 

二、微前端有什么优势

1、复杂度可控: 每一个UI业务模块由独立的前端团队开发,避免代码巨无霸,保持开发时的高速编译,保持较低的复杂度,便于维护与开发效率。

2、独立部署: 每一个模块可单独部署,颗粒度可小到单个组件的UI独立部署,不对其他模块有任何影响。

3、技术选型灵活: 也是最具吸引力的,在同一项目下可以使用如今市面上所有前端技术栈vue react angular, 也包括未来的前端技术栈。

4、容错: 单个模块发生错误,不影响全局,就跟后端微服务一样。

5、扩展: 每一个服务可以独立横向扩展以满足业务伸缩性,解决资源的不必要消耗;

 

三、微前端框架选型

我们团队在选型微前端框架时,调研了市面上实现微前端的框架,可供选择的有iframe、sigle-spa、qiankun和microApp。single-spa太过于基础,对原有项目的改造过多,成本太高; iframe在所有微前端方案中是最稳定的、上手难度最低的,但它有一些无法解决的问题,例如性能低、通信复杂、双滚动条、弹窗无法全局覆盖,它的成长性不高,只适合简单的页面渲染。剩下的只有qiankun和microApp了。

 

 

1、京东MicroApp

MicroApp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架,并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。MicroApp与技术栈无关,也不和业务绑定,可以用于任何前端框架和业务。

 

MicroApp 的核心功能在CustomElement基础上进行构建,CustomElement用于创建自定义标签,并提供了元素的渲染、卸载、属性修改等钩子函数,我们通过钩子函数获知微应用的渲染时机,并将自定义标签作为容器,微应用的所有元素和样式作用域都无法逃离容器边界,从而形成一个封闭的环境。

2、阿里乾坤qiankun

qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台,在经过一批线上应用的充分检验及打磨后,我们将其微前端内核抽取出来并开源,希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统,同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用,在易用性及完备性上,绝对是值得信赖的。

 

 

参考:

https://micro-frontends.org/

https://qiankun.umijs.org/

https://cangdu.org/micro-app/

https://www.lishuaishuai.com/architecture/1344.html

http://www.yunchengxc.com

标签:qiankun,服务,框架,前端,MicroApp,QianKun,应用
From: https://www.cnblogs.com/Im-Victor/p/17616352.html

相关文章

  • 前端原型和原型链构造函数的使用
     目录前言导语代码部分运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语前端原型和原......
  • 前端原型和原型链构造函数的使用
     目录前言导语原型的构造器指向构造函数 原型上添加方法注意的地方构造器指向构造函数本身总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌......
  • 记录--前端实用小技巧: 自动合并的网络请求
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助我们经常会遇到一个场景,比如在一个列表中批量获取用户的信息。 如果我们一次性往后端发送几十条请求是非常愚蠢的事情。此时我们就要学会如何使用批量获取的逻辑。但是批量获取有一个问题就是,我需要在用户列表......
  • 前端基础-数组方法
    数组方法备忘单:添加/删除元素:push(...items) ——向尾端添加元素,pop() ——从尾端提取一个元素,shift() ——从首端提取一个元素,unshift(...items) ——向首端添加元素,splice(pos,deleteCount,...items) ——从 pos 开始删除 deleteCount 个元素,并插入 i......
  • 前端实现文件夹的上传和下载
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传  可以带参数        [HttpPost("upload")]        publicJsonResultuploadProject(I......
  • 火山引擎DataLeap数据质量动态探查及相关前端实现
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群需求背景火山引擎DataLeap数据探查上线之前,数据验证都是通过写SQL方式进行查询的,从编写SQL,到解析运行出结果,不仅时间长,还会反复消耗计算资源,探查上线后,只需要一次探查,就可以得到整张表的......
  • web前端:main、header、footer、nav、article、section标签的用法
    HTML5添加了诸如main、header、footer、nav、article、section等大量新标签,这些新标签为开发人员提供更多的选择和辅助特性。默认情况下,浏览器呈现这些新标签的方式与div相似。然而,合理地使用它们,可以使你的标签更加的语义化。辅助技术(如:屏幕阅读器)可以通过这些标签为用户提供更......
  • 记录--前端重新部署如何通知用户
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助1.场景前端构建完上线,用户还停留还在老页面,用户不知道网页重新部署了,跳转页面的时候有时候js连接hash变了导致报错跳不过去,并且用户体验不到新功能。2.解决方案每次打包写入一个json文件,或者对比生成的script......
  • 后台是.net的话前端该用什么框架??
    如果你在后端使用.NET,以下是几个流行的前端框架可以考虑使用:1.React:-优点:React是一个由Facebook开发的JavaScript库,它专注于构建用户界面。它采用组件化的开发模式,使得构建复杂的UI变得简单且可维护。React具有高度的灵活性和可重用性,能够提供出色的性能。2.Angular:-......
  • 微前端的优势在哪里?为何能够打败单体应用架构
    微前端是一种类似于微服务的架构,是一种由独立交付的多个前端应用组成整体的架构风格,将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用,而在用户看来仍然是内聚的单个产品。有一个基座应用(主应用),来管理各个子应用的加载和卸载。所以微前端不是指具体的库,不是指具......