您的位置:首页 » 分类: jQuery & JS & 前端资源 & ES2015 (ES6) & React & Vue.js & webpack » 文章: 2017年最佳JavaScript框架,库和工具

2017年最佳JavaScript框架,库和工具

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

JavaScript框架,库和工具似乎比他们的开发人员多出很多。截至2017年5月,在 GitHub 上快速搜索 JavaScript 项目显示已经超过110万个。npmjs.org 有 50 万个可用的软件包,每月下载量近100亿次。

2017.05.29:该文章已更新,以反映 JavaScript 生态的当前状态。

本文将努力解释最流行的客户端 JavaScript 框架、库和工具之间的基本内容和差异。他们对你来说是否是 “最好的” 选择是另一个问题。选择一些东西,坚持一段时间。你需要知道的是:你最喜欢的选项终将被“更好”的东西取代,无论你选择什么!

前端免费公开课大纲

  • 1 低端前端工程师命运何去何从?
  • 2 “大前端”时代,程序员面临的技能挑战
  • 3 Do Less & Learn More
  • 4 人口红利?移动红利?数据红利?
  • 5 弱工程 & 强业务
  • 6 从普通工程师进阶到前端架构师的一点成长建议
点击扫描报名

在阅读本文之前请接受以下术语和情况…!

  • JavaScript 生态社区每天都会发生变化。这篇文章可能在发布时就已经过时了!
  • 我说的 “最好的” 指的是 “最受欢迎的通用项目” 。所有都是免费 / 开源 的,但你肯能不认同这个列表。
  • 停止的项目,如 YUI 不包括在本列表内,即使它们现在可能依然有很高的使用量。
  • 仅引用客户端项目。有些可以在服务器端工作,但该列表不包括纯粹的基于服务器的框架,如 Express.jsHapi
  • 关于每一个项目的信息都是有意为之提供一个概述以便进行进一步的研究。
  • 每个项目都提供了使用流行指标,但统计数据难以整理,可能会造成误导。
  • 我有偏见,你有偏见,每个人都有偏见!我没有在这里尝试过每一个工具,所以不会说明我最喜欢哪个,但你应该根据你的要求自行评估。
  • 我和该网站都不对你做出的任何选择使用的决定负责!

棘手的术语

术语“framework(框架)”,“library(库)”和“tool(工具)” 可以根据情境,在不同时期,对不同的人,意味着不同的东西。这里使用的一般定义如下:

Libraries(库)

库是有用功能的有组织的集合。一个库的典型功能包括处理字符串、日期、HTML DOM元素、事件、Cookie、动画、网络请求等等。每个函数都将值返回给调用应用程序,该应用程序可以在您选择的情况下实现。你可以把它想象成汽车零件的选择:你可以自由地使用任何零件来建造一辆能跑的车,但是你必须自己造一个引擎。

库通常是提供一个更高的抽象层,平滑的实现细节和矛盾。例如,Ajax通常依赖于 XMLHttpRequest API ,但这需要几行代码,并且在不同的浏览器之间存在细微的差异。但是库可以提供一个更简单的 ajax() 函数,让程序员更专注于高层次的业务逻辑。

一个库可以将开发时间缩短20%,因为您不必担心细节问题。但是它也不是没有缺点的:

  • 库内的错误可能难以定位和修复
  • 开发团队不能保证快速发布补丁
  • 修补程序可能会更改API,并对您的代码进行重大更改。

Frameworks(框架)

框架是一个应用程序的骨架。它要求您以一种特定的方式来处理软件设计,,并在某些点插入您自己的逻辑。通常为您提供诸如事件、存储和数据绑定之类的功能。使用汽车类比,那么框架提供了一辆车的底盘,车身和发动机。 为了让车辆始终保持运行状态,你可以添加、删除或修改某些组件。

框架通常比库提供更高的抽象层,并且可以帮助您快速构建项目的 80%。但它的缺点是:

  • 如果应用程序超出了框架的范围,那么剩下的20%可能会很难完成;
  • 框架更新可能很困难 ;
  • 框架核心代码和概念很少更新,但是同样的事情,程序员往往都会在短时间内发现一个更好的解决方式;

Tools(工具)

工具有助于开发,但不是项目的一个组成部分。工具包括系统构建、编译器、转译器、代码压缩、图像压缩、部署机制等等。

工具应该提供一个更容易的开发过程。 例如,许多程序员喜欢用 Sass 编译成CSS,因为它提供了代码分离,嵌套,渲染时变量,循环和函数。 浏览器不了解 Sass / SCSS 语法,因此在测试和部署之前,必须使用适当的工具将代码编译为 CSS。

不要去标记项目类型

