Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择

时间:2022-09-25 11:10:04

2017-08-04 前端大全

(点击上方公众号,可快速关注)

英文:ANTONI ZOLCIAK  译文:众成翻译

www.zcfy.cc/article/vue-react-angularjs-and-angular2-our-take-on-popular-javascript-frameworks-3668.html

如有好文章投稿,请点击 → 这里了解详情

一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名。这位IT巨头指出,JS在网站中惊人地达到94.4%的使用率,而且“不太可能降低”。JavaScript能确保“对用户非常友好的网页,因为它负责整个web界面,包括动画和交互”。不管你怎么看,JavaScript很重要。

这也为潜在的Web开发人员指明了方向:如果你深入前端,你不得不在某些时刻面对JavaScript。并且正确的开发指南可能有助于此。

让我们假设你知道JavaScript基础知识。纯JS(不是一无所知)的那种。如果假设是正确的(意思是你了解基础),你可能对现代JavaScript框架们的学习更感兴趣。这些框架通常带有预置的函数和一些构建应用的方法。

Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择

虽然有些人可能认为框架有局限性,但是世界上大多数开发者更喜欢使用框架(不要将它们与库混淆),因为它们使工作更容易,更快速,在通常情况下更可靠。

好吧!说完这些,是时候该深挖一点儿了。

我们的开发团队准备了他们每天使用的框架清单。虽然周围肯定有更多的JavaScript框架,这些是我们最关注的。

接下来,你会看到我们所爱的技术及其各自特点的简单概述。

大街上的酷小孩-Vue.js

Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择

它就像一个还在读高中的超级巨星。这不是一个成熟的技术,所以我们真的无法预言五年后,Vue会发生什么。然而目前,它可能是每个会议议程中最引人注目的话题

如果你决定和JS极客喝两杯,他肯定会谈论Vue。如果Vue是个流行歌星,那么现在它就是最红的。如果…嗯,你明白我的意思。

它由尤雨溪在2014年2月建立。在2016年,Vue.js拥有惊人的89%的开发人员满意度评估,目前是GitHub中star最多的项目之一。

虚的说差不多了,来点实际的。什么是Vue.js?首先,它是本文中讨论的所有JavaScript框架中最快最小的。它的语法和原理所需要的学习成本不是很高。此外,它还具有高覆盖率的文档。你想要执行的操作绝大部分情况都已有文档说明。反之,如果一个操作没有文档记录,你能在线上找到解决方案的几率很小,因为Vue不如Angular或React更流行。

注意:Vue的发音和“view”一样。

随便挑5个Vue.js的特性说一下:

  • 便于扩展的插件系统。

  • 拥有在使用服务端渲染时的库(Nuxt.js)。

  • 支持范围样式。

  • 有一个CLI工具,允许你通过先进的前端工作流设置,快速构建单页应用。

  • 被加入Laravel5.4的新特性中,用来处理前端模板

就像React一样,Vue.js仅处理视图层。也就是,它让开发人员自己实现他们的业务逻辑。它还实现了Flux架构:Vuex。作为我们的队友, Maciej Kolodziejczak说:

在我看来,Vuex比React的Redux使用起来更好,更容易。

此外,Vue.js在Chrome中拥有最好的开发者工具,并且Weex也使用Vue的语法,它是一个通过JavaScript构建原生应用的框架,也是React Native的竞争对手。值得注意的是,Weex并不太完善,特别是对于商业项目。目前,它更多的是一个方案而不是一个真正的技术。

对开发者来说,Vue.js的优势在于:

  • 易于学习和理解,能快速开发应用

  • 与Laravel集成,所以具有Vue知识的开发人员对使用Laravel开发应用的后端团队有所补充

  • 拥有非常方便的CLI工具,可以快速启动

  • 有很多额外的模块,如路由器和状态管理工具;虽然不如其他框架那么多

对客户来说,Vue.js的优势在于:

  • 降低前端应用成本,乃至全功能web应用的成本(在使用Laravel和Vue.js的组合时)

  • 在保证稳定性的同时,是一个快速可靠的解决方案

  • 较小的模块很适用,如日历,联系人表单或小部件

开发者满意度最高-React.js

Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择

React是由Facebook的Jordan Walke创建的,GitHub的最流行框架中排名第5。然而,React.js(以及React Native)最火爆的时间点是在2015年。

State of JS调查显示React的开发者满意度最高,达到92%。Vue跟它在同一个级别。根据调查,React的开发者较平均水平来说,在决定哪个技术配套使用前,会尝试多种其他技术组合。

