IT干货|2017 三大框架之争(战略篇):Angular vs React vs Vue

2017-11-11

Heming Yuan

当小伙伴们build web application的时候, 如何选择一个JavaScript框架一直是一个很纠结的问题。React和 Angular一直很受大家欢迎, 最近VueJs也是发展迅猛渐渐与React和Angular形成了三足鼎立之势。

 

这篇文章将会从战略上讨论三大框架之争,关于技术层面的讨论将会在下期文章展示。

 

在两期文章中我们将讨论以下这些问题

框架/库有多成熟?
框架可能持续一段时间?
他们是相对应的社区是否是广泛而有益的?
有多容易找到的每一个框架的开发者?
框架的基本编程概念?
或大或小的应用程序中使用的框架有多容易?
每个框架的学习曲线看起来像什么?
每个框架会有什么样的表现?
你可以在哪里仔细看看这些框架under the hood?
如何开始开发你所选择的框架?

 

 

三大框架的前世今生

Angular是TypeScript-based的JavaScript框架。由谷歌开发和维护,被描述为“Superheroic的JavaScript框架MVW”。

 

许多小伙伴可能对Angular 和 AngularJS 有些傻傻分不清楚, 这里Kevin简单向大家介绍一下两者关系:

 

Angular(也称为“Angular2+”,“Angular2”或“NG2”)是重写后的,大多对于AngularJS(也称为“Angular.js”

或“AngularJS 1.x”)并不兼容。虽然AngularJS(旧版)最初发布于2010年10月,它仍然需要不断修复bug--新的AngularJS(SANS JS)在2016年9月升级为版本2,最新版本是版本5。

 

谷歌、Wix、weather.com、healthcare.gov和福布斯使用的是Angular。

 

 

React是“一个JavaScript库,用于构建用户界面”。最早发布于2013年3月,React是由Facebook开发和维护的,它有几个网页使用产生React组件(但不是作为一个单页的应用程序)。根据克里斯·科尔德尔的一篇文章,React更多地用于Facebook,而Angular更多用在谷歌。 

 

React也用于Airbnb, Uber, Netflix, Twitter,

Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart等。

 

Facebook发布了React Fiber,它使得rendering速度快很多。 Facebook在2017年4月开发者大会上谈到了react fiber,并发布了有关新架构的一个非官方的文章。React Fiber与React16在2017年9月发布。

 

 

Vue是2016年增长最为迅速的JS框架。Vue是一个“直观,快速和可组合的MVVM用于建立交互界面。”它已经相当成功。在2016年,第2版发布了。 

 

使用Vue的公司有阿里巴巴,百度,Expedia,任天堂,GitLab --还有一些小项目清单可在madewithvuejs.com找到。

 

值得一提的是vue框架是由华人尤雨溪创造的, 他认为未来的app将会越来越轻量化和细化, 这也是vue框架的优势所在。

 

核心开发

如前所述,大公司都支持Angular和React的使用。

 

Facebook、Instagram和WhatsApp使用它们来制作自己的网页。谷歌也在很多项目使用它,例如:AdWords新界面就是用Angular&Dart来实现。Vue的小团队也是有好处的,他们的代码更简洁。


Angular,React和Vue在Github上Starts History
让我们来看看一些统计数据:Angular列出了36人在他们团队页面上,Vue公司16人,React没有团队页面。

 

github star数对比(下图)

 

在GitHub上,Angular具有超过25000 starts和463个贡献者,React有超过 70000的starts和1000多个贡献者,Vue公司拥有近60,000stars而仅有120个贡献者。你可以在Github上查看到Angular,React,Vue的Stars History。而且,Vue似乎趋势非常好。据bestof.js,在过去三个月Angular2已经达到每天平均31stars,React74stars,Vue.JS 107stars。

 

 npm下载数对比(下图)

从npm的package 下载量我们也可以很好的看出三个框架的发展趋势。图中蓝色代表Angular,橙色代表react,绿色代表Vue。可以看出三大框架都有着不同程度的增长,其中react在近两年增长尤其迅速。只有在2017年1月, 他们有一定程度的回落。

 

市场周期

因为存在不同的名称和版本,在Google Trend很难比较Angular、React、Vue。如果在“互联网与技术”分类搜索,结果是:

 

由于Vue在2014年之后出现的,直接比较“VueJS”

“Angular”或“React”有点不公平。

 

来自ThoughtWorks的Technology Radar很好的呈现了技术如何随时间变化的。Redux使用在一些ThoughtWorks的项目(https://www.thoughtworks.com/

de/radar/languages-and-frameworks/redux)。 