库,框架和工具之间的区别很少。框架可以包括一个库。库可以实施类似框架的方法。对于前面二者来说,工具又是必不可少的。
我试图标记每个提到的项目,看看他们属于库,框架还是工具,但尺度不同,标记的类型也可能会有所不同。

如果这听起来太复杂,可以考虑编写 vanilla JavaScript。没关系,但是您将不可避免地编写自己的库 和/或 框架代码。JavaScript 本身就是一种浏览器和操作系统抽象塔的抽象!

JavaScript 框架和库

项目根据流行度排序…

jQuery

jQuery
类型 library
官网 jquery.com
中文文档 jQuery API 中文文档 v3.2.1
代码仓库 github.com/jquery/jquery
当前版本 3.2.1
开发者 jQuery team
发布日期 August 2006
文件尺寸 30kb min
用途 通用
使用率 72.4% of all websites

jQuery 仍然是最常用的 JavaScript 库,WordPress,ASP.NET和其他几个框架的创建和分发都依赖于它。它彻底改变了客户端的开发,将 CSS 选择器引入到 DOM 节点检索加链接来应用事件处理程序、动画和Ajax调用。

虽然 jQuery 最近几年失宠,但对于需要少量 JavaScript 功能的项目来说,它仍然是一个可行的选择。

优点:

  • 分布规模小
  • 学习曲线平缓,在线帮助多
  • 语法简洁
  • 容易延伸

缺点:

  • 增加了本机API的速度开销
  • 浏览器兼容性的改善降低了它的性能
  • 用法扁平
  • 有些开发人员抵制使用

React

React
类型 library
官网 facebook.github.io/react/
中文文档 React 中文文档 v15.5.4
代码仓库 github.com/facebook/react
当前版本 15.5.4
开发者 Facebook 与 贡献者
发布日期 March 2013
文件尺寸 21kb min
用途 单页面应用
使用率 low

React 也许是过去一年里最受关注的库了吧。React 是一个用于构建用户界面的 JavaScript 库,它专注于 MVC 模式(Model-View-Controller) 的 “View” 部分,并且可以轻松创建保留状态的 UI 组件。 它是实现虚拟 DOM 的第一个库, 内存结构计算差异,有效地更新页面。

从统计数据中看,反应的使用似乎很低,可能是因为它更多的在应用程序中使用,而不是网站上使用。38%的程序员表示他们正在使用该库(愚人码头注:译文)

优点:

  • 小巧,高效,快捷灵活
  • 简单的组件模型
  • 良好的文档和在线资源
  • 适用于服务器端渲染
  • 处于高速发展期

缺点:

  • 需要学习新的概念和语法
  • 构建工具必不可少
  • 要求其他库或框架提供 Model 和 Control
  • 与修改 DOM 的代码和其他库不兼容

Lodash 和 Underscore

Lodash
类型 library
官网 lodash.com/
中文文档 Lodash 中文文档 v4.16.1
代码仓库 github.com/lodash/lodash/
当前版本 4.17.4
开发者 John-David Dalton
发布时间 April 2012
文件尺寸 4kb – 24kb min
用途 通用
使用率 low
Underscore
类型 library
官网 underscorejs.org/
中文文档 Underscore.js 中文文档 v1.8.3
代码仓库 github.com/jashkenas/underscore
当前版本 1.8.3
开发者 Jeremy Ashkenas
发布日期 October 2009
文件尺寸 6kb min
用途 通用
使用率 low

本节将 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应用程序框架)。最流行的版本是 1.x 版本,它使用双向数据绑定扩展 HTML ,同时将 DOM 操作与应用程序逻辑分离 。

尽管版本2(现在是版本4!)已经发布,Angular 1.x仍在开发中。 见下文…

优点:

  • 众多大公司采用
  • 以单一的解决方案来生产现代 Web 应用程序
  • “标准” MEAN 堆栈(MongoDB,Express.JS,AngularJS,NodeJS) 的一部分,有众多文档和教程可用来参考

缺点:

  • 学习曲线更加陡峭
  • 代码库很大
  • 不能升级到Angular 2.x

Angular 2.x (现在是 4.x)

Angular
类型 框架
官网 angular.io
仓库地址 github.com/angular/angular.js
最新版本 4.1
开发者 Google
发布日期 2016年9月
文件尺寸 450kb min
用途 单页应用
使用率

Angular 2.0 于 2016 年 9 月发布。这是一次完全的重写,它引入了基于模块化组件的模型,使用 TypeScript(被编译为JavaScript )创建。让人困惑的是,版本 4.0 于 2017 年 3 月发布( v3 被跳过以避免语义版本的问题)。

Angular 2+ 与 v1 截然不同。与其他也不兼容 – 也许 Google 应该给该项目另外起一个名字。

