【转】2017年前端框架、类库、工具大比拼

原文连接：https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/

源于：葡萄城控件

欢迎你们持续关注葡萄城控件技术团队博客，更多更好的原创文章尽在这里~~

相比于JavaScript开发人员的数量，目前JavaScript框架、类库和工具的数量彷佛更多一些。截至2017年5月，GitHub上的快速搜索显示，有超过110万个JavaScript项目。npmjs.org有50万个可用的软件包，每个月下载量近100亿次。

本文将会讨论目前最为流行的客户端JavaScript框架、类库和工具以及它们之间的基本差别。也许本文没法告诉你哪一个是最好的，可是最适合本身项目的，就是最好的。

类库

类库是一个有组织的功能集合。典型的类库包括字符串处理、日期、HTML DOM元素、事件、Cookie、动画、网络请求等功能。你能够本身实现一个函数，以便选择该函数被调用时是否须要返回一个值。

类库一般提供一种高级别的抽象方法，可以帮助顺利实现项目的细节部分。例如，Ajax一般依赖于XMLHttpRequest API，只须要几行代码就实现功能，只是浏览器之间存在细微的差别。类库提供了更简单的ajax（）函数，所以开发者能够专一于更高级别的业务逻辑上。

类库可以使将开发时间缩短20％，开发者没必要担忧细节实现。

可是也有缺点：

• 类库中的错误难以定位和修复
• 开发团队不能保证快速发布补丁
• 补丁程序可能会更改API，致使大量代码必须更改

框架

框架是应用程序的骨架。它要求以特定的方式来进行软件设计，在某些节点上实现本身的逻辑。框架一般提供了事件、存储和数据绑定等功能。

框架一般提供了比类库更高层次的抽象，帮助快速构建项目的前80％。

框架的缺点：

• 若是你的应用程序超出了框架的范围，最后20％可能会很难
• 框架更新很困难
• 核心框架代码和概念不多更新

工具

工具会帮助开发工做，但却不是项目的组成部分。工具包括构建系统、编译器、转译器、代码分割器、图像压缩器、部署机制等。

工具帮助实现一个更容易的开发过程。例如，对比于CSS，许多编码者更喜欢Sass，由于它提供了代码分离、嵌套、渲染时变量、循环和函数。浏览器不了解Sass / SCSS语法，所以在测试和部署以前，必须使用适当的工具将代码编译为CSS。

类库、框架和工具的区别

类库、框架和工具之间的区别很小。框架能够包括一个类库，类库能够实现相似框架的方法，项目中任何一种工具都是必不可少的。因此不须要明确的区分类库、框架和工具。

JavaScript框架和类库

如下是按照流行程度进行的排序：

jQuery

jQuery
类型	类库
网站	jquery.com
知识库	github.com/jquery/jquery
当前版本	3.2.1
开发人员	jQuery团队
发布日期	2006年8月
大小	最小30kb
用途	通用
使用度	72.4％的网站

随着WordPress、ASP.NET和一些其它框架的发布，jQuery仍然是最经常使用的JavaScript类库。它经过将CSS选择器引入到DOM节点检索加链来应用事件处理程序、动画和Ajax调用，这完全改变了客户端的开发。

jQuery近年来备受青睐，对于须要少许JavaScript功能的项目来讲，仍然是一个好选择。

优势：

• 分布规模小
• 学习曲线平缓，丰富的在线帮助
• 简洁的语法
• 容易拓展

缺点：

• 增长了原生API的速度开销
• 浏览器兼容性很差，但已获得改善
• 用法扁平
• 一些行业反对使用

Lodash 和 Underscore

Lodash
类型	类库
网站	lodash.com/
知识库	github.com/lodash/lodash/
当前版本	4.17.4
开发人员	John-David Dalton
发布日期	2012年4月
大小	最小4kb - 24kb
用途	通用
使用度	低
Underscore
类型	类库
网站	underscorejs.org/
知识库	github.com/jashkenas/underscore
当前版本	1.8.3
开发人员	Jeremy Ashkenas
发布日期	2009年10月
大小	最小6kb
用途	通用
使用度	低

Lodash和Underscore在本节一块儿谈论。它们提供了数百个功能性的JavaScript实用程序来补充原生字符串、数字、数组和其它原始对象方法。虽然两个类库之间有一些重叠，可是不太可能在一个项目中同时使用这两个类库。

