Angular 2 VS. React: 血色将至

原文链接:https://medium.com/@housecor/angular-2-versus-react-there-will-be-blood-66595faafd51#.g1eaz7lye

转发来自:http://www.zcfy.cc/article/142

Angular2 已升级到 Beta 版并有可能成为 2016 年最火的新框架。尖峰时刻到了,让我们看看它如何应对 2015 年新宠 React

声明:我很享受在 Angular 1 的工作,但是我已在 2015 年转到了 React。我刚刚发布了一个免费试用课程多视角解读 React 和 Flux”。是的,我有些偏心,但这两者的缺点我都会指出。

Photo credit: @jwcarrol

比较苹果和猩猩

是的, Angular 是一个框架,React 是一个库。有些人说比较他们的区别是毫无意义的。胡说!

在 Angular 和 React 之间做选择就像选择买一个现成的电脑与选择利用现成的部件组装你自己的电脑。

本博文会涉及到这两个方法的优点。我将 React 的语法和组件模型与 Angular 的语法和组件模型进行对比,这就像对比一个现成的电脑的 CPU 与一个半成品的 CPU。

Angular 2 优势

我们先研究 Angular 2 相比 React 的优势。

少一些选择疲劳

因为 Angular 是一个框架,它提供了非常多好用的思想与功能。而 React,你通常需要加入许多现成的库才能构建一个真正的应用。你可能想要一个路由库、执行单向流库、web API 调用库、测试库、依赖管理库等等。一大堆的选择令人不知所措。这就是为什么 React 有这么多入门套件的原因(我就已经发布两个)。

Angular提供了更多现成的思路,可以帮助你快速入门而不用为选择库感到恐惧。这种强制一致性也帮助新员工快速入门并使得开发者在团队之间的切换更高效。

我很欣赏 Angular 核心团队已经拥抱 TypeScript,这引出了下一个优点……

TypeScript = 坦途一条

当然, 不是所有的人都喜欢 TypeScript,但是 Angular 2 执着地使用这种 JavaScript 风格是好事。React 的例子在网上非常的不统一 —— 使用 ES5 和 ES6 的数量大约是相等的,而现在又提供了三种不同的方式来声明组件。这给新人带来了困惑。(Angular 也使用 decorator 替代 extend —— 许多人认为这是有好处的)。

虽然 Angular 2 不要求使用 TypeScript,但 Angular 核心团队毫无疑问地拥抱它并在文档中默认使用它。这意味着相关的例子以及开源项目可能让你感到更熟悉和一致。Angular 已提供了清晰的例子来说明如何使用 TypeScript 编译器。(虽然不可否认的是,不是每个人都已接受了 TypeScript,但我猜想在它发布后不久就会成为现实标准)。这种一致性,可以避免使用 React 带来的过多的困惑和争论。

少一些折腾

2015 是 JavaScript 疲劳 的一年。React 是一个关键的贡献者。因为 React 1.0 版本还未发布,未来可能会有重大修改。React 的生态系统也在快速发展,尤其是围绕着众多 Flux 特性路由。这意味着,你现在使用 React 写的东西,在 React 1.0 正式发布后,会觉得过时或需要大改版。

相反, Angular 2 是一个谨慎的、全面的、成熟的系统再造。所以 Angular 在发布后不用大动干戈地改来改去。并且作为一个全面的框架,当你选择了 Angular,你可以信任一个独立的团队对未来做出的谨慎的决定。使用React,你需要照管一大堆不相干又快速变化的开源库,要确保它们在一块可以顺利协作。这是一项费时的、有挫败感的并且永不止步的工作。

大量的工具支持

正如你接下来看到的,我认为 React 的 JSX 是不错。但是,你需要选择工具来支持 JSX。React 已经如此流行了,因此现在工具的支持不是大问题,但像 IDE 和 linter 这样的新工具并没有支持 JSX。Angular 2 的模板使用一个字符串或分开的 HTML 文件来保存标签,因此它不需要特殊的工具支持(尽管它发布了工具来智能地解析 Angular 的字符串模板)。那就是说,Angular 的方法有它自身的缺陷,这有利于继续讨论 React 的优势……

React 优势

JSX

