AngularJS深入比较挑选 Angular 还是 React

AngularJS 1

自身该选择 Angular 还是
React?现在JS框架两胜的布局被许多开发者选择起来颇纠结。无论你是一个方揣摩什么入门的新手,还是一个也产单品类选择框架的设计者,或是一个架构师为商家举行老之统筹,你都产生或打学是主题中受益。

为了省去而的时刻,提前做出如下宣示:在哪个框架还好之题材及,本文不会见被你一个家喻户晓的答案。但是,不思量另外类似主题的稿子。我莫能够告诉你答案,是因相同码特定的技能是不是顺应您的开条件暨运状况在多种要素。

出于无克直接回是问题,我们会尝试从另外的方开展分解。我们拿会透过比
Angular(2+,不是镇版本的AngularJS)和 React
来演示在少独品种一般的框架中,如何选并调节适合自己条件之框架。你懂的,“授人以鲜鱼勿使授人以渔”。这样以事后,当就两头为还好之框架取代的时候,你可知还用同的思绪做出极端优良的选项。

开始

当选择外工具之前,你都待报两单简单的题材:“它自身是好的工具为?”,“它是否符合自身的利用状况?”他们自并未呀意义,所以你要将及时有限个问题随时在脑海中。好吧,问题可能无是那的略,所以,我们品尝把他们说明成有稍微的问题。

工具本身的题材:

  • 它的成熟度如何跟背后支持她的凡孰?
  • 它们起安的风味?
  • 她以什么的架,开发范式,和模式?
  • 围绕她的生态圈怎么样?

自家反省的问题:

  • 本身与自我的同事能否轻松的学会如何使用其?
  • 它们可自身之类别为?
  • 它的支出体验如何?

于是这无异于多重题材,你可以评估外工具,而我辈拿以 Angular 和 React
为底蕴进行比。

还有另外一码事我们需要征。严格来说,拿 Angular 比较 React
不是意公平的,因为 Angular 是一个秋、功能齐全的框架,而 React
只是一个 UI 组件库。为了弥补差距,我们讨论 React
的时节,包含了有些它经常利用的库。

完备性

用作一个训练有素开发者的重中之重力量就能够在原来技术及前沿技术之间维持平衡。惯例是,当使用还不成熟之初工具时,应留神有风险:

  • 工具或出通病而不平稳
  • 她恐怕会见让供应商意外之废
  • 要你得救助,可能没一个巨型的知识库或者成熟之社区

React 和 Angular 都出良的身家,所以打当时上头来拘禁,我们是从未有过必要担心之。

React

React 是由于 Facebook 开发并保障的,并且为此在了她们友善之出品线上, 包括
Instagram 和
WhatsApp.
它已面世约 3年半 了,
所以它就休到底新了。它吧是Github上绝流行的库有 ,在编著本文的时节,它大概有60,000基本上只
star。听起是。

Angular

Angular(2及以上)出现的比 React 晚一点,但是要算上事先的本
AngularJS,情况便转头了。它最主要由于 Google 维护以为此当AdWords 和
Google
Fiber 产品上,很显他们对之非常有信心,显然它们不会见缺失日内没有。

特性

像前文提到的,Angular 比 React
多些开箱即用的表征。这是产生两面性的,取决于你对她的角度。
两者的中坚力量是一般的:组件,数据绑定和平台无关的渲染

Angular

Angular 提供了重重现代 web 应用所要的开箱即用底特点。一些正经特性是:

  • 依注入
  • 坐 HTML 的扩张版本也根基实现模板
  • 由 @angular/router 提供路由于功能
  • 利用 @angular/http 实现 Ajax 请求
  • 使用 @angular/forms 创建表单
  • CSS 组件化
  • XSS 防御
  • 单元测试组件

当您协调无思量花时间错开选类库的时,有这么多开箱即用底特色是不行有利之。
而及时为意味你吃它束缚于了一道,即使你莫欲其。并且,通常替换其需付再多之极力。例如,考虑到因注入可以为此引入来顶替,我们相信使用它的有些之花色相对于收益会交再多之开。

React

使 React,你的入门更加简明。如果我们一味看 React,那么单纯生:

  • 不论靠注入
  • JSX模板,通过 JavaScript 实现的类 XML 语言
  • XSS 防御
  • 单元测试组件

特点不多,未必无是好事。这意味着根据要求选择第三方类库的时光,你发出重多之自由度。不好的凡你只能自己做出抉择。经常同
React 一起行使的盛行类库有:

  • 路由 React-router
  • HTTP请求 Fetch (or axios)
  • CSS 封装 wide variety of
    techniques
  • 外加的单元测试工具 Enzyme