随便挑5个React.js的特性说一下:

  • 框架只负责”View”层,这意味着其它业务逻辑是完全解耦的,并且能以任何方式来实现。

  • 与框架相关的Redux是一个非常棒的类Flux架构的实现。

  • 模板方面,框架可以使用JSX语法,这个语法在刚上手时可能会有一点点难度。

  • 开发者掌握React.js的知识后,可以直接用于基于React Native的移动客户端开发。

React对VirtualDOM的使用,以及由此获得的高性能广受开发者好评。经常使用框架的开发者也是这与这项技术相关的庞大社群的重要组成部分。React的快速发展,除了 Facebook的维护外,也要感谢开源项目以及第三方的模块。

此外,随着React将会有一个能够向后兼容的重写版React Fiber的消息放出,React的”第二春”很快就会到来。

对开发者来说,React的优势在于:

  • 庞大且活跃的社区

  • 并非一个大而全的框架

  • JSX这种新的JavaScript语法,也是一个不错的优点

  • 相关的开发工具也很不错

  • 强制使用最新的最佳实践

对客户来说,React的优势在于:

  • 大量的开发者熟悉这个框架

  • React Native使得Web应用的逻辑可以复用于移动客户端

  • 有足够多的使用和测试场景来保证框架本身几乎没有bug和错误

智慧长老-AngularJS

Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择

Google在2009年第一次发布了AngularJs框架,鼓励使用声明式编程方法去创建用户界面和连接各种组件,另一方面,指令式的编程用于实现程序的逻辑。

Brat Tech公司的Miško Hevery是这个技术的真正作者,当时,它被创建为在线JSON存储服务背后的软件。但是业务没有搞起来,所以公司放弃了这个想法,并将AngularJs作为一个开源库发布。

AngularJS使用双向数据绑定的方式,适配和扩展了传统的HTML来呈现动态内容。

所有这些可能听起来很有意思,事实是AngularJs已经有点老了 实际上。它是我们描述的框架里最老的了,大ReactJS4岁,Vue.js5岁,比Angular2年长了7岁之多。

尽管如此,他拥有Github上最多的贡献者(1,562个),随后是ReactJS,Angular2,Vue.js。

不可否认,AngularJS有一个陡峭的学习曲线,这个缺点在某种程度上被一个大型社区抵消,保证开发人员可能遇到的大多数问题存在解决方案。

随便说AngularJS的5个特性

  • 仍然有许多项目使用AngularJS,所以了解AngularJS方便你维护这些项目。

  • 为不想使用新的Angular或Ember.js的团队提供可行且稳定的解决方案。

  • 使用脏值检查(digest cycle);与观察者模式相比孰优孰劣取决于你的需求。

  • PlayStation 3上的YouTube应用是用AngularJS开发的。

  • 以HTML为中心。

AngularJS是SPA中最常用的JavaScript框架之一,也是企业级应用的一个很好的选择。但是它确实很老了,大多时候是被老旧的应用采用。

AngularJs对开发者来说的”优”点:

  • 在2017年,如果你还没有使用它,你完全可以忽略他了。

  • 如果您需要更多功能的话,请使用新的Angular或Ember。

AngularJS对用户来说的”优”点:

  • 主要维护尚未准备好或无法获得足够重写的旧应用。

  • 由于框架复杂性,创建更复杂应用的成本很高。

(译者注:各种黑)

Angular2(或简称Angular)

Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择

尽管在不挖掘源代码的前提下,很难完全了解Angular2的概念,它是一个非常强大的框架 内置了相当多的功能。

以AngularJS为基础,使用Typescript重写。与以前的版本相比,它没有scope或controllers的概念。相反,它使用组件层次结构化作为其主要架构概念。支持动态加载,改进了依赖注入,并提供更为简单的路由和异步模板编译机制。

随便说Angular2的5个特性

  • 由TypeScript编写,允许开发人员使用TypeScript,Dart或纯粹的ECMAScript。

  • 组件的模式利用了TS类和装饰器。

  • 陡峭的学习曲线

  • 开发过程很快。

  • 高级的的测试特性。

基本上,Angular可以摆脱AngularJS中存在的不必要的复杂性。然而,许多人认为,即使用CLI,单个开发人员的配置和启动过程仍然可能太长。

In’saneLab的开发团队也不太喜欢提供文档,特别是对于JS和Dart。另一方面,他们又喜欢将技术分解成很多模块。