虽然两个类库在客户端使用率很低，可是却能够在服务器端的Node.js应用程序中使用这两个类库。

优势：

• 小而简单
• 良好的文档易于学习
• 与大多数类库和框架兼容
• 不扩展内置对象
• 能够在客户端或服务器上使用

缺点：

• 有些方法只在ES2015及更高版本的JavaScript中可用。

AngularJS 1.x

AngularJS
类型	框架
网站	angularjs.org
知识库	github.com/angular/angular.js
当前版本	1.6.4
开发人员	Google
发布日期	2010年10月
大小	144KB
用途	单页应用程序
使用度	低

Angular是框架（或MVC应用程序框架）类列表中的第一个。目前最流行的Angular版本是1.x，它使用双向数据绑定扩展HTML，同时解耦了DOM操做和应用程序逻辑。

尽管版本2（如今是版本4！）已经发布了，可是Angular 1.x仍在开发中。

优势：

• 一些大公司正在使用的流行框架
• 开发现代Web应用程序的解决方案
• 是标准MEAN栈（MongoDB，Express.JS，AngularJS，NodeJS）的一部分，有许多文章和教程可用

缺点：

• 学习曲线陡峭
• 大的代码库
• 没法升级到Angular 2.x

Angular 2.x（如今是Angular 4.x）

Angular
类型	框架
网站	angular.io
知识库	github.com/angular/angular.js
当前版本	4.1
开发人员	Google
发布日期	2016年9月
大小	最小450kb
用途	单页面应用
使用度	低

Angular 2.0于2016年9月发布。这是一个完整的重写，它引入了使用TypeScript建立的基于模块化组件的模型。Angular 4.0于2017年3月发布。

Angular 2.x与v1版本大相径庭，也不与其它版本兼容 - 也许Google应该给项目起一个不一样的名字！

优势：

• 开发现代Web应用程序的解决方案
• 是标准MEAN栈的一部分，尽管只有少许的教程可用
• 对于熟悉静态类型语言（如C＃和Java）的开发人员，TypeScript提供了一些优点。

缺点：

• 学习曲线陡峭
• 大的代码库
• 不能从Angular 1.x升级
• 与1.x相比，Angular 2.x较难理解

React

React
类型	框架
网站	facebook.github.io/react/
知识库	github.com/facebook/react
当前版本	15.5.4
开发人员	Facebook和贡献者
发布日期	2013年3月
大小	最小21kb
用途	单页应用程序
使用度	低

React是一个用于构建用户界面的JavaScript类库，也是去年最受关注的类库。它专一于Model-View-Controller（MVC）开发的“View”部分，使用它能够轻松建立保留状态的UI组件。它是实现虚拟DOM的首选类库之一， 它的内存结构可以有效地计算差别，页面更新也更加有效。

统计显示React的使用度彷佛很低，由于它是在应用程序中使用而不是在网站。

优势：

• 小巧，高效，快捷灵活
• 简单的组件模型
• 良好的文档和在线资源
• 可实现服务器端渲染
• 目前受欢迎，经历了快速增加

缺点：

• 须要学习新的概念和语法
• 构建工具很重要
• 须要其它类库或框架提供model和Controller部分
• 与修改DOM的代码和其它类库不兼容

了解更多关于React the ES6 Way

Vue.js

Vue.js
类型	框架
网站	vuejs.org
知识库	github.com/vuejs/vue
当前版本	2.0
开发人员	Evan You
发布日期	2014年2月
大小	最小19kb
用途	单页面应用
使用度	低

Vue.js是一个用于构建用户界面的轻量级渐进框架。它提供了一个相似React的虚拟DOM驱动视图层，能够与其它类库集成，用于构建强大的单页面应用。该框架是由以前在AngularJS工做过的Evan You建立的，他提取了AngularJS中本身喜欢的部分。

Vue.js使用HTML模板语法将DOM绑定到实例数据。Model是在数据改变时更新view的纯JavaScript对象。

优势：

• 能够快速使用，而且日益普及
• 很容易提升高水平开发人员的满意度
• 依赖性小，性能好

缺点：

• 一个较新的项目 - 风险可能会更大
• 部分依赖开发人员进行更新
• 相比于其它框架，资源较少

