语言 Chinese, Simplified

SEO Title

Angular vs. React vs. Vue: A 2018 Comparison (Updated)

2018年的Angular、React和Vue

不可否认的事实是，web开发和定制软件开发的虚拟世界在过去十年中一直处于蓬勃发展的技术进程中。说到前端，JavaScript一直在主导这一进程。

这种流行带来了大量的JavaScript框架。本指南的目的是深入了解两个如此广泛使用的框架——Angular和Vue——以及一个库——React。

这篇文章写起来很有挑战性，但是我们确信您在过去一定遇到过处理JavaScript框架的问题，而且很有可能，您一定对使用哪个框架感到困惑。

如果你在Angular、React和Vue之间犹豫不决，我们可以帮助你。

本指南分为以下部分-

1. 关于框架
2. 框架的重要性
3.框架的成熟度
4. 框架的未来
5. 社会质素
6. 基本的编程概念
7. 易于使用大型应用程序
8. 比较性能

好了，让我们切入正题，比较下面的三个。

1. 关于框架

Angular:

Angular是一个基于TypeScript的JavaScript框架，由谷歌开发和维护。其他使用Angular的知名公司有:Wix、Weather.com、Forbes等。

React:

React被称为“构建用户界面的JavaScript库”，是由Facebook开发和维护的。其他使用React的知名公司有:Uber、Twitter、Netflix、沃尔玛等。

Vue:

2014年由前谷歌员工Evan You开发并发布。使用Vue的知名公司有:阿里巴巴、任天堂、GitLab等。

虽然Angular和React已经成为大公司的热门产品，但Vue是一个独力的团队，由于它部署的模型-视图-视图-模型(MVVM)架构模式，它迅速蹿升到时尚的地位。

Model-view-view-model (MVVM)

由于MVVM促进了开发过程中的图形用户界面与业务逻辑或分离结束逻辑的分离，因此Vue正迅速成为构建交互式web应用程序接口的首选语言。

这些框架的重要性

Angular:

简单和快速:MVC框架，能够执行复杂的任务和建立依赖之间的控制器和模板
DOM有标记:在Angular中，标记直接定位在HTML记录中。这个流看起来是这样的:HTML → > DOM — ->> Engine
依赖处理:Angular在处理依赖方面非常出色。可以将应用程序隔离到独立的模块中，这些模块之间可能存在条件，也可能不存在条件。
简单易读的角模板,主要部署HTML标记👇👇👇。

Easily readable Angular templates

React:

单向的:单向的数据流最终会使代码更加稳定。
虚拟DOM:虚拟Dom的存在有助于提高用户体验和开发速度。下一页中的代码片段。
开放源码:全世界的开发人员都为这个框架做出贡献。像批处理和修剪这样的特性已经成为了社区的贡献。
React更好的开发速度👇👇👇

Better Development rate with React

Vue

语法:Vue部署的语法应该是简洁流畅的。例如,@keyup.enter.preven = “do Stuff” 可以处理任何需要的事件。
学习曲线:在Vue项目中引入新的开发人员非常容易。使用单文件组件，学习曲线很平滑，可以很容易地检查代码库。
Swift:开发者可以通过引用ring to快速浏览任何项目的存储关于模板、CSS、数据模型、生命周期钩子、映射的Vue提取、监视器等的.Vue文件。
声明式模板:简单的HTML模板，无需了解其他编程语言即可阅读。下一页中的代码片段。
可读的HTML模板，即使不了解其他语言👇👇👇

Readable HTML templates

框架的成熟度

选择正确的框架是JavaScript项目成功的关键。在做决定时，重要的是要考虑系统是帮助了新元素的添加还是使其复杂化了。当我们谈到这些框架的成熟度时，可以通过GitHub社区的响应来衡量。以下是一些重要的数字，可以帮助你正确看待问题:

Github *Statistics at the time of compilation

*编制时的统计资料

NPM Trends提供了以下图表，显示了在过去两年中，这些框架的NPM包的下载数量。

npm package of frameworks in the past two years

如果将Github明星绘制在图表上，就会出现一个有趣的趋势。

Github stars on trend surfaces

其他重要的因素

Angular

每6个月更新一次
每一版本的弃用期为6个月
从Angular 4开始的长期支持版本
简单的更新过程
捆绑提供的完整框架

React

稳定的API，如Facebook的设计原则所描述的那样
脚本可以从当前的API转移到新的API。例子——react-codemod
简单的迁移
平滑升级
稳定的主版本独立但快速移动的库

Vue

在小应用程序中在在版本升级的时候提供类似的API
协助升级migration-helper-tool
在迁移大型应用程序的版本时遇到的问题

很明显，Vue的人气一路飙升，已经超过了Angular，而且很快就会超过React。此外，这三个框架都在MIT许可下可用。虽然参与React开发的核心开发者的数量还没有正式公布，但是Angular在团队页面上列出了37个贡献者，Vue列出了22个核心开发者和14个社区合作伙伴。

要得出结论，Angular和React是成熟的框架，因为它们被大规模采用了。作为一个新兴的市场参与者，Vue虽然还处于发展阶段，但在知名度上已经处于领先地位。

框架的未来

前景:

为了更好地判断这些技术的发展方向，让我们来看看它们目前的状态。根据Stackoverflow 2017年的调查，JavaScript仍然是最受网络开发者欢迎的语言。

社区的质量

Angular

它拥有一个庞大的用户社区，仅上个月的下载量就在150万到200万之间。此外，GitHub上超级活跃的社区意味着你总会有人帮助你解决遇到的问题。可以探索一系列与不同版本的Angular兼容的解决方案，包括来自资深开发人员的建议。

React