Vue.js是在试用阶段,它被描述为替代Angular(具有较低的学习曲线)的更灵活的选择(https://www.thoughtworks.com/de/radar/languages-

and-frameworks/vue-js)。Angular2是处于评估阶段--它尚未成功地被ThoughtWork团队使用,不强烈推荐(https://www.thoughtworks.com/de/radar/languages-and-frameworks/angular-2)。

 

根据Stackoverflow2017年的调查,67%参与调查者喜欢React,AngularJS是52%。 “没有兴趣”的参与者中

AngularJS (48%) vs React (33%)。 Vue均不在前10名。

 

再有就是statejs.com比较“前端框架”的调查。最有趣的是:React,Angular有100%的认知度,23%的被调查者不知道Vue。关于满意度,92%被调查者表示“将再次使用”React,Vue的为89%,Angular 2仅有65%。

 

长期的支持和迁移

React APIs是相当稳定的,Facebook用在他们的设计原则里。也有一些scripts来帮你从当前的API迁移到一个新的:check out react-codemod。迁移是很容易的,且不需要长期支持版本。在Reddit的发文中,升级从来就不是一个问题。React团队写了一篇博客文章关于他们的版本方案。

 

当他们加入弃用警告时,他们发布下一个版本之前仍保持它的当前版本。V14发布于2015年10月,V15发表于2016年4月,和V16发布日期未知。最近一个React核心开发人员指出升级应该不是一个问题。


关于Angular,有个关于版本和发布Angular v2版本的博客文章。每半年将有一个重大的更新,并且又会有至少半年的替换期。根据这篇文章,Angular团队已经宣布了Angular4后有长期支持版本。下一个主要版本发布前,将有至少一年的技术支持。这意味着Angular4的技术支持将会持续至2018九月(bug的修复和重要补丁程序)。在大多数情况下,从AngularV2到V4更新很简单。Angular还提供了是否需要进一步更改的信息。

Vue对于一个小应用程序,Vue1.x到2.0的更新过程应该是容易的。开发团队曾宣称,90%的API保持不变。

一位程序员指出,从V1到v2更新在一个大的应用程序没有什么好玩的。遗憾的是,有关的LTS版本的下一个版本计划还没有明确的roadmap。


另外:Angular是一个完整的框架,并捆绑了很多东西。React比Angular更加灵活,使用更加独立、快速的libraries--这也意味着你需要进行相应的更新和迁移支持,如果某些Package不再维护,试用它也可能是个麻烦。

 

人力资源和招聘

如果你的内部HTML开发人员不想了解JavaScript,你最好选择Angular或Vue。因为React需要更多的JavaScript。

Do you have designers working close to the code?

网友“pier25”在Reddit上评论:如果你在Facebook工作,用React很正常,在那里,每个人都是超级程序员。在现实世界中,你很难找到一个可以修改JSX的设计师 -正因为如此,用HTML模板会容易得多。

用Angular框架的好处是从另一家公司跳槽来的Angular2新程序员可以快速熟悉所有必要的conventions。React项目在architectural decisions上不同,程序员需要熟悉特定的项目设置。


Angular也不错,如果你的程序员有object-oriented背景,或不喜欢JavaScript。

 

从马什·钱的话可以进一步解释:

“我不是JavaScript程序员。我的背景是用“真实”的软件平台搭建大型企业系统。我在1997年开始使用C、C ++,Pascal、Ada和Fortran(......)我可以明确地说JavaScript是一堆乱码,对我而言。作为一个微软的MVP和专家,我对TypeScript有很好的理解。我也不认为Facebook是一家软件开发公司。然而,谷歌和微软都已经是最大的软件创新公司。我觉得更舒适的使用具有谷歌和微软技术背景的产品来工作会更舒适。(......)我知道微软TypeScript有甚至更大的计划。

上图是笔者刚刚在seek 上的截图,可以看出在澳洲react和angular是十分受欢迎的(约1000个左右),而Vue则是很少(不足100)。

 

说了这么多, 我们究竟应该选择什么js框架呢?

If you work at Google: Angular

If you love TypeScript: Angular (or React)

If you love object-orientated-programming (OOP): Angular

If you need guidance, structure and a helping hand: Angular

If you work at Facebook: React

If you like flexibility: React

If you love big ecosystems: React

If you like choosing among dozens of packages: React

If you love JS & the “everything-is-Javascript-approach”: React

If you like really clean code: Vue

If you want the easiest learning curve: Vue

If you want the most lightweight framework: Vue

If you want separation of concerns in one file: Vue

If you are working alone or have a small team: Vue (or React)

If your app tends to get really large: Angular (or React)

If you want to build an app with react-native: React

If you want to have a lot of developers in the pool: Angular or React

If you work with designers and need clean HTML files: Angular or Vue

If you like Vue but are afraid of the limited ecosystem: React

 

If you can’t decide, first learn React, then Vue, then Angular.

 

source:https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176

 

近期开课hot
logo

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-stripe.png/image/layout/pay-alipay.png

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 8, 11 York st, Wynyard, Sydney CBD
Business Hub, 155 Waymouth St, Adelaide SA 5000

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。 JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2024 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572