微前端框架选型(微前端框架对比)

网友投稿 4180 2022-12-22

本篇文章给大家谈谈微前端框架选型,以及微前端框架对比对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 今天给各位分享微前端框架选型的知识,其中也会对微前端框架对比进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

前端常用的框架有哪些?

一、 Web前端框架之Angular 2+

Angular 2+优点解析:

Angular 2+ 的最大优势在于它的流行程度。也有人认为它和 Google 密切相关的名字,会影响团队使用它。Angular 1 的迅速流行是因为那些来自其他交互式应用程序开发环境的人会发现对于开发单页面 Web 应用程序具有相似的模型-视图模式。通过对 Angular 1 进行现代化演变和重新构建框架的某些部分,Angular 2+ 已经真正的爆发微前端框架选型了,大量的正式的和非正式培训机构数量都让人印象深刻,开发者有很强的市场竞争力。对于用户来说它有一套用于构建用户界面的丰富组件,这也是本系列中少有的几个框架能够做到这点。

缺点解析:

微前端框架选型我们觉得 Angular 框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 Web 应用这个更大的关注点,如果不及早确定下来,这将会导致整个项目难以维护,在实际项目中,运行时提供不属于核心框架的技术往往让人觉得不可思议,这大大降低了 TypeScript 对最终开发者的价值。

发展方向:

Angular 5 刚刚发布,这看来是 Angular 已经成功的印证了快速发布版本的承诺,在 Google 的持续支持下,Angular 会越来越成熟。

像许多的大型组织一样,Google 具有多重(分裂)的人格,从外表上看,Angular 团队和那些专注于浏览器标准的团队之间显得很和谐。但我们的观点是,和谐只是一层薄薄的窗户纸。Angular 团队对于 Web 组件和渐进式 Web 应用没有一个真正解决方案。我们认为,业界普遍认可的标准将会在 Angular 框架中会逐步实现,这将会影响到如何更好的构建 Angular 应用将成为一个中/长期的风险。

使用环境:

如果微前端框架选型你需要在一个大型的框架内获取技术资源,框架内的技术通常很容易移植;或者你需要在框架中训练开发人员,并且还要有一定的信心,他们会在短期内获得一定的开发能力,这样的话你可以考虑 Angular 2+ 。需要注意的是 Angular1(angular.js)与 Angular2+ 是截然不同的,其中的应用、技术和经验不能直接移植到 Angular2+ 的开发中去。

如果你的 Web 应用能够很好的转化为标准的模型-视图模式,那么你也可以忽略其他直接考虑使用 Angular2+ 。

如果你对 Google Material UX 设计模式满意,那么 Material Angular 是遵循该模式的一种快速、简单且可靠的方式。

二、Web前端框架之React + Redux

React + Redux优势解析:

React 和 Redux 的最大优势在于它们相对简单和专注。做一件事情并把它做好是非常困难的,但这两个库都很有效地完成了它们的目标。虽然对于某些状态容器方法可能是外部的,但大多数开发人员还是可以轻松掌握概念,并了解单向数据体系结构的好处,简化大量的用户界面应用程序。

缺点解析:

React 和 Redux 最大的弱点不是它们是什么,而是它们不是什么。要构建一个功能丰富的 Web 应用程序,你需要许多功能,一旦脱离 React 和 Redux 和其他一些库的核心,你将发现一个非常分散的社区,拥有无数的解决方案和模式,不容易整合在一起。

因此,虽然 React 和 Redux 都是非常专注的库,但缺乏经验的团队还是会很容易地生成不可维护的解决方案,而不是意识到他们所做的选择会导致性能不佳或错误。即使有经验的开发人员也可能意识到,一个松散的架构或惯例可能会在未来困扰他们。

假省钱是一种对自己的欺骗,组织范围内采用 React 和 Redux 将轻松降低无效率问题。没有其他库和模式的广泛约定和标准化,标准化 React + Redux 比较于我们正在采用的 JavaScript 来编写我们的应用程序效率要高。

发展方向:

