热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何选择React、Angular、Vue前端三大框架?

今天我们聊一聊现在主流的三大前端框架,React、Angular、Vue。em。。。等等,稍微纠正一下,React其实并不能算是真正的前端框架,它其实更类似于像JQuery一样的前端包库。这个定义不重要,React这么流行那我们就把它和Angular、Vue一起聊一聊。先说一下为什么想聊一下这个话题,因为在工作中我发现有的人会React,有的人会Angular,还有的人会Vu

如何选择React、Angular、Vue前端三大框架?
今天我们聊一聊现在主流的三大前端框架,React、Angular、Vue。em。。。等等,稍微纠正一下,React其实并不能算是真正的前端框架,它其实更类似于像JQuery一样的前端包库。这个定义不重要,React这么流行那我们就把它和Angular、Vue一起聊一聊。

先说一下为什么想聊一下这个话题,因为在工作中我发现有的人会React,有的人会Angular,还有的人会Vue,甚至有的人并不会这三个主流框架中的任何一个,而仅仅会Javascript,而这些朋友统称为前端工程师。哇哦!前端工程师差别这么大呢?!我在公司做面试官时就发现很多时候我们想要一个可以开发Angular的人员,所以我们必须在招聘要求上说明要熟悉Javascript,属性Angular等等,我会经常觉得优点废话呢。但是没办法,如果不写清楚需要熟悉Angular,你会收到一堆不匹配的简历。所以今天聊这三个框架我并不想说出类似于“React是最好的前端框架”这种话。因为每一种框架都会有它自己的优点与缺点,作为一个前端开发者,我们应该全部掌握。

热度大比拼

我们先看看这三个框架在Google Trends的表现,因为在Google Trends上并没有Vue主题,所以为了公平起见我选择了计算机类型,并以搜索词作为比较对象,虽然这样比较也并不十分准确,但也足以说明我们想要的答案。
如何选择React、Angular、Vue前端三大框架?
从上图中我们可以看出React和Angular热度差不多,奇怪的是在2018/12/23~2018/12/29这个时间段React和Angular热度都有很大的下降,Vue虽然也稍有下降,但是不算很多,这里我猜测是歪果仁们都去过圣诞节了,谁还有心思写代码啊。圣诞节对中国人来说不是主要节日,但程序猿们也可能会追一下潮流,所以也稍有下降。什么?为什么Vue跟中国有关系?因为Vue是中国人发明的,它的主要市场在中国。在这个热度比较中对Vue有很多不公平,因为很多国人可能会通过百度等国内搜索引擎,但这里我们不深究,因为即时如此React和Angular可以说是国际流行,Vue与这两个框架在市场份额上还是有所差距。
如何选择React、Angular、Vue前端三大框架?
我们通过上表可以看出在GitHub上,Vue的关注度很高,其热度和稳定性一点不输给Angular和Vue,Angular的Issues很高,这说明Angular的稳定性还不足。通过这个图表,我们可以看出Angular和Vue的热度在持续增加,React因为发布较早已区域稳定,但结合Google Trends图我们可以看出,React已是成熟稳定的Javascript包库,它的市场占有率和使用率还是很大的。

React

React是由Facebook公司推出的前端包库。提供了响应式和组件化的视图组件,并且拥有强大的路由系统,在React中淡化了HTML和CSS的模版应用,它通过JSX语法糖可以方便快捷的建立网页节点。React Native让React具有多平台的能力。React最大的优点就是通过虚拟DOM实现高性能,并且具有繁荣的生态社区。

由于React淡化了HTML模版概念,这使得大多数前端开发者在开始学习React时不习惯,HTML可以给开发者更为直观的开发感受。React使用CSS-In-JS实现CSS引入,这需要额外的运行时程序开销。React依赖繁荣的社区来丰富自身的能力,这也使得功能维护更分散。React的类库虽然尽可能的与React共享API和生态,但它们也有自己的小生态。因此很多时候类库并不是所有功能都完全兼容React。

React的主要用户有Facebook、Uber、Netflix、Twitter、Udemy、Paypal、Reddit、Tumblr、Walmart。

Angular

Angular现在由Google团队维护的一个JS框架,它是在AngularJS 1.X之后重新开发的全新框架,因此Angular不具有兼容AngularJS的能力。Angular是基于TypeScript开发的Javascript MVVM框架,这里我也见到有网友认为它是MVC框架,我个人更偏向于MVVM。它具有很强的HTML和CSS亲和性,这让很多传统开发者可以更快上手。它具有自己的DSL语言,可方便的在HTML中实现逻辑判断、for循环等功能。Angular以模型、组件、模版、服务等等类似于Java和C++面向对象的概念,这也让后端开发者可以更容易的学习。