俺们富有了增选类库时之自由。这叫咱们得以因每个类别之一定需求来调动我们的技术栈,并且不会见出大高的学习成本。

言语、范式与模式

回首一下点滴单框架的特征,让自家来拘禁一下生什么流行的高档概念。

React

当研究 React 的时段,有一对至关重要的定义涌上衷心:JSX,Flow,Redux

JSX

很多开发者对 JSX 持不同之意见:有的人欣赏她,有的人觉着当下是技术的巨大退步。不是比照内容和逻辑分离之传统办法,React
决定用同样种类 XML 语言将两者组合在一起放到组件中,这样你得于 JavaScript
代码中直接编写内容标记。

尽管如此关于标记和逻辑混合写法是话题是发出争执的,但是她产生一个明了的优势:静态分析。如果您的
JSX
标记中有错误,编译器不会见保持沉默,它见面报出这个似是而非。这能够帮助我们立马发现拼写错误和其它部分傻的错。

Flow

Flow为是出于 Facebook 开发的如出一辙放缓 JavaScript
的档次检查工具。它会分析代码并检查有健康的品类错误,像隐式转换或空引用。

勿像所有相似目的的
TypeScript,它不待您搬到一个新语言并且经过注释你的代码来展开路检查。对
Flow
来说,类型注释是可选的,可以看作分析器的附加提示。如果你想就此静态代码分析,但还要休思量再次写就有的代码,对这要言
Flow 是一个对的选料。

[壮大阅读: Writing Better JavaScript with
Flow]

Redux

Redux 是一个清晰的管住状态变化之类库。它受 Flux 的启发,但是做了有的简化。Redux
的核心思想是故么对象来表示行使的上上下下状态,该目标为叫作
reducers,通过函数实现。reducers
是纯函数,通过组件分别实现。这会更好之姣好关注点与测试分离。

假定您方做一个简便的种类,引入 Redux
可能会见愈来愈复杂,但是针对备受巨型项目以来,它是一个那个好之抉择。这个类库变得挺流行,也可就此当
Angular 项目受到实现。

负有的老三宗特征可明确的增长你的支付体验:JSX 和 Flow
允许你飞的一贯潜在错误,Redux 帮助您增加建筑一个整洁的类型架构。

Angular

Angular 也闹一些妙趣横生之东西,叫 TypeScript 和 RxJS。

TypeScript

TypeScript 是一模一样门户在 JavaScript
基础及,由微软开的初语言。他是 ES2015
的超集,并且带有了JS语言即将到的新本子的一部分表征。你可知因此它代替 Babel
来编排最新的
JavaScript。它吧提供了一个尽强大的色检查系统,能够透过注释和花色推理静态分析你的代码。

还有一个一定微妙之优势。TypeScript 受 Java 和 .NET
的熏陶十分死,所以若开发者有那些语言背景,他们会发觉 TypeScript 比原生
JavaScript 学起来再次自在(注意我们哪根据个人情况择工具)。虽然
Angular 是第一单使用 TypeScript 的严重性框架,但她与 React
用在并,也是行之。

[扩大阅读: An Introduction to TypeScript: Static Typing for the
Web]

RxJS

RxJS 是一个响应式的编程类库,允许对异步的操作及事件召开更加灵敏的处理。它是用函数式编程把观察者模式与迭代器模式混合的组合体。RxJS
允许而拿全路都作是一个一连的流值,并且于此之上实现各种各样的操作,像射,过滤,拆分或合并。

该类库被 Angular 的 HTTP 模块采用,也于有些里用。当你尽一个 HTTP
请求,它回到一个 Observable 替代通常的
Promise。虽然这库极其强大,但其吗一定之错综复杂。想如果通它,你用掌握不同类别的
“观察者”,“主题”
,以及过剩种方法和操作符。呀,这看起只是履行
HTTP 请求的平等沾小工作。

当用多连的多少流方面的工作的时,比如 web sockets,在这种景象下
RxJS 是十分实惠之,然而,这看起还十分复杂。无论如何,当以 Angular
的经常,你至少要对准是而产生基本的询问。

[扩充阅读: Introduction to Functional Reactive Programming with
RxJS]

咱俩发现以增强项目之可维护性上,TypeScript
是一个强劲的工具,尤其是那些代码量巨大或者工作逻辑十分复杂的门类。用
TypeScript 写的代码更爱看和跟进。虽然 Angular 已经使了
TypeScript,我们还期待重新多之种下其。RxJS,换句话说,看起就以一定情景下发出因此而要小心用。否则,它会被你的类别拉动去难以想象的复杂度。

