北京-第四十四期前端框架的选择

Posted 2021-04-05 葡萄藤IT技能树

前端发展日新月异，每年成百数千框架诞生，当我们需要选择一种来学习时，应该如何挑选？

我认为应该从两方面来看：框架优劣的重要性自不必说，影响性能和开发体验，但另一方面适合自己的需求也很重要，尺有所短寸有所长，在不同情况下的优劣可能相反。

框架的优劣

Paste_Image.png

这是去年主流前端js框架的github新增star数量，很大程度上能体现一个框架的受欢迎程度，受欢迎程度又在一定成都上说明了，框架的优劣，大量程序员都喜欢的一定不会很差。

重点来看前三者，三者中，angular的适用范围相对窄一些，react可以拓展到服务端、移动端native部分，vue最轻量、还可以用于业务场景非常轻的页面中（不用全家桶也不错）。下面从几个方面来比较一下这三种框架的优劣：

状态：

在业务界面中我们经常需要数据和界面的交互，根据某些数据去生成界面，通过界面上的操作去改变数据。这其中有两种，一种就是数据到界面，一种是界面到数据，使用原生或者jquery实现这种操作要大量代码，而且实时更新也很麻烦，所以主流框架都在交互上进行了封装处理。
MVVM流派的angular、vue，通过类似模版的语法，通过内部转换，构建数据和界面状态的绑定关系，甚至双向绑定，监听界面变化，当界面发生改变，按照规则去更新响应的数据，然后，再根据配置好的规则，从数据更新界面状态。
react则通过函数式编程实现，推崇的是单向数据流：给定原始界面或数据，施加一个变化，就能推导出另一个状态，有点像状态机。

组织：

整个业务代码的模块关系、业务模型。模块关系共识就是组件化，整个应用形成组件树，每个组件树提供对外接口，用来数据交互，然后内部只关注自己的实现，需要考虑组件的定义、约束、管理、测试等很是复杂；react和vue的组件化成都要优于angular。业务模型指的是所处领域中的业务数据、规则、流程的集合。即使抛开所有的展示层，这一层也是应当要能够运作起来的。react有redux来辅助管理，angular2引入了RxJS，vue有vuex。如果是学习能力强的人，发现面向函数编程模型的时候会非常喜欢，但是对于大型项目，并非好事。用面向对象、面向过程的那些方式，虽然笨重，但是门槛低，符合大多数人的理解和思维模式，而且经验丰富。

效率：

分为开发效率和运行效率。组件化是提升开发效率的一种手段，具体到单个组件的实现上，mvvm系的代码量会少一些、开发效率稍高一些。其中，angular因为实现的特殊性，有作用域继承之类的双刃剑黑魔法，开发效率的不稳定因素要高不少，深刻理解的人用起来效率很高，不理解的用了到处是坑。angular是三者中运行效率最低的那个，主要在于数据变更方式是脏检查，当监听数量提高时，极大影响性能。在针对现实情况的测试中，vue是效率最高的那个（使用和react共同约定的测试基准），在大数据的情况下，react效率最高。

学习曲线：

angular1学习曲线陡峭，大量新的概念、晦涩的说明、复杂的指令；angular2即使不用typescript，它使用es2015的js，18个npm依赖包、4个文件、超过三千多字的介绍来实现一个hello world！；react学习曲线陡峭，需要了解jsx和es2015，需要学习构建系统；vue需要你熟悉html、符合es5的js。

自身的需求：

尤雨溪大神回复关于框架选择的问题：

首先要明确自己的需求：

1. 在短期内尽快找到工作

2. 创造更快应用

3. 作为学习经验来提高javascript

对于目标一，去学习，最主流、最受企业欢迎的框架，能够帮助你提高就业竞争力。

对于目标二，如果是一个依靠后端的展示页面应该选择更轻、更少插入、不需要特定工具，并且使用html；如果是SPA必须深入了解性能、功能、API友好性、工具支持、生态系统成熟度等方面的实际技术对比。这是主观的、项目依赖的。

对于目标三，应该从轻量级的东西开始学习，大型框架的API很全，封装的很好，主要是在学习使用框架的API和约定，但是需要自己写的地方就少了，不利于提高自己的编码能力。另一方面，方便你理解不同的部分实际上是如何组合的。

---

尤雨溪大神还建议首先把javascript本身学到精通，这样风险很小。有了坚实的基础可以迅速掌握简单的框架。单独使用这些框架来写个小的应用，来了解这些框架解决什么问题，喜欢哪一种、什么样风格的API是你更有效率，从而可以尝试大型框架。这样比尝试一个大型框架几个月发现不适合自己要好的多。
另一方面他还建议我们了解es最新版本的语法，基本的node.js、npm如何工作，框架系统、打包工具这些与框架无关但是可以应用在任何框架中的技术。核心思想是不要把鸡蛋放在同一个篮子，选择js框架不是选择党派战队，不必永远坚持一个。无论别人说什么不要在没有尝试的情况下，为自己做出决定。如果只使用一个框架而忽略其他的，几乎肯定是错的。

原文链接：http://www.jianshu.com/p/9786c8678f87

PPT链接：https://ptteng.github.io/PPT/PPT/js-10-chooseLibrary.html#/