Angular由于其设计引入很多架构概念,导致其复杂度很高,提升了学习曲线的陡峭程度。Angular具有很强的规则性,也就是说无论开发者开发大项目还是小项目都必须按照其规则进行开发,这导致其向下扩展性不足。Angular的项目体积相对于React和Vue都会比较大,虽然并不一定对性能产生很大的影响,但是降低了它与React和Vue的竞争力。

Angular的主要用户有Google、Forbes、WhatsApp、Instagram、healthcare.gov。

Vue

Vue的创始人是中国人尤雨溪,作为中国人感觉骄傲一下。由于尤雨溪参与过Angular的开发,因此Vue的设计参考了React、Angular和Polymer,我个人觉得Vue更像是React和Angular的结合,舍去了二者的一些缺点,整合了二者的主要优点。Vue也使用了虚拟DOM,并提供了响应式和组件化的视图组件,官方提供了基于核心包之外强大的路由系统和状态管理库。Vue主要支持HTML和CSS模版,但同时也支持JSX和CSS-In-JS,也可方便的继承Redux,它需要结合Weex实现多平台的能力。Vue更像是更简单的React+Mobx。它兼具React的高性能和Angular的框架组织性,并具有很好的向下向上扩展性。

Vue是基于Flow团队设计的,而由于Flow团队的GG,所以其在类型推导上相比Angular要略逊一筹,但据创始人尤雨溪透露,在Vue的下一个版本中将会基于TS实现更好的类型推导能力。(可参考InfoQ文章:尤雨溪回应:Vue 与 TypeScript 为什么相性特别差?)

Vue的主要用户有Alibaba、Gitlab、Baidu、京东等公司。

个人建议

其实对于开发而言React、Angular和Vue都是很好的前端框架,三者在性能上都表现的不错(参考:benchmark)。我们都应该熟练掌握,React作为发布较早较稳定的Javascript包库,其市场份额还是相当大的,是经过了市场检验的。Angular和Vue作为亲和HTML和CSS模版的框架,可以让开发者更容易学习。Vue更是兼备React和Angular的优点,解决了二者的一些缺点,这使得其具有更好的开发体验。所以个人觉得Vue较React和Angular略胜一筹。但这三个框架都由大的技术公司维护,所以并不能说那个框架就一定更优。

总结

本文主要比较了现在市场上比较火热的三大前端框架,先根据Google Trends和Github数据进行了简要分析,然后分别对这三个框架进行了简要介绍,最后给出了个人建议。

本文目标并不是告诉大家那个框架好那个框架不好,这三个框架现在都由大公司维护,因此其技术发展潜力还是很好的,而且三个框架都有世界知名技术公司在使用,因此其社区繁荣度较其他一些小型框架会更好。所以建议大家还是本着个人技术能力出发,尽量都能熟练掌握,这样才能更为游刃有余。
如何选择React、Angular、Vue前端三大框架?


推荐阅读
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • React基础篇一 - JSX语法扩展与使用
    本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展,用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法,并给出了一个示例代码。最后,提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 随着前端技术的发展,越来越多的开发者开始使用react、vue等web框架,但很少有人深入理解这些框架的源码。然而,这些框架底层都是由原生的javascript构建而成。对于初学前端的人来说,可能会认为javascript很容易上手,但实际上只是因为它被高度封装了。与能够使用封装类的人相比,能够理解框架原理的人则处于另一个层面。本文将深入剖析jquery源码,探寻框架底层的原理,帮助读者更好地理解web框架的运行机制。 ... [详细]
  • 获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法
    本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法,包括使用jQuery的选择器和遍历方法。通过这些方法,可以方便地获取到所需的元素,并进行相应的操作。 ... [详细]
  • 本文介绍了自学Vue的第01天的内容,包括学习目标、学习资料的收集和学习方法的选择。作者解释了为什么要学习Vue以及选择Vue的原因,包括完善的中文文档、较低的学习曲线、使用人数众多等。作者还列举了自己选择的学习资料,包括全新vue2.5核心技术全方位讲解+实战精讲教程、全新vue2.5项目实战全家桶单页面仿京东电商等。最后,作者提出了学习方法,包括简单的入门课程和实战课程。 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
author-avatar
永远的爱ye
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有