过去三年使用前端框架的感受-技术圈

作者：王力国
来源：https://zhuanlan.zhihu.com/p/194311058

Angularjs

背景：2016.10-2017.7，某云计算公司，客服云平台

Angularjs 是我参加工作之初接触的第一个前端框架(大概是 16 年底到 17 年中)，我想没有人会否认 Angularjs 在前端框架方面所作出的贡献，它所提倡的声明式 UI 在后来变成了前端开发的主流。但是它又让我感觉有些矛盾，使用它我确实不再需要直接操作 Dom 就可以编写出优美的用户界面，但是我却花了更多的心思去研究这个框架本身，我需要搞清楚 scope 的区别，也需要搞懂为什么写定时器需要使用 $timeout...

现在回过头来看，2016 年底到 2017 年初这是一个非常有意思的时期，因为在这段时间里，Angular 和 Vue 都发布了 2.x 版本，而在当时，从 Angularjs 升级到 Angular 和升级到 Vue2 成本是相当的，如果是你来做技术发展趋势的预判你会如何判断？

我们的选择是大概花半年时间将公司所有长期维护的存量代码全部迁移到 Vue2，还构建了自己的组件库，主要基于几个考虑：

Angular 的不兼容更新和较大升级成本让人感到沮丧
Vue2 在国内开始爆发式增长，觉得学习成本远低于 Angular
Vue2 的性能几乎可以完胜当时的 Angular

ok，毕竟 Angularjs 已经落伍了，pass...

Vue

背景：2017.7-2019.2，某云计算公司，容器云平台

我当时所在的团队负责维护公司最大的云计算产品，业务逻辑也较为复杂，Vue2 配套的 Vuex 很难满足我们的需求，于是我们选择 Rxjs 来构建数据层。后来维护的同学越来越多，团队协作问题就变得很突出，对类型的需求变得越来越明显，我们不得不考虑如何接入 TypeScript，很遗憾我们很快就失败了，这源于 Vue2 本身设计是比较灵活的，它允许各种方式(mixin，extend，prototype...)往组件实例上增加属性方法，这让类型推断变得很灾难。再到后面我们又遇到了在 Angularjs 时期同样的各种性能问题，我们最终发现原来性能瓶颈大部分情况下不是框架的问题，而是取决于工程师的技术功底。

兜兜转转到最后发现 Vue2 + TypeScript + Rxjs 不就是 Angular 的阉割版？不过即使这段 Vue2 使用经历并不算愉快，我仍然认为 Vue2 是一个非常成功的框架，它让我们在很短时间内完成了迁移。

顺便说说 Vue3：

实际上我一直在关注 Vue3 的进展，但 Vue3 的设计目标大部分我都不是很感冒，我只关心是否有某些新特性可以让我的应用更健壮更稳定，所以唯一让我感到开心的是它通过使用 TypeScript 重写框架实现了对 TypeScript 非常友好的支持。

但同时又让我有一些担忧就是撤销 Class API 并引入 Composition API，首先我非常认同在前端组件开发里“组合优于继承”，但我真的很难接受讲所有组件逻辑揉进一个 setup 函数，这可能会让代码可读性变得很差，也是基于这个原因我在后面编写 React 组件时候，只有在组件足够简单的时候我才会使用 Function Component 来代替 Class Component，我觉得 Class Component 很大优势就是他可以把你的代码整理的井井有条(当然 Composition 亦可，只不过需要你有更好的功底)。当然拿 Vue3 的 Composition API 和 React 的 Hooks API 相比可能不太合适，Vue3 显然在设计上是有优势的。

不过不管怎么样，确实看起来 Vue3 要比 Vue2 要好很多，这让我更加愿意在之后的技术选型里着重考虑 Vue3。

React

背景：2019.2-至今，某人工智能公司，低代码开发平台