生态圈

至于开源框架很关键之政工是围绕其一旦衍生出底家伙数量。有时候,那些家伙还于框架本身还有因此。我们来拘禁一下当即片独框架最风靡的家伙及类库。

Angular

Angular 命令行工具

当代框架的盛行趋势是经过一个命令行工具来帮衬初始化项目,而不要亲自安排。Angular
的工具叫 Angular
CLI。它同意通过同样层层之命令来扭转和起步项目。所有与创造以,启开发环境,跑测试有关的台本还于高超的隐形于叫 node_modules 的文书夹着。你吗会当付出中经它们那个成新的代码。这叫创建新品类特别之简。

[壮大阅读: The Ultimate Angular CLI
Reference]

Ionic 2

Ionic
2 是如出一辙放缓就此来开移动端混合使用之盛框架的初本子。它提供了一个健全集成了
Angular 2 的 Cordova
容器,和一个美的组件库。通过其,可以轻松的创建移动端采用。如果对比原生应用还倾向于混合使用,那么其将是一个不错的选择。

Material design 组件

假定您热爱于 material design,你也许怪欢喜听到 Material
组件库可用来
Angular。虽然眼前抱了众支持,但那个还处在前期阶段又有点简陋,所以,我们盼望尽早底明天会有所改善。

Angular universal

Angular
universal 是一个粒项目,被用来创造支持服务端渲染之档次。

@ngrx/store

@ngrx/store 是受 Redux 启发,利用 pure
reducers 基于状态突变,用于 Angular 状态管理之类库。通过集成
RxJS,可以使用生成侦测策略及更好之特性。

[推而广之阅读: Managing State in Angular 2 Apps with
ngrx/store]

此间有重多的类库与工具 the Awesome Angular
list.

React

Create react app

Create-react-app 是用于快速创建
React 项目之命令行工具。跟 Angular CLI
相似,它同意非常成一个初类型,启动开发服务以及打包。它用 Jest 做单元测试,一款款来自于
Facebook
的可比新的测试工具,本身来一些好的特点。它呢支撑通过环境变量做灵活的使分析,本地环境之后端代理,Flow,和另特色。更多内容请查看 introduction
to create-react-app

React Native

React Native 是由于 Facebook
开发之,用 React 编写移动端原生应用之平台。不像供混合使用之
Ionic,React Native
提供真正的原生界面。它提供了千篇一律模拟用于绑定原生控件的正经 React
组件。也允许下Objective-C,Java 或
Swift等原生代码编写的组件绑定到其上。

Material UI

相同,这是用来 React 的 material design
组件库。跟 Angular
的本对照,这个更是成熟而就发出那么些可用之零件。

Next.js

Next.js 是用于 React
应用在服务端渲染的框架。它提供了一个活的计于服务端全部或有渲染应用,返回结果为客户端并连续维持以浏览器被。它尝试成功同样宗复杂的天职,尽可能简单的创一个通用应用,所以设置为为设计之玩命简单。

MobX

MobX 是一个管制下状态的可选库。代替在一个单一稳定之堆栈着保存状态,就比如
Redux
所召开的,它鼓励而尽量存储所不可不的无限小状态而演绎出剩下的。它提供了同样仿照修饰符来定义可见性和观察者和介绍状态的逻辑变化。

[恢宏阅读: How to Manage Your JavaScript Application State with
MobX]

Storybook

Storybook 是 React
的零部件开发条件。它同意快速的创始单个应用来展示你的组件。在这个基础及,它还提供了森零部件来记录,开发,测试和计划而的零部件。在应用的其他部分,我们发现她于独开发组件上是无比有用之。在上一致首稿子中,你能模拟到 关于
Storybook
的再多学问。

此处出双重多之类库与工具 the Awesome React
list.

接受度,学习曲线与付出体验

择相同件新技巧之要害标准就是上学她发出多的好。当然,答案在很多因素,比如您前面的阅历,熟悉相关的概念与模式。不管怎样,给一定一个框架我们依然能够评估必须学的新物的数码。现在,我们借要你已经了解
ES6+,构建工具与所有的这些,让我们看您还必须要明白啊。

React

运 React 遇到的率先独障碍就是
JSX。对有些开发者而言,它形容起颇为困难,然而,它并不曾加极其多的扑朔迷离;就如真的的
JavaScript 表达式,和异样的类 HTML
语法。你呢需上怎样编写组件,用性来布局和管制中状态。你无待上外新的逻辑结构和巡回,因为所有的这些还是原生
JavaScript。