优点:

  • 单一的解决方案来生产现代Web应用程序;
  • 尽管 Angular 2+ 教程 较少,但它仍是 MEAN 堆栈的一部分
  • 对于熟悉静态类型语言(如 C# 和 Java )的人员,TypeScript 提供了一些优势

缺点:

  • 更陡峭的学习曲线
  • 代码库很大
  • 不能从 Angular 1.x 升级
  • 与 1.x 相比,Angular 2.x 的使用率相对较低
  • 尽管是Google的项目,但 Google 似乎并没有使用它?

Vue.js

Vue.js
类型 框架
官网 vuejs.org
仓库地址 github.com/vuejs/vue
最新版本 2.0
开发者 Evan You
发布日期 2014年2月
文件大小 19kb min
用途 单页应用
使用率

Vue.js 是一个用于构建用户界面的轻量级渐进式框架。core(核心) 提供了一个类似于 React 的虚拟 DOM 视图层,它可以与其他库集成,但它也能支持单页应用程序。该框架由以前在 AngularJS 工作过的 Evan You 创建,所以该框架提取了 AngularJS 中作者喜欢的部分。

Vue.js 使用 HTML 模板语法将 DOM 绑定到实例数据。模型是在更改数据时更新视图的纯 JavaScript 对象。附加工具提供了脚手架,路由,状态管理,动画等功能。

优点:

  • 易于上手,普及度高
  • 起点简单,但完成满意度高
  • 依赖性小,性能好

缺点:

  • 是一个新项目,所以风险可能会很大
  • 依赖开发人员来更新
  • 相对同类框架,资源较少;(愚人码头注:在国内似乎不存在这个缺点)

Backbone.js

Backbone.js
类型 框架
官网 backbonejs.org
中文文档 Backbone.js 中文文档 v1.1.2
仓库地址 github.com/jashkenas/backbone/
最新版本 1.3.3
开发者 Jeremy Ashkenas
发布日期 2010年10月
文件大小 8kb min
用途 单页应用
使用率

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 min
用途 单页应用
使用率

Ember.js是基于Model-View-ViewModel(MVVM)模式的框架之一。 它在单个包中实现模板化,数据绑定和库。如果 Ruby on Rails体验的用户,能够迅速熟悉其配置概念。

优点:

  • 为客户端应用程序提供单一解决方案
  • 程序员可以快速开发—其使用 jQuery
  • 良好的向后兼容性和升级选项
  • 采用了现代 Web 开发标准

缺点:

  • 大分配 large distributable
  • 与其他正在向较小组件结构移动的框架相比,被认为是单一的
  • 陡峭的学习曲线

Knockout.js

Knockout.js
类型 框架
官网 knockoutjs.com
仓库地址 github.com/knockout/knockout
最新版本 3.4.2
开发者 Steve Sanderson
发布日期 2010年7月
文件大小 59kb min
用途 单页应用
使用率

较早的MVVM框架之一,Knockout.js 使用观察者来确保 UI 与底层数据保持同步。它具有模板和依赖关系跟踪。

优点:

  • 小而轻便,无依赖
  • 支持回溯到IE6
  • 优质文档

缺点:

  • 较大的项目可能变得复杂
  • 发展速度已经放缓
  • 使用情况正在下降

值得注意的项目

如果你希望了解更多项目?以下项目不太受欢迎,但值得考虑:

  • Polymer – 一个可以跨浏览器支持HTML5 Web组件的库。
  • Meteor – 一个用于 Web 应用程序的全栈平台。
  • Aurelia – 一个相对较新,轻量级的跨平台框架。
  • Svelte – 一个非常新的项目,它将框架源代码转换为干净的 JavaScript。
  • Conditioner.js – 一个基于状态自动加载和卸载模块的库。

Tools(工具):通用的任务执行工具

构建工具可自动执行各种 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 包管理器,但是它的 scripts 功能可以用于通用的任务执行。对于那些没有多少依赖性的简单项目来说,这是一个很不错的选择。然而,对于复杂的任务来说,它可能就有些力不从心。

Grunt

Grunt
官网 gruntjs.com
仓库地址 github.com/gruntjs/grunt
最新版本 1.0.1
月下载量 200万

Grunt 是第一个实现批量执行的 JavaScript 任务执行器,但速度和复杂的JSON配置导致了 Gulp 的崛起。现在,最糟糕的问题已经解决,Grunt 仍然是一个不错的选择。

Tools(工具):模块打包工具

管理多个 JavaScript 文件是一件繁琐的事情。在默认情况下,浏览器文件未被编译,因此依赖关系必须以适当的顺序加载或连接。
虽然有很多选项,如 ES6 ModulesCommonJS ,但浏览器支持是有限的,因此模块打包工具变得至关重要。

Webpack

Webpack
官网 webpack.js.org
中文文档 webpack 中文文档 v2.2
仓库地址 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
月下载量 100万

RequireJS 是一个浏览器中的模块加载器,它也可以在Node.js中使用。

Tools(工具):代码检查工具(Linting)

愚人码头注:很多编辑器,IDE都集成了这类相关的工具,或许对你来说这些工具挺陌生,但是其实你一直在使用。

“Linting” 是分析你的代码中潜在错误 或 偏离语法标准的隐患。有了这种工具,你永远不会遗漏一个结束括号 或 未声明一个变量!

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万

一个灵活的 JavaScript 代码检查工具,它能在真正的错误 和 看似错误的语法需求之间找到一个平衡点。JSHint是我个人最喜欢的。

JSLint

JSLint
官网 jslint.com
仓库地址 github.com/reid/node-jslint
最新版本 0.10.3
月下载量 5万

这是最先实现一套严格默认规则的代码校验工具之一,但是这对于我是使用场景貌似不太一致(我不喜欢使用这个工具)。

Tools(工具):测试套件

测试驱动开发(Test-Driven-Development) 需要求你在开始编写代码之前,首先编写测试代码来测试你的代码。也欢迎你编写代码来测试你的测试代码!

代码测试的工具有很多,如 AvaTapeJest,但最流行的三个选项是:

Mocha

Mocha
官网 mochajs.org
仓库地址 github.com/mochajs/mocha
最新版本 3.3.0
月下载量 500万

Mocha 是一个 JavaScript 测试框架,可以在 Node.js 或 浏览器 中运行测试。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
月下载量 2.5万

毫无疑问,QUnit是一个单元测试框架,它可以在传递特定参数时检查函数结果。它还将报告测试覆盖率,以确保您没有遗漏特定的代码分支。

Tools(工具):其他测试工具

尽管我尽了最大的努力,但我也不是每个人都喜欢 JavaScript !诸如 TypeScriptLiveScriptCoffeeScript 等编译器可以使你的开发生活更加愉快。或者,考虑一下 Babel 转译工具,它可以将现代的、简洁的 ES2015 源代码转译为跨浏览器兼容的 ES5 代码。

有几十种 JavaScript 驱动的 HTML 模板引擎,包括 MustacheHandlebarsPug (Jade)EJS 。但就我而言,更喜欢保留 JavaScript 语法(如 EJSdoT )的轻量级选项。

最后,当你可以自动化生成文档时,为什么要自己编写呢?与ES2015兼容的文档生成器包括 ESDocJSDocJSDoc 中文文档) ,YUIdocdocumentation.jsTranscription