我在第二份工作之前我从未用过 React，实际上使用 React 是一个非常随意的选择，我在入职新公司之后负责启动一个新产品，这个项目是一个低代码开发平台(两个桌面应用，一个Web管理后台)，而当时公司里的前端技术栈只有 Angular 恰巧我自己又没用过，于是我问了另一位同事的想法：

···

我：hi，兄弟，我们要做一个低代码开发平台，我们现在只有 Angular，但我不是很熟悉，Vue 和 React 你想用哪个？

同事：Vue 用太久了，要不一起学学使用 React？

我：可以啊，那就 React + Electron

···

实际上现在回过头来看，这是一个非常随意，但是却重要而正确的选择，在一个灵活性很高需要高速迭代的产品里，使用 React 是非常合适的，我们在较短的时间里实现了非常复杂的拖拽模块，虚拟列表，动态表单，也封装了 Hooks 库....最终我们高质量交付了产品，大概十万行 TS 代码。

但选择 React 也不是十分完美，不得不承认在这个过程中我浪费了很多时间在配套技术选型和项目配置优化上，从 ES6 到 TypeScript，从 Redux 到 Mobx，到 Webpack 的各种优化...

虽然我深度使用过 React 的几乎所有 API，也用它构建过非常大型的商业软件，但我至今没有完整阅读过 Redux 和 React-Router 文档，他们实在是太多了，就一个 Router 而言，它有单独使用的文档，有 Hooks 用法的文档，有结合 Redux 使用的用法...我觉得它提供了太多选择，我不知道这对不对，但我不是很喜欢。

另外选择 React 你基本上就要忍受大量的模版代码，不仅仅是状态管理库之类的模版代码，还要接受因为 React 本身 API 缺乏导致的大量模板代码，比如最常见的“双向绑定”

class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }

  handleChange = (event) => {
    this.setState({value: event.target.value});
  }

  render() {
    return (
       <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

当然社区有很多库可以绕过或者解决这个问题，但这就又回到了上面提到的一个问题就是选择太多了，而我很难有把握每一次都选对，我可不想每天都在重构代码。不过你本身就很喜欢折腾的话，那这可能就是优势了。

我目前的感受是，React 在 Vue3 面前似乎没有什么比较大的优势？

Angular

背景：2019.2-至今，某人工智能公司，后台管理系统

在上面说的这个产品里有一部分是后台管理模块，因为公司主要技术栈是 Angular，我就自然而然接触到了 Angular，但我个人之前一直对 Angular 的印象不是太好，我一直给它打着诸如“臃肿”“喜欢破坏性更新”“很难”之类的标签，直到我深度使用 Angular(最近使用 Angular9) 之后，我真的被这个框架所彻底折服，ng-cli 非常强大加上官方提供各种解决方案(HttpClient，Router，Rxjs，CDK，懒加载)都让我可以将精力更专注的放在业务开发上，而不是无穷无尽的技术选型和改进上。

Angular 给我的感觉，就像是一个非常高级的大师给了我一个神器可以轻松编写出可维护性强的代码，并且它时不时就过来告诉我更新一下这个神器的版本，然后你不用额外学习任何东西，你就可以获得一个更强的神器。但这有一个前提，就是你得绝对信任这个大师，因为很多时候你可能搞不懂它是如何做到的，不过大师会告诉你，这个神器再交给你用之前它已经在 Google 内部进行过无数次试验。

国内很多人不使用 Angular 是觉得说它的学习成本太高，但是我可以负责任的说，绝对不会比 React 更高。不信你可以尝试用三大框架去构建一个商业应用雏形(包括路由拦截，数据管理，登录表单，发送请求，时间格式化，单元测试...)，看看哪个可以在最短时间内完成，我想这个实验做完之后你也会爱上 Angular，我始终觉得在多人协作构建大型中后台应用时使用 Angular 是真的非常合适。

另外觉得性能差，很臃肿....那就是 Angularjs 时代遗留下的偏见了，最好的方式就是尝试去接触它再做评价，毕竟 Angular 的好，只有用过才知道。