官方教程凡入门
React
的出色资源。一旦你完成了其,那么始于熟悉路由于。React
路由 v4 本可能发一些苛与特别,但不论需担心。使用 Redux
需要变更范式,学会用类库建议之艺术成就已熟悉的天职。免费视频教程 Getting
Started with
Redux 能够拉您快速熟悉一些为主概念。根据项目之尺寸及复杂度你恐怕只能找跟上一些格外的类库,这恐怕是比较吃力的片,但以即时事后,一切都见面顺风顺水。

俺们很惊喜入门 React
是这样的简练。甚至发后端经验及前端经验少的总人口且能高效上手。有完美清晰的缪提示,并且提供了怎样缓解潜在问题之讲说明。最麻烦的一些或就是也所需要功能寻找合适的类库,但构建和开发一个动真的好简。

Angular

学 Angular 需要比较 React 了解又多之定义。首先,你用熟悉
TypeScript。对于有静态类型语言比如 Java 或 .NET 使用更的开发者来说要较
JavaScript 更好明,但针对纯粹 JavaScript
开发者而言,可能要付一些着力。

框架背身就发生为数不少主题需要上学,从基础的开始像模块、依赖注入、装饰器、组件、服务、管道、模板与指令,到高级主题像变侦测、区块、AoT编译和
RxJS。这些是文档遭受都好找到。RxJS
本身就是那个繁重的主题,在官方网站直达发双重多之描述。虽然于基础水平达到运用她于便于,但若是用高级主题会十分之繁杂。

总之,我们注意到以 Angular 要于 React
难得几近。眼花缭乱的新定义对新手来讲十分底困惑。即使你早就入门了,你为用随时注意像
RxJS
订阅管理,变化侦测性能和不解之物(是的,这是发源文档实际建议)。我们会时时遇上麻烦理解的错误信息,所以只能经常找它们并祈求得到一个精准的匹配。

当时看起好像我们更倾向被 React,的确是。结合我们采用同一大小及复杂度的
Angular 和 React 项目,对新手开发者进行培养的经历,React
更加的顺滑。但是,像本人前所说之,这取决于多种因素,可能针对您来说会有所不同。

契合度

卿恐怕都注意到每个框架都发它们本身一样名目繁多的成效,有好之啊产生特别的。但在一定条件外的分析已完成而没有会于挑选谁框架达成让来答案。为了做出决定,你只能于君自己种之角度来试它。这些事情用而自己来举行。

今,结合你的类型试着回下面这些题目,顺便想想是不是顺应有关这半独框架而曾经拟到的特点。列表可能还未全,但是相应足够开始讨论了:

  1. 型产生多特别?
  2. 设若保障多久?
  3. 负有的职能都被提前定义好或者你期望灵活一些?
  4. 假使所有的表征都明白,你待什么意义?
  5. 运场景以及作业逻辑是不是复杂?
  6. 本着如何平台?Web端,移动端,桌面端?
  7. 是否要劳务端渲染? SEO 重要么?
  8. 是否需要处理过剩实时事件流?
  9. 乃的团伙发出多生?
  10. 开发者的经历和她俩的知背景如何?
  11. 是不是出一对君想就此底备组件库?

假如您打算启动一个格外品种,你或许想最小化做出不当选择的风险,首先考虑做一个概念性的说明产品。使用框架,通过简单方法,试着实现项目之片段根本特性。这便不见面花你最多之时刻,但会吃您有发价之更来验证关键技术需求。如果您对结果满意,你可连续开展完的付出。如果无好听,从长期来拘禁其实节约了你的岁月。

一招绝?

假如而吧而的档次选择了一个框架,你拿会当对接下的类别受到不禁的想用同样的技术栈。不要这么。虽然保持技术栈统一是一个不易的令人瞩目,但绝不总是用同一的艺术。每一个档起前,花点时间更回复同样总体上面的题材。可能对下只品类而言,答案就未一致了。另外,如果你想就此非熟识的技术栈做一个略带项目,做吧。这些经历会带来吃您宝贵的涉。开放而的思,并且由漏洞百出中频频学习。在某一样点,一桩特定的艺会受您自然而然的认为对。

此文由同行 Jurgen Van de
Moere 和 Joan
Yin 校对. 谢谢 SitePoint
所有的校人员,你们为 SitePoint 的内容更是的佳!

* *

 

关心微信还多读书材料分享!

AngularJS 2

相关文章