记录一次部门级别的技术选型vue、react 还是 angular

前言

目前公司现状更偏向于传统行业，但是我们有自己的技术团队，且规模比较大。

在多年的项目迭代中，一直没有更新技术栈。

• 基础技术采用的是 jquery typescript
• 采用了layerUI bootstrap框架作为UI和布局方案
• 采用了 gulp webpack 的打包方案

从开发角度来看，有几个很大的弊端：

• 代码编码和调试过程无法做到热更新，每次开发技术后都需要长时间去编译再看结果。
• 打包速度非常慢，一次项目的完整打包需要半个小时。小范围打包速度尚可。
• 开发速度慢，jquery开发的特点就是不断修改dom，代码量巨大。且可读性低。

结合公司整体的长期规划，我们需要使用一个现代的前端框架来开发。

团队能力

1，团队能力参差不齐，有些有多年的vue开发经验。有些连vue的基本概念都无法掌握。实际上也许能使用vue写一写业务。但是不会使用vue的丰富特性。

2，另一个部门前端leader掌管整个公司的前端，前端leader推崇angular技术栈。

3，系统迭代多年，一直不更换技术栈，也是因为没有统一的长期的规划，不敢随便升级技术栈。非常注重项目的稳定性。

和部门技术总监沟通过后，我慢慢下定决心选用vue3作为后期技术栈。（和技术总监的意向接近）

我分析了以下因素

github 数据

截止github 2023.03/17的数据。如下：

	angular	vue	react
star	86.9k	203k	204k
issue open	1205	367	944
issue closed	23771	9584	11165

从github数据来对比vue和react的star接近，且都超过angular的2倍。 angular的issue更多，且未关闭的issue数量也多。

组价库的github star

	angular	vue	react
star/ open issue/ closed issue	Material Design for Angular 23.4k/1813/12143	ElementUI 53.2k/2.2k/15184 ElementPlus 19.1k/963/4079	ant Design 85k/907/25199
star/ open issue/ closed issue	NG/NGX Bootstrap 8.1k/317/2130 5.5k/489/2888	ant Design Vue 17.8k/156/4673
star/ open issue/ closed issue	NG Zorro 8.4k/710/3951	vant UI 21k/30/6607
star/ open issue/ closed issue	Nebular 7.8k/781/1001	NUT UI 5.1k/29/1148
star/ open issue/ closed issue	PrimeNG 8k/434/10036	varlet 3.8k/5/365
star/ open issue/ closed issue	Clarity 6.5k/1/3734
star/ open issue/ closed issue	DevUI 1.5k/95/100

从组件库的生态来看。 angular较多，Material Design for Angular 的 star较多，vue以element-plus为代表。react 主要是依赖antd。可以看书vue和react 的组件库相对较为成熟。angular次之。

性能

vue自从升级到vue3之后，性能有了较大提升。 react从hooks诞生，性能也有较大提升。

js文件大小

angular文件大，因为angular集成的内容较多。文件最大。 vue：作为一个渐进式的框架，可以再基础的vue框架上，加上vue-router、axios、pinia等，形成一个完整的生态。文件最小。 react，有较为丰富的周边生态。

学习曲线

angular ： 陡峭

vue： 易上手

react：中等

文档详细程度

angular: 较差

vue：非常详细，把vue官网看完。几乎是可以上手vue开发了。加上一些周边的vue-router、vuex、pinia都有详细的文档，对开发者非常友好。

react：中等

设计理念

angular： 超前，加入了依赖注入等写法。从2.0开始，框架一直非常稳定。所以框架不需要大概还可持续生存。

vue：vue3不兼容的升级。 react：提出了 hooks。

如何看待 vue和react 的版本迭代呢？

vue推出vue3：哇，好高大上。

react推出hooks：哇，全新的概念。

其实不然，与其说是又进行了大的改进，倒不如说框架在设计之初就没有被超前或者完整的设计。

此局angular胜。

灵活性

react 更灵活。写过的都知道。 vue新建组件可能需要新建一个vue文件。 react 在文件内定义多个组件的碎片，任意拼装。

此局react胜。

团队技术能力

这个因素就要结合自身团队的技术情况了。

由于技术选型时，初级程序员较多（在后来又补充了大量的中高级前端），学习angular的成本和难度非常高。

且团队之前有一部分人有过vue的经历。

因此此局 vue完胜、angular完败。

百度指数

直接反映了国内程序员对3个框架的关注程度。

index.百度.com/v2/main/ind…

可以看到 angular： vue： react = 1：10：3

国内对vue的关注程度是最高的。

个人学习意愿

如果从个人的角度来分析，不考虑任何团队现状，我可能会选择react。react被大厂广泛的采用。对个人成长较为友好。（但是我们需要的是团队协作，这条可以放到最低的优先级）

开发效率

vue的开发效率应该是最高的。

招聘难度

angular的招聘难度非常大。

vue和react招聘相对比angular容易很多。且vue略胜一筹。

如果采用angular，以后人员发生更替，培训成本也非常高。

leader的意愿

leader 对angular有较深研究，非常想推angular。

但是我部门的现状，并不是特别适合angular，因此经过多次商量和决策后，我力推了vue3作为后续的基础框架。

后记

前端技术框架选型一直是一个比较热门的话题。且vue和react近些年一直相爱相杀。

本次技术选型，也是本部门项目进行微前端改造过程中的一个重要决策。

不知道小伙伴们，在进行技术选型的时候，是如何决策的呢？

这篇好文章是转载于：学新通技术网