总结与建议

如果你想跟上在技术的潮流,那么 React 以及和其相关的技术发展方向值得关注。如果你想要为Web应用程序选择一个安全、通用的选项,那么你可以考虑 Vue.js

虽然整体框架现在不再那么受欢迎,但是如果你是要做严格的大型项目结构,AngularJS 会是一个不错的选择。虽然,现在大多数人还在使用 1.0 版本,但是可能不是长久之计。从长远来看,学习一下 TypeScript ,选择 4.0 版本会更加安全。

不要贬损 jQuery 。它虽然已经不怎么流行了,在技术媒体上也很少提及,但它还在积极的开发维护,而且完全能够胜任网站和应用程序的开发。jQuery 学习曲线平缓,并且全世界的许多开发人员都可以很好的理解。

如果你敢于冒险,喜欢尝鲜,Svelte 是一个有趣的 客户端/服务器 选项它在构建时预先渲染 JavaScript,并可能改变我们开发的方式。

工具的选择会因项目而异。大多数使用的是 Gulp ,但是 WebPack 越来越受欢迎。你可以用 ESLintMocha 进行测试,但是有很多其他的选择。

也就是说,每个项目、团队和技能都是不同的。你的评估时间有限,所以你很容易使用你所知道的东西。这篇文章将会接受评论和建议,但是当你有一把锤子的时候,一切看起来都像钉子。

最后,不要忘记库、框架和工具是可选的!在过去的十年中,JavaScript 的开发已经发生了革命性的变化; 我们已经从几个简陋的辅助库选择的时代进入到了一个压倒性的选择的时代。所以很容易陷入日益复杂的陷阱,或者每隔几个月就切换到最新最热框架。对于小型的或简单的任务考虑使用轻量级的 JavaScript 库或框架。在为其他项目选择框架时,现有的知识不会变成无价之宝。

我是否错过了你最喜欢的JavaScript库、框架或工具?我当然有!欢迎评论…

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

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

3 条评论 - 关于 “2017年最佳JavaScript框架,库和工具

发表评论

电子邮件地址不会被公开。 必填项已用*标注