前端三大主流框架如何去选择?

简介: 前端三大主流框架如何去选择?

今天我们聊一聊现在主流的三大前端框架,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热度差不多,奇怪的是在2018/12/23~2018/12/29这个时间段React和Angular热度都有很大的下降,Vue虽然也稍有下降,但是不算很多,这里我猜测是歪果仁们都去过圣诞节了,谁还有心思写代码啊。圣诞节对中国人来说不是主要节日,但程序猿们也可能会追一下潮流,所以也稍有下降。什么?为什么Vue跟中国有关系?因为Vue是中国人发明的,它的主要市场在中国。在这个热度比较中对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数据进行了简要分析,然后分别对这三个框架进行了简要介绍,最后给出了个人建议。

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




目录
相关文章
|
2月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
91 9
|
3月前
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
|
8天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
79 18
|
3月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
95 41
|
2月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
36 9
|
3月前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
149 7
|
3月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
3月前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
135 2
|
3月前
|
前端开发 JavaScript 开发者
qiankun(乾坤)微前端框架简介
qiankun(乾坤)微前端框架简介
318 1
|
3月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门