近年来Angular、Vue、React是最受欢迎的前端三大框架。个人认为没有哪个是更好的,只有更适合当前项目和团队的。
我们先从以下几方面来看这三大框架:
- 简介
- 生态
- 学习曲线
简介
angularAngular
Angular是一个成熟的前端框架,由谷歌开发,于2010年首次发布,是最古老的JavaScript框架。它是基于typescript的JavaScript框架。
2016年,Angular 2发布时发生了重大的变化(从原来的名字AngularJS中去掉了JS),Angular 2+被称为Angular。尽管AngularJS(版本1)仍在更新,但本文主要讨论Angular。最新的稳定版本是Angular 11,于2020年11月发布。
每半年会有大版本的更新,然后再过半年就会弃用旧版本的API,所以开发者可以有一年的时间去升级迁移。
vueVue
Vue也被称为Vue.js,是一个渐进式的框架,是三大框架中最年轻的。它是由谷歌前员工Evan You在2014年开发的。在过去的三年里,尽管没有大公司的支持,Vue的受欢迎程度已经发生了巨大的变化。
目前的稳定版本是3.0,于2020年9月发布(之后有一些小的增量版本)。需要注意的是,Vue 3现在已经在它自己的GitHub repo中了,也支持TypeScript(是否使用TypeScript是可选的)。
在Vue 3迁移文档中,提到Vue 2和Vue 3之间有很多相同之处,迁移相对简单,迁移工具还未发布。
注: IE11支持仍未解决
如果从Vue 1迁移Vue 2,则90%的API是相同的,并提供了Vue 1到Vue 2迁移助手工具vue-migration-helper。
reactReact
React是一个UI库,由Facebook开发,最初于2013年发布。Facebook在其产品(Facebook、Instagram和WhatsApp)中广泛使用React。目前的稳定版本是v17,于2020年10月发布,此后有较小的增量更新。
V17并无太多新增特性,而是一个过渡版本,为了后续能兼容 v18版本,或者说是为了能达到”逐步“升级的目的,这也能规避当项目的依赖存在多个版本React时出现问题。
Facebook表示,稳定性对他们来说至关重要,因为Twitter和Airbnb等大公司都在使用React。在React中,升级版本是最简单的,使用React codemod之类的脚本可以帮助进行迁移。
Star history从star的增长历史图上来看,vue虽然是最年轻的,但是近年来Vue已经超越React,成为最热门的。国内很多大厂,比如阿里、百度,都选择Vue作为他们的主要前端框架。
生态
Angular
-
状态管理
NgRx,它的灵感来自Redux,但它是专门为Angular创建的。 -
组件库
有许多现成的组件可以导入到项目中。其中Angular Material是谷歌的一个官方项目,为Angular提供Material组件。 -
跨平台
Angular全家桶
在Angular中使用NativeScript可以构建跨平台移动应用。它也支持Vue,但对Angular的支持更为成熟。
-
测试
单元测试: Jasmine, Karma, JestMocha, Siesta
组件测试: Jasmine, Karma
E2E测试: Protractor, Cypress, Nightwatch.js
Vue
-
状态管理
VueX是专门为Vue创建的官方状态管理库,除了可以很好地与Vue集成外,使用Vue的开发工具也很容易进行调试。
另外可以在Vue中使用Redux,不过没有正式的绑定。 -
组件库
随着社区的发展,可以使用各种各样的输入组件和高级元素来加快开发速度。
社区较受欢迎并已支持Vue3.0的UI组件库:
- Vuetify
- ElementUI
- Vant
- Ant Design -
跨平台
在移动应用开发方面,除了前面提到的NativeScript,还有有一个叫做Weex的平台。Weex是阿里巴巴开发和使用的,但它不像React Native那么成熟和强大。 -
测试
单元测试: Jest,Mocha
组件测试:Vue Testing Library (@testing-library/vue),Vue Test Utils , Cypress
(注: 如果是新手,建议使用Vue Testing Library,它是对Vue Test Utils的抽象,更容易上手)
E2E测试: Cypress.io, Nightwatch.js, Puppeteer, TestCafe
-
Vue 全家桶
- vue
- vuex
- vue-router
- vue rescoure
- webpack
React
-
状态管理
最流行的状态管理是React官方绑定的Redux,由Redux团队维护。当然,复杂度不高的项目也可以直接使用Context+Hooks。
-
组件库
Material UI
Ant design
由于React的流行,查找组件和随时可用的元素非常容易。 -
跨平台
React Native,它允许你从用React编写的单个代码基构建原生iOS和Android应用程序。因此,React也是使用web技术构建移动应用程序的一个很好的选择。 -
测试
单元测试: Jest,React Testing Library
组件测试:Cypress, Jest
E2E测试: Cypress, Nightwatch.js, Puppeteer, TestCafe
React全家桶
redux, react-redux, immutable.js, redux-actions, redux-saga,react-router
学习曲线
Possible Learning Curve-
Angular
完整和成熟的解决方案,需要学习理解TypeScript、MVC以及前端如何工作等,学习曲线陡。适合大型项目和有TypeScript经验的开发者。 -
Vue
提供了更高的可定制性,灵活,因为和其他二者有重叠的,从Angular和React过渡到Vue,学习起来就较简单。但是因为太灵活也是一把双刃剑,可以容忍难以维护的代码,也很难调试。如果喜欢简单性,但也喜欢灵活性,那么Vue应该是你的选择。 -
React
成熟但是不是完整解决方案,有大量社区支持,高级特性需要使用第三方库需要依赖第三方库,核心功能学习曲线不那么陡,主要看第三方库的学习曲线。适合前端初学者。
总结
Angular vs React vs Vue虽然三大框架有着很多的不同,当也有一些相似的地方。比如Vue与React,都在使用 Virtual DOM,支持本地渲染,性能都很好,同样都提供了响应式组件;Angular和Vue都使用了指令;React与Angular两者的社区基础都很好;Angular、Vue、React都支持PWA。
三大框架各有优劣,无论哪一种方案都比较成熟。在选取哪个框架更合适当前项目和团队,除了考虑它们的特性、迁移、生态、学习曲线外,还要考虑项目特性、团队规模、团队实力等。
如果是开发小程序,那么Vue是最优的选择。
如果是小团队,想要快速上线一个产品,也推荐Vue。
如果是大型团队,开发一个长期项目,综合来看,更推荐React。
如果是中大型团队,团队综合实力比较高,则可以尝试Angular。
希望本文对你进行项目选型有所帮助。
网友评论