Facebook 和 React 最近从繁琐的附加专利纠纷中抽离,他们认识到,就像其他项目一样,更广泛的社区能够提高自己的声音。我觉得这有助于 Facebook 意识到他们还不能更好地了解我们,相信我们来引导项目。希望这将继续贯穿项目的特点和技术方向。

很难预测 React 和 Redux 的未来。但是,将库集中在一起,确实会显着提高适应性,大多数React + Redux 模式都会促进一个分离的体系结构,从而可以轻松地进行重构和迭代。两年前,大家喜欢的还是React + Flux,但整个社区很快就拥抱了Redux。思维或模式的其他重大转变可能很容易被采纳。这种关键能力可能会持续到未来。

使用环境:

如果你很少需要手把手指导,并且正在寻找更好的库而不是全面的框架,那么 React + Redux 可能是正确的。在这一过程中,你不仅需要对你的团队和组织的能力保持诚实,还要在你的初始开发过程中,以及在整个应用程序的长期维护过程中保持诚实。

三、Web前端框架之Vue.js

vue.js优势介绍:

渐进式构建能力是vue.js最大的优势,vue 有一个简洁而且合理的架构,使得它易于理解和构建。

vue 有一个强大的充满激情人群的社区,这为vue.js增加了巨大的价值,使得为一个空白项目创建一个综合的解决方案变得十分容易。

缺点介绍:

在模型-视图应用程序和状态容器类型的应用程序之间的互相转换可能会令人感到困惑,即使没有完美包含一个模式到另一个模式的完美转换,但让人感觉希望能维持两个模式的相关性。对于那些期待vue.js完美解决方案,并可能导致难以维护不一致的应用程序的人来说,这至少是令人困惑的。

一个更大的挑战是vue.js依赖于一个单独的人,很明显,其他的项目基本是由一个组织提供支持,但这让人感觉更加有意义,虽然它有一个强大文件的社区和许多有创新的新增项目,但是 vue 核心的开发基本落在一个人身上。

我们很高兴看到 vue 更加容易接受新兴的标准方法,但是它的类似于 Web 组件的模式,而不是真正的 Web 组件,这可能是 vue 所得不偿失的地方。

发展前景:

虽然vue.js有相当广泛的应用,但也很难预测在中期发展中这个势头能持续多久,它不是由一个商业组织直接支持并维护,因此,这很大程度上依赖于维护者的生存能力和继续维护下去的愿望来决定。

它也表现出了一定程度的语言适应能力,并且随着某些模式的落伍和失宠而继续保持自身语言的现代化和时代性,目前没有迹象表明vue.js架构将来无法适应进一步发展。

使用场景:

如果你有一个传统的Web应用程序,并需要一个强壮稳健的应用程序层,那么vue.js 可能是一个很好的选择,它有清晰的模式,即使没有经验的团队也能正确或者错误的使用它。尽管vue UX框架没有开箱即用的功能,但在vue.js上也能大量持续性构建应用,这将有利于你的项目。

以上就是今天为大家分享的关于常用的Web前端框架优缺点分析的文章。想要成为合格的前端人才,一定要掌握这些框架。

如何挑选适合的前端框架

1、flex
Apache基金会今天发布了Flex 4.8版本微前端框架选型,这是Adobe将Flex捐献给Apache基金会后发布微前端框架选型的第一个版本。

需要注意的是,Flex目前还在孵化阶段,还不是Apache的正式项目,Flex 4.8也不是一个正式的Apache版本。
Apache称,该版本标志着Flex新时代的开始,Flex的未来将由社区来驱动,而不是由一个公司驱动。开发者可以通过贡献代码,来帮助改进Flex,如修复bug、增加功能等。
从Macromedia卖给Adobe,然后又捐给apache,不知道搞什么名堂。不过还好没有经过大幅重构,否则就真的是悲哀了微前端框架选型
2、extjs
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。
功能丰富,无人能出其右。
无论是界面之美,还是功能之强,ext的表格控件都高居榜首。


华丽的界面,灵活的功能,还有开发工具都是配套的,但有个最大的问题,用就得花钱!
3、easyui
easyui帮助你构建你的web应用更加容易。
它是一个基于jquery的插件,开发出来的一套轻量级的ui框架,非常小巧而且功能丰富。