Backbone.js

Backbone.js
类型	框架
网站	backbonejs.org
知识库	github.com/jashkenas/backbone/
当前版本	1.3.3
开发人员	Jeremy Ashkenas
发布日期	2010年10月
大小	最小8kb
用途	单页面应用
使用度	低

Backbone.js是提供服务器端框架中常见的MVC结构的最先客户端选项之一。它惟一的依赖是Underscore.js。

Backbone.js声称是一个类库，由于它能够与其它项目集成，可是我以为大多数开发人员都认为它是一个框架。

优势：

• 体积小，重量轻，复杂度低
• 不添加HTML逻辑
• 文件丰富
• 采用了许多应用，包括Trello、WordPress.com、LinkedIn和Groupon

缺点：

• 与AngularJS等其它框架相比，抽象度较低
• 须要额外的组件来实现数据绑定等功能
• 最新的框架已经不采用MVC架构了

Ember.js

Ember.js
类型	框架
网站	emberjs.com
知识库	github.com/emberjs/ember.js
当前版本	2.15.0
开发人员	Ember team
发布日期	2011年12月
大小	最小95kb
用途	单页面应用
使用度	低

Ember.js是基于Model-View-ViewModel（MVVM）模式的框架之一。它在单个包中实现模板化、数据绑定和类库。

优势：

• 为客户端应用程序提供了单一解决方案
• 开发人员能够马上提升开发效率 - 它使用jQuery
• 良好的向后兼容性和升级选项
• 采用了现代Web开发标准

缺点：

• 大型分配式
• 与其它正在向较小组件结构发展的框架相比，它十分的庞大
• 学习曲线陡峭

Knockout.js

Knockout.js
类型	框架
网站	knockoutjs.com
知识库	github.com/knockout/knockout
当前版本	3.4.2
开发人员	Steve Sanderson
发布日期	2010年7月
大小	最小59kb
用途	单页面应用
使用度	低

Knockout.js是最先的MVVM框架之一，它确保了UI与底层数据保持同步，具备模板和依赖关系跟踪。

优势：

• 小而轻便，无依赖
• 优秀的浏览器支持，能够支持到IE6
• 良好的文档资源

缺点：

• 较大的项目可能变得很复杂
• 发展已经放缓
• 使用状况彷佛在减弱

更多的框架和类库

如下项目虽然不是特别流行，但值得考虑：

• Polymer - 能够跨浏览器支持HTML5网页组件的类库
• Meteor - 一个用于Web应用程序的全栈平台
• Aurelia  - 一种相对较新的，轻量级的跨平台框架
• Svelte - 一个将框架源代码转换为干净JavaScript的新项目
• Conditioner.js  - 一个基于状态自动加载和卸载模块的类库

工具：执行通用任务

构建工具自动执行各类Web开发任务，例如预处理、编译、优化图像、缩小代码、代码分析和运行测试等。任务能够在一个可执行包中统一管理。

目前最受欢迎的工具以下：

Gulp.js

Gulp.js
网站	gulpjs.com
知识库	github.com/gulpjs/gulp
当前版本	3.9.1
每个月下载	300万

虽然Gulp不是第一个任务执行工具，它却很快成为了最受欢迎的。Gulp使用易于阅读的JavaScript代码，将源文件加载到流中，并在将数据输出到构建文件夹以前，经过各类插件管理数据。在任何其它选项以前检查Gulp.js是简单、快速和有趣的。

NPM

NPM
网站	npmjs.com
知识库	github.com/npm/npm
当前版本	4.5.0
每个月下载	300万

npm是Node.js包管理器，但其脚本工具可用于运行通用任务。对于具备少许依赖关系的简单项目来讲，这是一个很好的选择。然而，更复杂的任务可能会变得不太适用。

Grunt

Grunt
网站	gruntjs.com
知识库	github.com/gruntjs/grunt
当前版本	1.0.1
每个月下载	200万

Grunt是第一批被大规模采用的JavaScript任务执行工具之一，但其速度和复杂的JSON配置却致使了Gulp的兴起。如今这些问题已经获得了解决，Grunt仍然是一个受欢迎的选择。

工具：模块绑定