JSX 是 HTML 类似的语法并能编译成 JavaScript。标签和代码放在同一文件。这意味着代码自动补全帮助键入你引用的组件的函数和变量。相反,Angular 的基于字符串的模板带来常见的缺点:许多编辑器没有代码颜色区分、有限的代码补全支持、run-time 失效。通常这时候你会想到出错消息是不是也不行啊,但是 Angular 团队创建了他们自己的 HTML 解析器来修复那个问题(太棒了!)。

如果你不喜欢 Angular 基于字符串的模板,你可以把模板挪到独立的文件中,但是没有代码补全的支持与编译时校验的帮助,你需要同时记住两个文件,并在两个文件中切换。然而当你愉快地使用 React 时,这些都不是事儿。JSX 之所以如此特别,就是因为组件是由单个编译时校验的文件组成。

对比 Angular 2 与 React 是如何处理缺少闭合标签的。

想了解为什么 JSX 如此牛逼,请看这 JSX: The Other Side of the Coin

React 报错精准迅速

当你在 React JSX 中写了一个错字,JSX 就不会被编译。这是件好事。这意味着你能立刻正确地知道哪行出错了。当你忘记写闭合标签或你引用了一个不存在的属性时,它会立即通知你。实际上,JSX 编译器会标明错误出现的行号。这个行为从根本上加快了开发速度。

相反,当你在 Angular 2 中写错了变量引用,什么也不会发生。 Angular 2 会在运行的时候悄悄地报错,而不是编译时报错。它的报错很慢,我加载了应用却不知道为什么没有展示我的数据,很不爽。

React 以 JavaScript 为中心

这是 React 和 Angular 之间的本质区别。不幸的是, Angular 2 依然保留以 HTML 为中心而不是以 JavaScript 为中心。Angular 2 没有解决它本质的设计问题:

Angular 2 将 “JS” 嵌入 HTML。React 将 “HTML” 嵌入 JS。

这种背道而驰的设计思路影响太大了,它从根本上影响着开发体验。 Angular 以 HTML 为中心的设计保持着它最大的弱点。正如我在 “JSX: The Other Side of the Coin”说的,JavaScript 比 HTML 更强悍。因此,强化 JavaScript 来支持标签比强调 HTML 来支持逻辑更可行。React 设法将 HTML 和 JavaScript 粘合在一起, React 的以 JavaScript 为中心方式从根本上优于 Angular、Ember 以及 Knockout 的以 HTML 为中心方式。

React 以 JavaScript 为中心的设计 = 简单

Angular 2 沿用了 Angular 1 试图让 HTML 更强大的方式。所以你必须为循环或条件分支等简单的任务使用 Angular 2 的独特语法。例如,Angular 2 通过两种语法提供了单向和双向数据绑定,不幸的是,这两种方式十分不同:

  1. {{myVar}} //One-way binding
  2. ngModel="myVar" //Two-way binding

在 React 里,绑定标签不会根据这种决定而改变(它是在其他地方被处理,我同意它应该是这样)。在任何情况下,它看起来是这样的:

{myVar}

使用这种语法,Angular 2 支持内联主模板:

  1. <ul>
  2. <li *ngFor="#hero of heroes"
  3. {{hero.name}}
  4. </li>
  5. </ul>

上面的代码片段是 heros 数组的遍历。我有几个问题:

  • 通过一个程序星号来声明一个“主模板”是晦涩的。
  • hero 前面加 # 是声明一个本地模板变量。这个关键的概念看起来是不需要的鸡肋(如果想加,你可使用 var)。
  • 通过一个 Angular 式声明的属性 ngFor 为 HTML 添加循环的语义。

相比上面 Angular 2 的语法,React 的语法是纯粹的 JS:

  1. <ul>
  2. { heroes.map(hero =>
  3. <li>{hero.name}</li>
  4. )};
  5. </ul>

因为 JS 原生支持循环,React 的 JSX 可以简单地利用所有的 JS 能力来处理这些事,并使用 map、filter 等做更多的事。

读一下 Angular 2 Cheat Sheet。那不是 HTML,也不是 JavaScript。它是 Angular

为了阅读 Angular:需要学习一长串 Angular 式声明的语法。 为了阅读 React:只需要学习 JavaScript。

React 因它的语法和概念简单而独特。细想当下流行的框架或库的迭代循环:

  1. Ember: {{# each}}
  2. Angular 1: ng-repeat
  3. Angular 2: ngFor
  4. Knockout: data-bind=”foreach”
  5. React: JUST USE JS. :)

除了 React,其它框架都重新发明了JavaScript中本来就有而且非常简单的循环。这就是 React 的美妙之处,它利用 JavaScript 的能力来处理标签,所以不需要新的奇怪的语法。

Angular 2 奇怪的语法也沿用在 click 绑定:

(click)=”onSelect(hero)"

相反,React 再一次使用了普通的 JavaScript 语法:

onClick={this.onSelect.bind(this, hero)}

因为 React 包含了一个综合事件系统(Angular 2 也有),因此你不必担心像这样内联声明的事件处理的性能影响。

奢华的开发体验

JSX 的代码补全支持、编译时校验以及丰富的错误消息已经创建了非常棒的开发体验,并能减少输入节省时间。

大小问题

这有几个值得关注的框架或库压缩之后的大小:

Ember: 580k
Angular 2: 565k (759k with RxJS)
Angular 1: 324k
React + Redux: 204k

为了做一个真实的比较,我分别使用 Angular 2 和 React 来搭建 “Angular 2’s Tour of Heroes” 应用(我使用新的 React Slingshot 初学者工具包)。结果是?

Angular 2: 764k 压缩后
React + Redux: 216k 压缩后

因此简单比较后,Angular 2 的应用大小比 React + Redux 的应用要大 3 倍多。

我承认关于框架尺寸的担忧可能被夸大了:

大型应用很容易达到几百 K 的代码底线,不管它们是否使用了框架构建,结果往往会超过这个底线。开发者为了构建复杂的软件需要将其抽象化,无论这些抽象化来自框架还是手写,都会对应用造成负面影响。

即使你完全去掉框架,许多应用仍然后几百 K 的 JavaScript。—— 摘自 Tom 的 JavaScript Frameworks and Mobile Performance

Tom 的观点是对的。像 Angular 和 Ember 这样的框架是很大的,因为他们提供了应用之外的功能。

但是,我的疑问是:许多应用不需要将这些大框架全部放在里面。换句话说,越来越多的人拥抱微型服务、微型应用以及单独维护的程序包,React 让你可以根据你选择的必需的功能来限制你的应用大小。在一个有着 200,000 个 npm 模块的世界里,这绝对是强大的地方。

React 信奉 Unix 哲学.

React 是一个库。它恰恰是与那些大型的、全面的框架如 Angular 和 Ember 的思想相反。那么当你选择了 React,你可以自由选择当下最好的库来最优地解决你的问题。JavaScript 发展很快,而 React 允许你用更好的库来替换你的应用程序的局部,而不是等待和期盼你的框架做创新。

Unix 已接受住了时间的考验,原因是:

拥有小、可组装性、目的单一的思想的工具永远不会落伍。

React 作为焦点集中、可组装以及目的单一的工具被用在世界上许多大型的网站。这预示着它的未来前途光明(那就是说,Angular 也被用于许多大牌网站)。

对比汇总

Angular 2 相比版本 1 有很大的改进。新的组件模型比 V1 的指令容易掌握,它支持同构或万能的渲染,并且它使用了 virtual DOM 提供了 3-10 倍的性能提升。这些改进使得 Angular 2 同 React 非常具有竞争力。不可否认的是,它的功能齐全、执着的天性提供了一些明显的好处,减少了 “JavaScript 疲劳”。

但是,Angular 2 的大小和语法让我犹豫。Angular 致力于以 HTML 为中心,相对于以简单的 JavaScript 为中心模型的 React,Angular 更复杂。使用 React,你不需要学习框架的声明 HTML 语法例如 ngxxx。


Cory House 是“使用 React 和 Flux 构建应用程序”、 “Clean Code: Writing Code for Humans” 的作者,并在 Pluralsight 上发布了许多其他的课程。他是 VinSolutions 的软件架构师,并在全球培训软件开发者,像前端开发以及整理代码等软件实践等内容。Cory 是一名 Microsoft MVP,Telerik 开发专家,outlierdeveloper.com 创始人。

[译] Angular 2 VS. React: 血色将至的更多相关文章

  1. angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  2. ANGULAR 2 FOR REACT DEVELOPERS

    Now that Angular 2 is in beta, the time has come for us to drop everything and learn something new, ...

  3. 「译」Blazor VS React React / Angular / Vue.js

    原文作者: Christian Findlay 原文链接: https://christianfindlay.com/2020/06/04/blazor-vs-react-angular-vue-js ...

  4. (译) Angular运行原理揭秘 Part 1

    当你用AngularJS写的应用越多, 你会越发的觉得它相当神奇. 之前我用AngularJS实现了相当多酷炫的效果, 所以我决定去看看它的源码, 我想这样也许我能知道它的原理. 下面是我从源码中找到 ...

  5. 【译】参考手册-React组件

    react version: 15.4.2 React.Component 组件能够让你将UI拆分为多个独立自治并可重用的部分.在 React 中提供了 React.Component. 概述 Rea ...

  6. 【转】前端框架天下三分:Angular React 和 Vue的比较

    前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...

  7. 【repost】前端学习总结(二十三)——前端框架天下三分:Angular React 和 Vue的比较

    目录(?)[+]   前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Ang ...

  8. [译] 2017 年比较 Angular、React、Vue 三剑客

    原文地址:Angular vs. React vs. Vue: A 2017 comparison 原文作者:Jens Neuhaus 译文出自:掘金翻译计划 本文永久链接:github.com/xi ...

  9. React vs Angular 2: 冰与火之歌

    黄玄 · 3 个月前 本文译自 Angular 2 versus React: There Will Be Blood ,其实之前有人翻译过,但是翻得水平有一点不忍直视,我们不希望浪费这篇好文章. 本 ...

随机推荐

  1. C#将WebBowser控件替换为Chrome内核

    摘要 由于最近要做一个浏览器式的软件,其中有不少地方需要使用到jQuery和BootStrap,但是在C#中,默认的WebBrowser控件默认使用的是IE的core,而低版本的IE在JS加载上总是容 ...

  2. inference和learning

    一开始对于机器学习,主要是有监督学习,我的看法是: 假定一个算法模型,然后它有一些超参数,通过喂多组数据,每次喂数据后计算一下这些超参数.最后,数据喂完了,参数取值也就得到了.这组参数取值+这个算法, ...

  3. Linux系统下的程序开发之:命名规范

    2016年12月13日16:19:53 ------------------------------- 不能使用类似驼峰法的命名文件:dingdanOrder.html 这样的命名,会让系统无法找到目 ...

  4. C#语句1:选择语句一(if else )

    语句是指程序命令,都是按照顺序执行的.语句在程序中的执行顺序称为“控制流”或“执行流”. 根据程序对运行时所收到的输入的响应,在程序每次运行时控制流可能有所不同. 注意,语句间的标点符号必须是英文标点 ...

  5. Function.prototype.toString

    语法:fn.toString(indentation) 改方法返回当前函数源代码的字符串,而且还可对此字符串进行操作,比如: function num(){ }; var str = num.toSt ...

  6. java单例模式学习笔记

    最近一直在学习多线程,在学习过程中遇到了关于单例模式的多线程安全问题,内容如下: 一:首先什么是单例模式 单例模式具有的三要点: 一个类只能有一个实例: 必须是由它自己创建的这个实例: 它必须自行向外 ...

  7. Java 加密、解密PDF文档

    本篇文章将介绍通过Java编程来设置PDF文档保护的方法.我们可以设置仅用于查阅文档的密码,即该通过该密码打开文档仅用于文档阅读,无法编辑:也可以设置文档编辑权限的密码,即通过该密码打开文档时,文档为 ...

  8. python静态属性的理解

    python中并没有像 C语言 C++ java 那样定义静态属性的关键字 static 那么在python中是怎么做的呢? class A(object): name="lance&quo ...

  9. MySQL查询where条件的顺序对查询效率的影响

    看到有资料说,where条件的顺序会影响查询的效率,根据的逻辑是: where条件的运行是从右到左的,将选择性强的条件放到最右边,可以先过滤掉大部分的数据(而选择性不强的条件过滤后的结果集仍然很大), ...

  10. 360浏览器设置打开默认为chrome极速模式

    <meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核,增加标签: <meta name= ...