但是她有一个最大的问题就是代码只能找到以前的开源的版本,到了1.2以后的版本源代码都是经过混淆的,如果遇到问题修改起来会非常麻烦!不过一个比较大的优势是开源免费,并且界面做的还说的过去!
4、MiniUI
又一个基于jquery的框架,开发的界面功能都很丰富。
jQuery MiniUI - 快速开发WebUI。
它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。
使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。

界面做的挺不错,功能也挺丰富,但是有两个比较大的问题,一个是收费,一个是没有源码,说白了,不开源!基于这个开发如果想对功能做扩展就需要找他们的团队进行升级!
5、jQuery UI
jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。

功能非常全面,界面也挺漂亮的,可以整体使用,也可以分开使用其中的几个模块,免费开源!
6、DWZ
DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.
设计目标是简单实用,快速开发,降低ajax开发成本。
欢迎大家提出建议,微前端框架选型我们将在下一版本中进一步调整和完善功能.共同推进国内整体ajax开发水平。

毕竟是国产的,支持一下,而且源码完全公开,可以选择一下!不过性能怎么样不敢确定!
7、GWT
Google 网页工具包——GWT 提供了一组基于Java语言的开发包,这个开发包的设计参考Java AWT包设计,类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包,将更多地时间投入到GWT应用的开发过程中。
你不用去了解这样那样的javascript框架,通过java你就可以写出功能丰富的界面,可以做单元测试,毕竟是google的产品,严重支持一下!
8、YUI
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证,基本上没怎么研究过!

YUI Compressor倒是挺出名的,这套UI库不知道应用的情况怎么样!
9、Sencha
Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个新项目。

大公司的框架,并且是几样库的强强联合,值得推荐!
10、Dojo
在国内应用好像不是很广,不过性能上应该没问题。
Dojo是一个用javascript语言实现的开源DHTML工具包。

有多个基金会的支持,包括IBM和SUN,都是软件界的泰斗,值得信赖!
11、ZK
ZK是一套以 AJAX/XUL/Java 为基础的网页应用程式开发框架,用于丰富网页应用程式的使用接口。最大的好处是,在设计AJAX网络应用程式时,轻松简便的操作就像设计桌面程式一样。 ZK包含了一个以AJAX为基础、事件驱动(event-driven)、高互动性的引擎,同时还提供了多样丰富、可重复使用的XUL与HTML组件,以 及以 XML 为基础的使用接口设计语言 ZK User-interfaces Markup Language (ZUML)。
在线的demo

设计器的demo

日历组件

功能丰富,全面,文档齐全,而且升级了很多次,非常值得推荐!
12、OperaMasks-UI
OperaMasks-UI是OperaMasks团队 2011下半年打造的一款轻量级前端JS组件库,旨在提供一款学习曲线低、定制性灵活、样式统一,且多浏览器支持、覆盖企业业务场景的前端 JavaScript UI组件库。目前,该团队已将这一产品以LGPL 开源协议开放给社区。

文档丰富,功能齐全,而且很容易使用和开发!而且是国产的哟!
13、JavaFX
Sun公司(已于2009年被Oracle公司收购)在2008年12月05日发布了JavaFX技术的正式版,它使您能利用 JavaFX 编程语言开发富互联网应用程序(RIA)。JavaFX Script 编程语言(以下称为JavaFX)是Sun微系统公司开发的一种declarative, statically typed(声明性的、静态类型)脚本语言。JavaFX技术有着良好的前景,包括可以直接调用Java API的能力。因为 JavaFX Script是静态类型,它同样具有结构化代码、重用性和封装性,如包、类、继承和单独编译和发布单元,这些特性使得使用Java技术创建和管理大型程序 变为可能。

不管用的人多少,毕竟是从sun开始,现在是oracle,相信会有一个广阔的市场,但是确实不知道有哪个公司用这个框架开发!
转载

微前端 -- 乾坤(一)

在 toB 微前端框架选型的前端开发工作中微前端框架选型,我们往往就会遇到如下困境:

基座模式

通过一个主应用,来管理其它应用。设计难度小,方便实践,但是通用度低。

