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框架们的学习更感兴趣。这些框架通常带有预置的函数和一些构建应用的方法。

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

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

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

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

大街上的酷小孩-Vue.js

它就像一个还在读高中的超级巨星。这不是一个成熟的技术,所以我们真的无法预言五年后,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

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

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)

尽管在不挖掘源代码的前提下,很难完全了解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/React/Angular三大框架开发Pagination分页组件

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

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

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

  4. 2015前端各大框架比较(angular,vue,react,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: Javascript 框架之战

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

  7. 三种Web前端框架比较与介绍--Vue, react, 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&React的前端组件化,顺带补齐React的demo

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

随机推荐

  1. JPA错误

    2016-11-141.2016-10-31: hibernate用注解 一对多 报Could not determine type for错误 原因:  接下来继续解决第二个问题:怎么又与集合打交道 ...

  2. 指令发布中如何实现new新消息的提醒?

    设计思路:反馈后,最急需了解反馈结果的是申请人,故给每一条反馈信息添加一个查看状态的字段,如CK_STATUS,并为这个状态设计为char(1)类型,java bean中使用integer可以实现默认 ...

  3. PLSQL Developer对oracle中的数据进行备份恢复

    1.备份数据结构 --进入  工具-->导出用户对象  如图所示 把包括所有者的√去掉,到时候我们就可以随便建一个用户导入数据了,不一定非要scott用户   2.备份数据 工具-->导出 ...

  4. PYTHON编码处理-str与Unicode的区别

    一篇关于STR和UNICODE的好文章 整理下python编码相关的内容 注意: 以下讨论为Python2.x版本, Py3k的待尝试 开始 用python处理中文时,读取文件或消息,http参数等等 ...

  5. IntellJ IDEA 2017 激活编译器配置,读取多个配置文件

    1.设置编译器,找到1,点击2 2.输入设置命令:--spring.profiles.active=test,如果是多个文件输入--spring.profiles.active=test,dev 3. ...

  6. mysql学习之路_高级数据操作

    关系 将实体与实体的关系,反应到最终数据表的设计上来,将关系分为三种,一对多,多对多,多对多. 所有关系都是表与表之间的关系. 一对一: 一张表的一条记录一定只对应另外一张表的一条记录,反之亦然. 例 ...

  7. 第20章:MongoDB-聚合操作--聚合管道--$unwind

    ①$unwind 在查询数据的时候经常会返回数组信息,但是数组并不方便信息的浏览,所以提供有“$unwind”可以将数组数据变为独立的字符串内容. 将文档中数组类型的字段拆分成多条,每条文档包含数组中 ...

  8. 使用Golang+Mongodb打造你的第一个站点

    很多人推荐MEAN来开发站点.MEAN就是M:mongodb,E:expressjs.A:angular最后的N:nodejs. 但是如果你亲身的体会到了js的嵌套回调的话你就会想换换别的办法了.虽然 ...

  9. MapServer和GeoServer对比

    https://blog.csdn.net/theonegis/article/details/45823099

  10. java锁类型

    转载链接在每个锁类型后边 线程锁类型 1.自旋锁 ,自旋,jvm默认是10次吧,有jvm自己控制.for去争取锁 锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchroni ...