首先声明,框架不存在哪个更好,而是取决于哪个更适合团队和业务场景。

如果不知道从何比较,我们继续讲问题细化一下。

从框架的角度看:

1、它有多成熟,背后是谁?
2、它有什么特点?
3、它采用了什么体系结构、开发范式和模式?
4、它的生态系统是什么?

从团队角度看:

1、我和我的同事能够轻松学会这个工具吗?
2、是否满足项目需求?
3、开发体验如何?

利用这几个问题,您可以对任何工具进行评估,我们也将根据它来比较React和Angular。

Angular是一个成熟的、功能丰富的框架,而React只是一个UI组件库,将Angular与React进行比较并不完全公平。所以在讨论React时,我们会加入一些React生态,这样才能更客观。

成熟度

作为有经验的开发人员的一个重要技能是能够在已建立的、经过时间验证的方法和评估新前沿技术之间保持平衡。

1、框架是否有bug且不稳定。
2、是否会被维护者突然放弃。
3、是否有大型论坛和社区支持。

React和Angular无疑在这方面都是佼佼者。

React由facebook开源并维护,并且很多大公司都已经使用。它也是GitHub上最受欢迎的项目之一,拥有大约7.4万star。

Angular(2及以上)的出现比React年轻很多,但如果算上它的前身AngularJS的话,情况就会有所改观。它是由google维护,用于AdWords 和 Google Fiber。由于AdWords是谷歌的关键项目之一,在这方面投入了很多,所以Angular的前景也不错。

特性

前面提到过,Angular集成了比React更多的特性。这可能是一件好事,也可能是一件坏事,这取决于你如何看待它。

这两个框架都有一些共同的关键特性:组件、数据绑定和与平台无关的渲染。

Angular

Angular提供了许多现代web应用开箱即用所需的特性:

1、依赖注入
2、模板
3、@angular/router 路由
4、@angular/http Ajax请求
5、@angular/forms 构建表单
6、CSS组件
7、XSS保护
8、单元测试组件的实用程序

当您不想花时间选择库时,这些开箱即用的特性是非常方便的。然而,这也意味着即使你不需要某些特性,会带来一些困扰,而替换它们通常需要额外的工作。

React

相对来说,React要简单很多:

1、无依赖注入
2、模板
3、XSS保护

并不多。这可能是件好事。这意味着您可以根据需要自由选择要添加的库。不好的是,你必须自己做出这些选择。

一些常用的与React一起使用的库有:

1、React-router 实现路由

2、Fetch (或 axios) 发起ajax请求

3、各种CSS封装技术

语言编程范式

React

在考虑React时,会想到几个重要的东西: JSX、Flow和Redux。

JSX

对于许多开发人员来说,JSX是一个有争议的话题:有人喜欢它,另一些人认为它是一个巨大的倒退。React没有采用分离标签和逻辑的方法,而是决定使用一种类似xml的语言将它们组合在组件中,允许您在JS代码中直接编写标签。

虽然将标签与JS混合的优点可能存在争议,但它有一个无可争议的优点: 静态分析。如果JSX编写出现错误,编译器会高亮提示。这有助于避免很多低级错误。

Flow

Flow是一个JavaScript的类型检查工具,也是Facebook开发的。它可以解析代码并检查常见类型错误,如隐式转换或空引用。

与TypeScript不同之处:它不需要迁移到一种新的语言,也不需要注释来进行类型检查。在Flow中,类型注释是可选的,用来向分析器提供额外的提示。如果您希望使用静态代码分析,但又希望避免重写现有代码,那么这使Flow成为一个很好的选择。

延伸阅读 利用Flow写更好的代码

Redux

Redux提供了一种优雅的方式管理应用全局状态。它受Flux的启发,同时做了一些简化。Redux的关键思想是,整个应用的状态由单个对象表示,对对象的修改通过reducer。reducer是纯函数,与Component分开实现。这样可以更好地分离关注点和测试。

对于一个简单的项目,那么引入Redux可能过于复杂,但是对于中型和大型项目来说,它是一个更好的选择。

Redux在Angular中的实现

这三个特性都可以极大地改进您的开发人员体验: JSX和Flow允许您快速发现潜在错误,Redux将帮助您为项目实现一个清晰的结构。

Angular

Angular也有一些有用的东西:TypeScript和RxJS。

TypeScript

TypeScript是一种建立在JavaScript之上的新语言,由微软开发。它是JavaScript ES2015的一个超集,包含了该语言新版本的特性。您可以使用它而不是Babel来编写最新的JavaScript。它还提供了一个非常强大的类型系统,可以通过使用注释和类型判断的组合来静态分析代码。

还有一个好处。TypeScript受到Java和. net的影响,所以如果你的开发人员有这些语言的背景,他们可能会发现TypeScript比普通的JavaScript更容易学习。尽管Angular是第一个采用TypeScript的主要框架,但它也可以与React一起使用。

延伸阅读: TypeScript简介:Web的静态类型

RxJS

RxJS是一个响应式编程库,允许更灵活地处理异步操作和事件。它是观察者和迭代器模式与函数式编程混合在一起的组合。简单来说,它将一切数据,包括HTTP请求,DOM事件或者普通数据等包装成流的形式,然后用强大丰富的操作符对流进行处理,使你能以同步编程的方式处理异步数据,并组合不同的操作符来轻松优雅的实现你所需要的功能。

Angular在HTTP模块内部中也采用了这个库。当您执行HTTP请求时,它将返回一个Observable ,而不是Promise。虽然这个库非常强大,但也非常复杂。要掌握它,您需要了解不同类型的Observable 、Subjects以及大约100种方法和操作符。哎呀,仅仅是HTTP请求似乎有点过分了!

RxJS在处理诸如web sockets的连续数据流时非常有用,但是对于其他任何东西来说,它似乎都过于复杂。不管怎样,在使用Angular的时候,你至少具备一些基础知识去学习它。

延伸阅读:使用RxJS的函数式响应式编程

TypeScript是提高项目可维护性的一个很好的工具,尤其那些拥有大量代码或者复杂的领域/业务逻辑的项目。用TypeScript编写的代码可读性好,更容易理解。由于TypeScript已经被Angular采用,我们希望看到更多的项目使用它。另一方面,RxJS似乎只在某些情况下是有益的,应该谨慎采用。否则,它会给您的项目带来不必要的复杂性。

生态圈

开源框架的伟大之处在于围绕它们创建生态圈。这些工具甚至比框架本身更有帮助。让我们看看与每个框架相关的一些最流行的工具和库:

React

Create React App

Create React App是一个CLI工具,用于快速创建新项目。通过它库生成一个新项目、启动一个开发服务器并打包。它使用Jest(来自Facebook的一个相对较新的测试运行程序)进行单元测试,它有自己的一些优秀特性。还支持灵活的配置如使用环境变量、用于本地后端服务代理、Flow和其他特性。

React Native

React Native是Facebook开发的一个使用React创建原生移动应用的平台。与生成混合应用Ionic不同,React Native生成真正的本地UI。它提供了一组标准的React组件,这些组件与它们的本地对应组件绑定在一起。它还允许您创建自己的组件,并将它们绑定到用Objective-C、Java或Swift编写的原生代码。

Material UI

还有一个material design库可供React使用。与Angular的版本相比,这个版本更加成熟,可用组件的范围也更广。

Next.js

Next.js是一个实现React应用程序服务器端渲染的框架。它提供了一种灵活的方式,在服务器端完全或部分渲染,将结果返回给客户机并在浏览器中执行。它试图使创建通用应用程序的复杂任务尽可能地简单,因此设置被设计为尽可能地简单,为项目的结构提供尽可能少的新原语和需求。

MobX

MobX是管理应用程序状态的替代库。它不像Redux那样将状态保存在一个不可变存储中,而是鼓励您只存储所需的最小状态,并从中派生其他状态。它提供了一组修饰符来定义可观察的对象和观察者,并将响应逻辑引入您的状态。

延伸阅读: 使用MobX管理JavaScript应用状态

Angular

Angular CLI

现代框架的一个流行趋势是使用CLI工具帮助您构建项目,而不必自己配置构建。Angular为此有Angular CLI。它允许您使用几个命令生成运行一个项目。所有负责构建应用程序、启动开发服务器和运行测试的脚本都隐藏在node_modules中。您还可以使用它在开发过程中生成新代码。

Ionic 2

Ionic 2是开发混合移动应用程序的流行框架的新版本。它提供了一个与Angular 2完美集成的Cordova容器,以及一个漂亮的material组件库。使用它,您可以轻松地设置和构建移动应用程序。如果你更喜欢混合应用而不是本地应用,这是一个不错的选择。

Material design components

如果你是Material design的使用者,你会很高兴听到Angular有一个可用的Material design库。目前,它还处于起步阶段,还略显稚嫩,但最近已经收到了很多的贡献,所以我们可能希望事情能尽快得到改善。

Angular universal

Angular universal是一个种子项目,用于服务器端渲染。

@ngrx/store

@ngrx/store是一个受Redux启发的Angular的状态管理库。

学习曲线

选择新技术的一个重要标准是它是否容易上手。当然,答案取决于很多因素,例如您以前的经验以及对相关概念和模式的熟悉程度。但是,我们仍然可以尝试评估在开始使用一个新框架时需要学习的知识。假设您已经了解ES6+、构建工具,那么让我们看看您还需要了解什么。

React

使用React,首先遇到的是JSX。对于一些开发人员来说,编写JSX看起来有些笨拙。然而,它并没有增加那么多的复杂性——它只是一种表达式(实际上是JavaScript)和一种特殊的html类语法。您还需要学习如何编写组件、使用配置工具和管理内部状态。您不需要学习任何新的逻辑结构或循环,因为所有这些都是纯JavaScript。

任何一门技术首先从 hello-world 开始

Router 是单页应用必不可少的部分。

Redux

我们真的很惊讶开始使用React这么简单。即使拥有后台开发背景和缺少前端开发经验的人也能快速掌握。过程中您可能遇到的错误消息通常提供了关于如何去解决。最难的部分可能是为需要的功能找到合适的库,但是构建和开发过程非常简单。

Angular

学习Angular将向您学习比React更多的新概念。首先,您需要熟悉TypeScript。对于具有静态类型语言(如Java或. net)经验的开发人员,这可能比JavaScript更容易理解,但对于纯JavaScript开发人员,这可能需要一些努力。

框架本身有很多要学习的内容,从模块、依赖注入、装饰器、组件、服务、管道、模板和指令等基本概念,到更高级的主题,如更改检测、区域、AoT编译和Rx.js。 所有内容都可以在文档里找到。Rx.js是一个很重的话题,更多细节需要在官网学习。

Angular门槛要高于React

一个框架完成所有项目?

一旦你为一个项目选择了一个框架,你就会被吸引去为即将到来的项目使用完全相同的技术栈。不!尽管保持技术栈统一是个好主意,但不要每次都盲目地使用相同的方法。在每个项目开始前,花一点时间思考。也许在下一个项目中,答案会有所不同,或者情况会有所改变。

此外,如果你有机会用不熟悉的技术栈做一个小项目,那就去做吧。这些实验将为你提供宝贵的经验。

保持开放的心态,从错误中学习