自组织模式。应用之间是平等的,不存在相互管理的模式。设计难度大,不方便实施,但是通用度高。

就当前而言,基座模式实施起来比较方便,方案也是蛮多的。

注册表模式

和微服务架构相似,不论是哪种微前端方式,都需要有一个应用注册表的服务。这个应用注册表拥有每个应用及对应的入口,即路由。

它可以是一个固定值的配置文件,如 JSON 文件,又或者是一个可动态更新的配置,又或者是一种动态的服务。

作用:

应用注册。即提供新的微前端应用,向应用注册表注册功能。

应用发现。让主应用可以寻找到其它应用。

首先看一下它的用法:

https://qiankun.umijs.org/zh/guide/getting-started

微前端每个应用都拥有自己的生命周期:

bootstrap, 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。

Mount,应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法

Unload,删除应用的生命周期

Unmount,应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例

乾坤,作为一款微前端领域的知名框架,其建立在single-spa基础上。相较于single-spa,乾坤做微前端框架选型了两件重要的事情,其一是加载资源,第二是进行资源隔离。而资源隔离又分为Js资源隔离和css资源隔离.

每个微应用对全局的影响都会局限在微应用自己的作用域内。比如 A 应用在 window 上新增了个属性 test,这个属性只能在 A 应用自己的作用域通过 window.test 获取到,主应用或者其他应用都无法拿到这个变量。

1、快照沙箱

2、支持多应用的代理沙箱

💪 HTML Entry 接入方式,让你接入微应用像使用 iframe 一样简单。

在使用 single-spa 加载微应用时,我们加载的不是微应用本身,而是微应用导出的 JS 文件,即JS Entry。

要接入一个微应用,就需要对微应用进行一系列的改造,然而 JS Entry 的问题就出在这儿,改造时对微应用的侵入行太强,而且和主应用的耦合性太强。

微应用改造一般分为三步:

l 微应用路由改造,添加一个特定的前缀

l 微应用入口改造,挂载点变更和生命周期函数导出

在js文件的入口中会导出一个对象,这个对象上有 bootstrap、mount、unmount 这三个接入 single-spa 框架必须提供的生命周期方法,其中 mount 方法规定了微应用应该怎么挂载到主应用提供的容器节点上。

l 打包工具配置更改

侵入型强其实说的就是第三点,更改打包工具的配置,使用 single-spa 接入微应用需要将微应用整个打包成一个 JS 文件,发布到静态资源服务器,然后在主应用中配置该 JS 文件的地址告诉 single-spa 去这个地址加载微应用。这就导致常见的打包优化基本上都没了,比如:按需加载、首屏资源加载优化、css 独立打包等优化措施。

项目发布以后出现了 bug ,修复之后需要更新上线,为了清除浏览器缓存带来的应用,一般文件名会带上 chunkcontent,微应用发布之后文件名都会发生变化,这时候还需要更新主应用中微应用配置,然后重新编译主应用然后发布,这套操作简直是不能忍受的。这也是 微前端框架 之 single-spa 从入门到精通 这篇文章中示例项目中微应用发布时的环境配置选择 development 的原因。

qiankun 框架为了解决 JS Entry 的问题,于是采用了 HTML Entry 的方式,让用户接入微应用就像使用 iframe 一样简单。

https://github.com/sy-l123/qiankun-demo

轻量、高效、功能强大的微前端框架-MicroApp

这几年后端的微服务是比较火爆,我们公司目前只要是新项目,基本上都是基于微服务去架构的,那么微前端是什么呢?

微前端是借鉴了微服务的架构理念,核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用融合为一个完整的应用,或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一,又可以减少项目之间的耦合,提升项目扩展性,相比一整块的前端仓库,微前端架构下的前端仓库倾向于更小更灵活

以前我们为了把几个独立运行的小型应用合并成一个应用都是通过iframe的方式去实现的,如果不考虑体验问题,iframe 几乎是最完美的微前端解决方案了。

iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题

micro-app不是基于iframe架构的

micro-app提供了js沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完善的开箱即用功能

micro-app没有任何依赖

为了保证各个业务之间独立开发、独立部署的能力,micro-app做了诸多兼容,在任何技术框架中都可以正常运行。