多个JavaScript文件的管理已经成为了一件繁琐的事情。默认状况下，浏览器文件不会被编译，所以其依赖关系必须以适当的顺序进行加载或链接。虽然有像ES6模块和CommonJS这样的选项，可是浏览器支持是有限的，所以模块绑定变得十分重要。

WebPack

WebPack
网站	webpack.js.org
知识库	github.com/webpack/webpack
当前版本	2.5.1
每个月下载	600万

Webpack支持全部流行的模块选项，并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序，可是已经能够用做通用任务运行程序了。

Browserify

Browserify
网站	browserify.org
知识库	github.com/substack/node-browserify
当前版本	14.3.0
每个月下载	260万

Browserify支持Node.js正在使用的CommonJS模块，它将全部模块编译成单个浏览器兼容的文件。

RequireJS

RequireJS
网站	requirejs.org
知识库	github.com/jrburke/r.js
当前版本	2.3.3
每个月下载	百万

RequireJS是一种浏览器中的模块加载器，它也能够在Node.js中使用。

工具：代码分析

代码分析工具用于分析代码中潜在错误或偏离语法的标准。一个未闭合括号或未声明的变量必定会被检测出。

ESLint

ESLint
网站	eslint.org
知识库	github.com/eslint/eslint
当前版本	3.19.0
每个月下载	600万

ESLint是一种可插拔的代码分析工具。每一个规则都是一个插件，所以能够根据我的喜爱进行配置。

JSHint

JSHint
网站	jshint.com
知识库	github.com/jshint/jshint
当前版本	2.9.4
每个月下载	200万

JSHint是一个灵活的JavaScript代码分析工具，它很好的平衡了真正的错误和老旧的语法。

JSLint

JSLint
网站	jslint.com
知识库	github.com/reid/node-jslint
当前版本	0.10.3
每个月下载	50000

JSLint是最先的代码分析工具之一，它实现了一套严格的默认规则。

工具：单元测试

测试驱动开发的任务要求须要编写代码来测试本身的代码。目前有许多选择，包括Ava, Tape 和Jest ，但目前最流行的三个工具是：

Mocha

Mocha
网站	mochajs.org
知识库	github.com/mochajs/mocha
当前版本	3.3.0
每个月下载	500万

Mocha是一个JavaScript测试框架，能够在Node.js或浏览器中运行测试。它支持异步测试，而且常常与Chai配合使用，这样可使测试代码以可读取的方式表达。

Jasmine

Jasmine
网站	jasmine.github.io
知识库	github.com/jasmine/jasmine-npm
当前版本	2.6.0
每个月下载	200万

Jasmine是一个行为驱动的测试工具，能够在浏览器中自动测试UI和交互。

QUnit

QUnit
网站	https://qunitjs.com/
知识库	github.com/kof/node-qunit
当前版本	1.0.0
每个月下载	25000

QUnit是一个单元测试框架，能够在输入特定参数时，检查函数结果。它还上报测试结果，确保没有错过特定的代码分支。

总结与建议

目前最为流程的框架是React，同时其它的框架也在向着流行的趋势发展。

若是须要一个安全的、通用的Web应用程序，能够考虑使用Vue.js。

总体框架已经再也不受欢迎了，若是你须要对一个较大型项目进行严格的结构管理，AngularJS是一个不错的选择。目前大多数人坚持使用Angular 1.0版本，可是长远来说，若是你愿意学习TypeScript，Angular 4.x版本是个更好的选择。

jQuery虽然如今并不十分流行，在技术新闻中也不多会被提到，但不能否认它是积极开发的，同时也是网站和应用程序的有力工具。jQuery具备平缓的学习曲线，全球许多开发人员可以很好地理解。

若是你想要冒险，能够试试Svelte这是一个有趣的客户端/服务器框架，它能够在构建时预先呈现JavaScript，而且能够改变咱们开发的方式。

工具的选择因项目而异。虽然目前使用Gulp的开发者占大多数，但WebPack却愈来愈受欢迎。同时你也不能错过ESLint和Mocha等测试工具。

过去的十年，JavaScript经历了革命性的发展。过去只有少许基本的类库能够选择，可是如今可供选择的类库已经铺天盖地。也许没法肯定哪一个类库、框架和工具是最好的，可是最适合本身项目的，就是最好的。

若是本文错过了你最喜欢的JavaScript类库，框架或工具？欢迎在文末评论。