仅过去一个月，它的下载量就达到了1000万次。React得到了Facebook、WhatsApp和Instagram等巨头的支持，也不缺少经验丰富的开发人员的帮助。和Angular一样，React too也吹嘘自己拥有一个令人印象深刻的GitHub社区，在那里人们随时准备伸出援助之手。尽管如此，值得注意的是，React建议使用JSX，它是使用XML语法扩展的JavaScript的修改版本。如果您以前没有使用过JSX，那么由于它的复杂性，这可能会在一开始就造成问题。所以要做好主动依赖社区帮助的准备。

Vue

Vue的社区被认为比React和Angular的社区小得多，因为它是最新的市场参与者。然而，一两年内情况可能会大不相同，因为Vue很可能最终成为最流行的JavaScript框架。

容易找到开发人员

在招聘和寻找合适的人才方面，情况发生了一些变化。

虽然它是开发人员的热门选择，但是如果您使用React，要找到一个有才华的开发人员并不容易，因为找到一个可以修改JSX的开发人员是一项挑战。然而，有一些外包软件开发公司专门从事Javascript和React开发

使用HTML模板被证明相对容易得多。

因此，如果你打算使用Angular或Vue，你可以选择雇佣那些能够快速学习这些框架的优秀HTML开发人员。直接找到一个有才华的Angular或Vue开发人员并不是什么大问题，因为学习曲线是从HTML衍生而来的，而HTML在市场上已经拥有了丰富的人才库。

如果你已经有了一个内部的开发团队，或者对面向对象的开发背景更感兴趣，那么Angular就是最合适的选择。

Angular、React和Vue的基本编程概念

语言:

每个框架使用不同的脚本语言。

Angular使用了TypeScript。TypeScript是微软开发的一种流行的开源编程语言。它积极地涉及到一些关键的概念，比如静态类型，它提供了一些特定的功能，包括自动重构、跳转到定义等等。
react将其重点放在了JavaScript ECMAScript 6 (ES 6)上，简单地说，这是JavaScript的一个版本。
类似地，Vue使用了JavaScript ES 5。

模板:

要选择正确的框架，您需要弄清楚您是想使用JSX还是HTML。

Angular和Vue都是基于标准的HTML模板和组件，它们简化了结构和代码重用。另一方面，对于新开发人员来说，JSX可能是一个巨大的问题。让我们看看每个-JSX的优点和缺点:

JSX优点缺点

JSX在代码完成和编译时更好
由于打字错误引起的错误很容易被发现，因为React不会编译打字错误并打印打字错误所在的行号。
React将HTML放到JavaScript中，这更好，因为JS总是更强大
因为它是JavaScript + XML + HTML的组合，所以对新开发人员来说是一个障碍
与HTML模板相比，具有复杂的特性
UI模板和内联JavaScript逻辑之间没有界限

HTML优点缺点

将视图层与框架的其余部分区分开来
能够试验各种技术以获得最佳性能
视图的动态和静态部分的清晰分离
与JSX相比，调试过程更加困难
基于模板的方法，而不是组件

易于使用大型应用程序

各自框架的功能根据需要开发的应用程序的大小而不同。

许多开发人员认为Angular 3不适合处理大型复杂的应用程序。如果复杂性较低，那么它被证明是完美的，但是随着应用程序规模的扩大，问题开始增加。

例如，游戏应用程序通常很大，并且涉及到DOM操作。此外，在涉及太多数据绑定的应用程序中，如果表数超过2500,Angular 1就会变得很慢。

另一方面，如果你打算扩大这个应用程序的规模，React被证明是最好的选择。这一点得到了证实，Facebook、WhatsApp和Instagram都在使用React，而且它们都是全球范围内的大型应用程序。使用React可以轻松开发具有服务器端呈现的可维护架构。

开发人员还认为Vue在处理大型应用程序时很有帮助。框架在学习曲线上遵循了精益的方法，这马上就超过了Angular这样的框架的复杂性，后者常常被证明是新开发人员和大型应用程序开发人员难以接受的。

Performance Benchmark Image

关于渲染速度和性能测试，为了更清晰，这里有一个图表列出了这三种性能基准测试。

比较性能

Parameter	Angular	React	Vue
Recommended Language	TypeScript	JS, JSX	JS, Vue
Architecture Flexibility	No	Yes	Yes
Logic Separation	Good	Good	Good
Rendering Speed	Slow	Fast	Fast
Most Known Architecture	MVC	Flux	Flux

Parameter	Angular	React	Vue
Server Side Rendering	Yes	Yes	Yes
CLI	Yes	Not Official	Yes
Debugging Tools	Yes	Yes	Yes
Testing	Jasmine and Karma	Developer’s Choice	Karma and Mocha, Jest
Data Library	No	No	No

Parameter	Angular	React	Vue
Mobile Build	Ionic	React-Native	Weex
Code Reusability	Yes	No, Only CSS	Yes, HTML and CSS
Size	143k	43k	23k
Code Stability	Yes	Yes	Yes
Bootstrap Integration	Yes	Yes	Yes

DIY -自我测试:

如果您想自己执行测试，可以使用以下相关命令:

Angular	React	Vue
$ npm install -g @angular/cli $ git clone https://github.com/mikpetr/angular -performance-test.git $ cd angular-performance-test $ npm install $ ng build -prod $ npm install -g http-server $ cd dist $ http-server	$ git clone https://github.com/mikpetr/r eact-performance-test.git cd react-performance-test npm install npm run dev Browse to http://localhost:8080	$ git clone https://github.com/mikpetr/v ue-performance-test.git $ cd vue-performance-test $ npm install $ npm run build $ cd dist $ npm install -g http-server $ http-server