下面我讲一下如何在Vue中使用micro-app

1、初始化一个基座应用

2、基座应用的文件修改

main.js修改

router.js修改

3、main-page.vue页面

4、创建一个子应用

5、子应用的router.js文件修改

6、src目录下新建 public-path.js

7、 main.js 引入public-path.js

到此这个简单的微应用就搭好了

觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧

常用的前端框架有哪些?

1. Twitter BootStrap (Apache v2.0;响应式)
时髦、直观并且强大的前端框架,让Web开发变得更加容易。
2. Foundation (MIT;响应式)
最先进的响应式前端框架。
3. 960gs(GPLMIT;响应式)
960gs提供了一个简单的网格系统,适合快速开发。
4. Skeleton(MIT;响应式)
非常漂亮的Web模板,适合响应式、移动友好的开发。
5. 99lime HTML KickStart(Free)
适合网站快速开发的极简HTML构建模块。
6. Kube(Free;响应式)
面向专业人员的CSS框架。
7. Less Framework(MIT;响应式)
自适应的CSS网格系统。
8. Flameinwork(Free)
适合懒人开发者的前端微框架。
9. G5 Framework(Free)
(x)HTML5、CSS、PHP前端开发框架。
10. Easy Framework(Free)
Easy Framework是一个一体化前端解决方案,分structural、 presentational、interactive三层。
11. Blueprint(Free)
一个旨在减少开发时间的前端框架。
12. YAML(Creative Commons)
(x)HTML+CSS框架,适合开发现代化浮动布局。
13. BlueTrip(Free)
一个功能全面、并且美丽的CSS框架,适合于Blueprint搭配使用。
14. YUI3:Grids CSS(BSD)
YUI Grids CSS是最著名的CSS框架之一,是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度,六种不同的模板。
15. 52framework(Creative Commons)
对HTML5支持非常好,简单易用。
16. elastiCSS(MIT)
一个基于Web接口和印刷布局的简单CSS框架。
17. Emastic(Free)
一个与众不同的CSS框架。
18. Fluid 960 Gride System(GPL/MIT)
Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System:传承了MooTools和jQuery JavaScript libraries的效果。
19. xCSS(MIT)
一个面向对象的CSS框架,能让你的工作流更加简洁。xCSS基于CSS,可以在开发复杂样式时,提供面向对象的工作流。
20. EM CSS Framework(MIT/GPL)
EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。

快速上手微前端框架 icestark (一)

微前端本质和后端微服务理念是一样的,微前端解决方案一般包含如下特点

初始化 Vue 主应用

初始化 React 主应用

本地实例初始化的 Vue 主应用,运行如下

本地地址: http://localhost:3000

本地运行的官方主应用Demo,已经整合了官方提供的 Vue,React 子应用,接下来本地创建子应用,运行后分别挂在到本地启动的主应用中

Vue 子应用

本地地址: http://localhost:3001

React 子应用

本地地址: http://localhost:3333

在主应用中注册子应用,在主应用 App.vue 中的 onMounted 中修改 ice 注册配置,修改 name, activePath, title, entry 这四个属性即可

注意 activePath 指向子应用中的路由地址, entry 地址这里使用子应用启动后的根路由地址, 也可以指向对应的子应用指定地址, 如 http://localhost:3333/react

在主应用的 BasicLayout.vue 文件中配置 el-sub-menu

单独配置子应用路由对应主应用中的 activePath ,实现正常加载

React 子应用路由, 配置了一个 /react 路由地址

Vue 子应用路由, 配置一个 /vue 路由地址

这时候主应用的侧边栏的内容对应到本地启动的子应用,并且能访问就整合成功了,这时候已经本地示例实现了 icestark 框架的应用整合,应用接入,路由配置跳转的能力。

接下来,将在本地示例中实现子应用间的路由切换(页面跳转)和应用互相通信。

关于微前端框架选型和微前端框架对比的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。 微前端框架选型的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于微前端框架对比、微前端框架选型的信息别忘了在本站进行查找喔。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:软件app开发平台(手机APP开发平台)
下一篇:完善一体化政务服务平台(政府一体化服务平台)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~