Angular对开发者的优点:

  • 你喜欢TypeScript就开心了

  • 强制规定编写代码的方式,使得它成为与多个开发人员合作的好选择

  • 使用同一个库开发移动和桌面应用

  • 对于具有很多代码的单页应用是个不错的解决方案

Angular对客户来说的优点:

  • 使用该框架构建企业应用可能会降低成本

  • 大量开发人员已经知道如何使用框架

有最好的 Javascript 框架这一说么?

想要一个简单的答案? 没有。这跟公司目标、需求、以及最终的功能都有关系。举例来说,Angular2更像是一个百宝箱,特别适合大型项目。它非常复杂,并且需要花很多时间来全面的学习和掌握(但比AngularJS要简单一些)。但使用以JavaScript为核心的React,开发者就能快速高效得拼凑出一些有用的东西。

每个框架都在以不同的方式以实现适合用于不同场景的Web应用开发,包括MVP、创业公司和商业场景。

因此你应该考虑找到这样一个人,他能帮你选择适用于开发并且能够跟得上业务发展需要的技术。

而我们恰好具备这样的能力。

Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择的更多相关文章

  1. Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择

    转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...

  2. 手把手教你使用Vue&sol;React&sol;Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  3. vue&comma;react&comma;angular三大web前端流行框架简单对比

    常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http: ...

  4. 2015前端各大框架比较(angular&comma;vue&comma;react&comma;ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  5. angular vue react web前端三大主流框架的对比

    首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...

  6. Vue vs React&colon; Javascript 框架之战

    https://baijiahao.baidu.com/s?id=1608210396818353443&wfr=spider&for=pc    原文档 正如我们之前提到的,Word ...

  7. 三种Web前端框架比较与介绍--Vue&comma; react&comma; angular

    一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...

  8. 前端三大框架(Angular Vue React)

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

  9. 从DOM操作看Vue&amp&semi;React的前端组件化,顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

随机推荐

  1. 分布式系统理论进阶 - Paxos变种和优化

    引言 <分布式系统理论进阶 - Paxos>中我们了解了Basic Paxos.Multi Paxos的基本原理,但如果想把Paxos应用于工程实践,了解基本原理还不够. 有很多基于Pax ...

  2. 关于mybatis 的mapper namespace 作用及解析

    因为语言惯性,大部分的namespace 在语言级别*来说是作为一种限定性标识来用,起到唯一或一类的标识.来看看语言(以PHP语言为例)上的namespace的作用实例 一.namespace 在PH ...

  3. Winform开发框架之附件管理应用

    在很多常规的管理系统里面,都可能有附件管理的需求,在我做的一系列医疗行业的病人信息管理系统里面,都希望能很好的管理病人的相关资料,分门别类的进行存储,需要的时候可以预览查看,那么这个功能我们可以把它独 ...

  4. HDU 5446 Unknown Treasure Lucas&plus;中国剩余定理

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5446 Unknown Treasure 问题描述 On the way to the next se ...

  5. ARM内核全解析

    前不久ARM正式宣布推出新款ARMv8架构的Cortex-A50处理器系列产品,以此来扩大ARM在高性能与低功耗 领域的领先地位,进一步抢占移动终端市场份额.Cortex-A50是继Cortex-A1 ...

  6. SQL SERVER2012新分页方式 轉載

    SQL SERVER2012在ORDER BY 子句中加入了新元素offset,允许用户在排序完成的结果集中自定义输出行范围,大大简化了分页SQL的书写方式和效率. SQL SERVER2012在OR ...

  7. pthread&lowbar;t定义结构

    linux下被定义为: 在linux履行pthread_t它被定义为 "unsigned long int",参考这里 Windows下这样定义: /* * Generic han ...

  8. 负载均衡之 nginx

    什么是负载均衡负载均衡(Load Balance)是分布式系统架构设计中必须考虑的因素之一,它通常是指,将请求/数据[均匀]分摊到多个操作单元上执行,负载均衡的关键在于[均匀].在使用nginx负载均 ...

  9. Java核心技术及面试指南 设计模式部分的面试题总结以及答案

    8.6.4.1请实现一个线程安全的单例模式. 1      public class MailListReader { 2          private static MailListReader ...

  10. javascript设计模式阅读后的感悟与总结

    单例模式 用于创建唯一的一个对象. 核心在于一个判断 var index if(index){ return index; } init(); 这样只会在第一次的时候初始化创建对象,以后都不会再创建对 ...