微前端框架哪个好?QianKun还是MicroApp
在当前云原⽣微服务、业务中台、低代码平台等IT架构下,不再是传统的烟囱式应⽤系统建设,⽽是打破企业业务部门竖井,建⽴企业级的信息化平台(数据中台、业务中台),那么对业务开发的解耦和聚合将成为关键技术,⽬前对于系统后端已有成熟的微服务架构,基于SpringBoot开发微服务,通过SpringCloud或istio进⾏微服务治理。前端也同样有类似的需求,如何⽀持不同的前端团队开发各⾃业务的UI页⾯,运⾏时通过统⼀的框架集成整合起来,这就是微前端框架出现的主要诉求。
⼀、什么是微前端
2016年底,“Micro frontend”⼀词⾸次出现在ThoughtWorks Technology Radar上。它将微服务的概念扩展到前端世界。当前的趋势是构建⼀个功能丰富、功能强⼤的浏览器应⽤程序,也就是单页应⽤程序,它位于微服务架构之上。随着时间的推移,前端层(通常由⼀个独⽴的团队开发)不断增长,并且越来越难以维护。这就是我们所说的前端巨⽯()。
Micro frontend背后的理念是将⽹站或⽹页应⽤视为独⽴团队所拥有的功能的组合。每个团队都有⾃⼰关⼼和擅长的独特业务或任务领域。团队是跨功能的,开发从数据库到⽤户界⾯的端到端特性。
微前端是⼀种类似于微服务的架构,它将微服务的理念应⽤于浏览器端,即将 Web 应⽤由单⼀的单体应⽤转变为多个⼩型前端应⽤聚合为⼀的应⽤。各个前端应⽤还可以独⽴运⾏、独⽴开发、独⽴部署。
⼆、微前端有什么优势
1、复杂度可控: 每⼀个UI业务模块由独⽴的前端团队开发,避免代码巨⽆霸,保持开发时的⾼速编译,保持较低的复杂度,便于维护与开发效率。
2、独⽴部署: 每⼀个模块可单独部署,颗粒度可⼩到单个组件的UI独⽴部署,不对其他模块有任何影响。
3、技术选型灵活: 也是最具吸引⼒的,在同⼀项⽬下可以使⽤如今市⾯上所有前端技术栈vue react angular, 也包括未来的前端技术栈。
4、容错: 单个模块发⽣错误,不影响全局,就跟后端微服务⼀样。
5、扩展: 每⼀个服务可以独⽴横向扩展以满⾜业务伸缩性,解决资源的不必要消耗;
前端ui框架是什么意思三、微前端框架选型
我们团队在选型微前端框架时,调研了市⾯上实现微前端的框架,可供选择的有iframe、sigle-spa、qiankun和microApp。single-spa太过于基础,对原有项⽬的改造过多,成本太⾼; iframe在所有微前端⽅案中是最稳定的、上⼿难度最低的,但它有⼀些⽆法解决的问题,例如性能低、通信复杂、双滚
动条、弹窗⽆法全局覆盖,它的成长性不⾼,只适合简单的页⾯渲染。剩下的只有qiankun和microApp了。
1、京东MicroApp
MicroApp是⼀款基于类WebComponent进⾏渲染的微前端框架,不同于⽬前流⾏的开源框架,它从组
件化的思维实现微前端,旨在降低上⼿难度、提升⼯作效率。它是⽬前市⾯上接⼊微前端成本最低的框架,并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等⼀系列完善的功能。MicroApp与技术栈⽆关,也不和业务绑定,可以⽤于任何前端框架和业务。
MicroApp 的核⼼功能在CustomElement基础上进⾏构建,CustomElement⽤于创建⾃定义标签,并提供了元素的渲染、卸载、属性修改等钩⼦函数,我们通过钩⼦函数获知微应⽤的渲染时机,并将⾃
定义标签作为容器,微应⽤的所有元素和样式作⽤域都⽆法逃离容器边界,从⽽形成⼀个封闭的环境。
2、阿⾥乾坤qiankun
qiankun 是⼀个基于  的实现库,旨在帮助⼤家能更简单、⽆痛的构建⼀个⽣产可⽤微前端架构系统。qiankun 孵化⾃蚂蚁⾦融科技基于微前端架构的云产品统⼀接⼊平台,在经过⼀批线上应⽤的充分检验及打磨后,我们将其微前端内核抽取出来并开源,希望能同时帮助社区有类似需求的系统更⽅便的构建⾃⼰的微前端系统,同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。⽬前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应⽤,在易⽤性及完备性上,绝对是值得信赖的。
参考:

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。