AngularJS2017顶好之JavaScript框架、库和工具 — SitePoint

和开发者数量比,可能来重新多之JavaScript框架、库与工具。截止至2017年5月,每当GitHub上快搜索能够搜到超过110万底JavaScript项目。 当npmjs上起50万之可用包,并且这些保险每个月之下载量将近100亿软。

2017.05.29: 更新了本文,旨在能正确的叙说当前JavaScript生态之状态。

本文着重讲述目前最为盛的客户端JavaScript框架、库和工具里的主导差异及她俩的主干介绍。至于是勿是你如果摸索的顶尖实践那是另外一个题材。你得择一个,并坚持用一段时间,你而知你最欣赏的那么一个生或给“更好”的所代替,而不论您是否选择用此更好之。

大纲目录

  • 复杂的术语

  • 框架

  • 工具

  • 不要受我贴标签

  • JavaScript
    框架和货栈

  • jQuery

  • React

  • Lodash and
    Underscore

  • AngularJS
    1.x

  • AngularJS 2.x (now
    4.x)

  • Vue.js

  • Backbone.js

  • Ember.js

  • Knockout.js

  • 其余值得关注的

  • 工具:通用自动构建工具

  • Gulp.js

  • npm

  • Grunt

  • 工具:模块打包工具

  • Webpack

  • Browserify

  • RequireJS

  • 工具:代码校验工具

  • ESLint

  • JSHint

  • JSLint

  • 工具:测试框架工具

  • Mocha

  • Jasmine

  • QUnit

  • 工具:其他

  • 总暨推举

  • 评论

读书本文章前,请领下列条款及标准…!

  • 因为JavaScript的提高日新月异,所以本文揭示后恐怕及时就过时了。

  • 自所说的“最好”的意是“最给欢迎和流行的项目”。我所列有底具备的免费/开源的色或者没您喜爱下的那个。

  • 既宣布死亡之路,比如:YUI匪以本文所列的列表中,即使她还有许多底使用者。

  • 正文特谈谈客户端的门类。一些可知于劳务端工作的纯服务端框架,比如:Express.js 或者 Hapi非以本文的座谈列表中。

  • 有关各一个路之音,我还是明知故问简明扼要的概述,目的是为了促使你协调举行更加的研讨。

  • 诸一个类型还本人提供了一个“普及度指标”,但是明显统计数据往往都是不那么纯粹的,而且为发或会见误导别人,所以数据只是供参考。

  • 自己也许存在偏见,你也可能有偏见,每个人且出或是偏见。本文列举的享有工具我并无是还产生下了,但我会告诉您自己无比喜爱使用谁,但是若该因自己的要求做出自己之评估和挑选。

  • 于这声明,你的挑导致的不好的结果,我及SitePoint不靠任何事。

复杂的术语

“框架(framework)”、“库(library)”和“工具(tool)”这些用语,对于不同的人数于不同时空各异之语境下会来不同之知情,但对于这些词语本文中以的概念如下:

一个库房是一个闹组织的功效的集。一个名列前茅的库房应包括字符串处理、日期处理、HTML
DOM元素处理、事件处理、cookie处理、动画、网络要处理等功用。每个封装好之API函数都能够以价值是的回来给调用他的应用程序,该应用程序是根据你选择的功用去看情形贯彻之。这得当做汽车零件的选料:你得肆意的挑选零件来组装一个可干活之整车辆,但是你必自己去打你协调的发动机。

库房通常提供的是一个再次胜的肤浅级别,这对落实细节以及差异性会进一步平缓和淡雅。例如:Ajax通常会借助XMLHttpRequest
API,但是及时要几行代码就可兑现拍卖过浏览器的轻微的呈现差异。库会提供一个ajax()函数,而你可以自由之瞩目的失去贯彻公的双重强级别的事情逻辑即可。

付出被行使一个仓库,可以省20%之出时间,因为若莫肯定去关心有同效益具体的兑现细节。然而缺点是:

  • 如若您以的库存在bug,往往难以稳定与修复

  • 倘若出bug,不克保证库的开集团会火速的发表补丁

  • 一个补丁的换代可能会见导致API的转,进而会招致您的代码要开主要的更改来适应这补丁的更新。

框架

一个框架是一个应用程序的架。他要求您只要盖平等栽异常的艺术(约定好之不二法门)进行软件的筹划,必须特定的触发在你协调的逻辑。一般框架都见面供事件处理、存储、数据绑定等效果。拿汽车类比的话,框架会供汽车之底盘、车身同发动机。保证效益正常运作的情形下你可以长、删除和改动某些零部件。

框架通常比库提供再胜之悬空级别,框架能够快救助你构建而种之80%之做事。然而确定是:

  • 而你的结余的20%底干活超过了框架的限定限定,将会见变换得死为难开下去。

  • 框架的更新是坏困难的 – 如果是只是更新的口舌

  • 框架的基本代码和定义充分少是进化成熟之。处理同的工作时开发者总是能找到更好的处理方式。

工具

一个粗略的家伙能够提高支付效率,但是就并无是种类中必要的平等片。一般工具还饱含:构建系统、编译器、转换职能、代码压缩、图像压缩、部署机制当效果。

工具应该提供一个还便于之开发流程。例如:很多开发者喜欢用Sass错过开发CSS,因为Sass提供了代码分离、嵌套,渲染时变量、循环和函数。由于浏览器无法解析Sass/SCSS语法,所以在测试和布局之前代码必须经适当的工具编译为CSS代码。

决不给自家贴标签

库房、框架和工具里的分往往是歪曲的。框架可能会见凭借让一个储藏室。库或者能落实类似于框架的措施。工具对两者可能是必不可少的。我试着受每个门类加标签进行分类,但是范围或会见迥然不同。

如若您放起看就不过复杂的话,你得考虑使用vanilla
JavaScript进行编码。这任上大好,但是你以不可避免地修好之库或者在框架代码。JavaScript是浏览器与操作系统这点儿交汇抽象之上的同时平等重叠抽象。

JavaScript 框架和货栈

推广流行的门类…

jQuery

jQuery

key value
类型
官网 jquery.com
仓库地址 github.com/jquery/jquery
最新版本 3.2.1
开发者 jQuery team
发布日期 2006年8月
文件大小 30kb min
用途 通用
使用率 全球72.4% 的网站在使用

于WordPress、ASP.NET和其它几单框架中jQuery仍然是让采用最多的一个储藏室。
他引入了CSS选择器的措施去挑页面DOM节点、链式的事件处理方式、动画及Ajax调用的卷入在客户端是同样种植有开拓性的开发方式。

jQuery近年来随着前端技术的随地前进易得有点寂寞的蛛丝马迹,但于要采用JavaScript功能的种以来,它依旧是一个行之有效之选取。

优点:

  • 文件尺寸很有些

  • 入门简单(渐进的学习曲线),便捷的丝上攻应对社区环境

  • 精简之语法

  • 爱扩展

缺点:

  • 追加了个客户端的API速度开销

  • 浏览器兼容性的精益求精,使得其换的匪是那重大了

  • 于是法扁平

  • 一些 行业 抵制 反对无必要的使用.

React

React

key value
类型
官网 facebook.github.io/react/
仓库地址 github.com/facebook/react
最新版本 15.5.4
开发者 Facebook and contributors
发布日期 2013年3月
文件大小 21kb min
用途 单页面应用
使用率

可能是过去平年被极让关注的JavaScript库,React声称是一个构建用户界面的JavaScript库。React侧重于MVC开发模式面临的View的一对,并且可以又自在的始建保留状态的UI组件。他是首实现虚拟DOM的JavaScript库之一,它在内存中计算结构的差距然后很快的更新页面的显得。

统计中显示React的使用率并无赛,
可能是坐他深受用于应用程序而休是网站。大约38%底开发者声称会动React。

优点:

  • 文件小, 高效, 性能高, 灵活

  • 组件模型简单

  • 累加的文档和在线资源

  • 支持服务端渲染

  • 眼前异常盛,并且以报告发展

缺点:

  • 倘读新的定义与语法

  • 非得使靠构建工具

  • 想必要求外库或者框架来供model和controller部分的意义

  • 莫不跟改DOM的代码或者其他库不匹配

可由此我们的精品课程学习了解又多React,React the ES6
Way。

Lodash and Underscore

Lodash

key value
类型
官网 lodash.com/
仓库地址 github.com/lodash/lodash/
最新版本 4.17.4
开发者 John-David Dalton
发布日期 2012年4月
文件大小 4kb – 24kb min
用途 通用
使用率

Underscore

key value
类型
官网 underscorejs.org/
仓库地址 github.com/jashkenas/underscore
最新版本 1.8.3
开发者 Jeremy Ashkenas
发布日期 2009年10月
文件大小 6kb min
用途 通用
使用率

Lodash 和 Underscore
在本节遭遇齐声在了一如既往块,因为她还提供了数百独功能性的JavaScript实用程序来扩大原生字符串,数字,数组和另外原本对象的措施,他们是一律类的堆栈。他们中间的法力发生一些再次,所以若不能够为无须在跟一个类别中并且用这简单只仓库。

客户端使用率挺没有,但是足以在劳动器端的Node.js应用程序中以就简单独仓库。

优点:

  • 小 且 简单

  • 到之文档方便学习

  • 暨大部分底库、框架都是匹配的

  • 未扩大内置对象

  • 客户端以及服务端都得使

缺点:

  • 一味生一对方法支持ES2015暨换代的JavaScript版本

AngularJS 1.x

AngularJS

key value
类型 框架
官网 angularjs.org
仓库地址 github.com/angular/angular.js
最新版本 1.6.4
开发者 Google
发布日期 2010年10月
文件大小 144kb
用途 单页应用
使用率

Angular是率先只冒出于本文列表中的MVC应用程序框架 。Angular的太盛行的本就是1.x本,他支持HTML和数目的双向绑定,并打作业逻辑中解耦DOM的操作。

Angular 1.x
版本仍在进步,尽管版本2(现在凡本4了)已经宣告。不知道?往生看…

优点:

  • 受几贱非常店普遍使用的流行框架

  • 构建现代web应用程序的纯粹解决方案

  • MEAN (MongoDB, Express.JS, AngularJS,
    NodeJS)技术栈的等同组成部分,有大量的章与科目可供应就学

缺点:

  • 相比其他框架有着陡峭的求学曲线

  • 代码库文件充分非常

  • 无法直接提升到Angular 2.x版

  • 尽管是谷歌项目,谷歌似乎没有下她?

Angular 2.x (现在 4.x)

Angular

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

Angular 2.0
于2016年9月揭晓。相较前面的版是一心受再度写了,2.x版本引入了动用TypeScript(需要被编译为JavaScript)创建的依据模块化组件的模型。更加混乱的是,在2017年的3月份通告了4.0底版(版本3直接被跳过,为了避免版本语义的题目)。

Angular 2+版本和v1版本里有根本的别。 两者互不兼容—— 或者 Google
应该受2+版另外获得一个不一的讳!

优点:

  • 构建现代web应用程序的十足解决方案

  • 还是是 MEAN 技术栈的同样局部,尽管Angular 2+
    教程 只发很少的一样组成部分是可用之

  • TypeScript提供了部分近乎于静态语言(例如:C#、Java)的初特色。

缺点:

  • 相比另框架有着陡峭的攻曲线

  • 代码库文件充分怪

  • 束手无策从Angular 1.x版本直接提升

  • 同1.x对照,Angular 2.x底使用率相对比逊色

  • 尽管是谷歌项目,谷歌似乎没有采用她?

Vue.js

Vue.js

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

Vue.js是一个用于构建用户界面的轻量级渐进式框架。Vue.js的主干是提供一个类于React的虚拟DOM服务让观看图层,他不仅可以独自的构建一个完全的单页面应用,也可同另外库集成使用。该框架是由于前以AngularJS工作了之尤雨溪创建的。

Vue.js使用HTML模板的语法绑定DOM实例数据。模型就是平常的JavaScript对象,当数码给改变时,它见面自动更新视图。另外还提供了Vue.js生态工具,其中包括:脚手架(scaffolding)、路由于(routing)、状态管理(state
management)、动画(animations)等。

优点:

  • 迅速上扬普及,并且日益盛行

  • 老大容易出出强质量之类,让开发者很有成就感

  • 依小,性能好

缺点:

  • 乍路利用Vuejs——可能有非常酷风险

  • 仰让单个开发者(目前者项目是过小右一个丁开)的换代

  • 相较于其他框架,Vuejs的教程资源不多

Backbone.js

Backbone.js

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

Backbone.js是提供于劳务器端框架中广泛的MVC结构的极致早的客户端选项之一。Backbone.js只来Underscore.js一个借助,而且Backbone.js和Underscore.js都是来自和一个开发者的手。

Backbone.js自称是一个仓房,因为他好跟其他类并。我猜大部分总人口都将他当做一个框架,尽管未像其他人觉得的那样。

优点:

  • 小, 轻量 ,简单

  • 莫以HTML中上加业务逻辑

  • 全面之文档

  • 成千上万应用程序使用,如:Trello, WordPress.com, LinkedIn 和 Groupon 等

缺点:

  • 相较于任何框架(如AngularJS)它的肤浅级别很没有(尽管这给用作一种植优势)

  • 待借助其他零件来实现有功能,例如:数据绑定功能

  • 现阶段逾多之框架已经不再动用MVC结构了

Ember.js

Ember.js

key value
类型 框架
官网 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)

  • 暨那些为小组件结构的大势前行之框架相比他是巨大笨重的

  • 陡的念曲线——这是Ember学习的措施要没法修

Knockout.js

Knockout.js

key value
类型 框架
官网 knockoutjs.com](http://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 –
    一个因状态自动决定加载或者卸载模块的堆栈。

工具: 通用电动构建工具

构建工具得以活动构建各种web开发任务,比如:预编译、编译、图像压缩优化、代码压缩、代码校验以及运行测试相当。并且可于单纯而实施的文本被管理所需的任务。最常用的工具如下所列:

Gulp.js

Gulp.js

key value
官网 gulpjs.com
仓库地址 github.com/gulpjs/gulp
最新版本 3.9.1
月下载量 300万

Gulp.js并无是首先个自动构建工具,但他很快变成了极其风靡的,他呢是自己个人最好欢喜用的。Gulp使用善阅读之JavaScript代码,将自文件加载到流中,并以将数据输出到构建文件夹之前经过各种插件管道处理数量。它大概、快速、有趣——Gulp.js和事先其他一个可卜比较而还见面发现这些特色(examine
Gulp.js before any other option)。

npm

npm

key value
官网 npmjs.com
仓库地址 github.com/npm/npm
最新版本 4.5.0
月下载量 300万

npm是Node.js的担保管理工具,但是他的脚本工具得以给用来通用的活动构建工具。对于一个没过剩乘的大概项目来说这是一个不错的抉择。但是,用于深复杂的职责而见面飞发现及时是无现实的。

Grunt

Grunt

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

Grunt是首先独实现批量拍卖的JavaScript任务自动构建工具有,但是他的构建速度之瓶颈和错综复杂的JSON配置导致了Gulp的很快发展。现在最不好之题目早已让解决了,Grunt仍然是一个怪好的工具而供应选择。

工具:模块打包工具

管制越来越多的JavaScript文件拿快速变成一个苦差事。一般景象下,浏览器加载文件是休会见于编译的,所以文件中的负关系要通过适当的文件加载顺序来担保。处理这种顺序的道发生不少,比如: ES6
Modules 和 CommonJS,但是浏览器支持之界定,模块打包工具变得必不可少。

Webpack

Webpack

key value
官网 webpack.js.org
仓库地址 github.com/webpack/webpack
最新版本 2.5.1
月下载量 600万

Webpack支持所有流行的模块配置,并就改成React开发之代名词。虽然Webpack声称是模块打包工具,Webpack也可用来通用的全自动构建工具。

Browserify

Browserify

key value
官网 browserify.org
仓库地址 github.com/substack/node-browserify
最新版本 14.3.0
月下载量 260万

Browserify可以为您以Node.js的CommonJS模块方式来团而的JavaScript代码,通过编译将有模块打包在一个浏览器兼容的文书被。

RequireJS

RequireJS

key value
官网 requirejs.org
仓库地址 github.com/jrburke/r.js
最新版本 2.3.3
月下载量 100万

RequireJS是一个于浏览器端(客户端)的模块加载器,尽管他吗会给用于Node.js端(服务端)。

工具: 代码校验工具

“代码校验工具(Linting)”会分析你的代码,检测代码中潜在的谬误以及无正经的语法结构。这样您的代码中即不见面还冒出缺失括号或者不声明的变量这样的错。

ESLint

ESLint

key value
官网 eslint.org
仓库地址 github.com/eslint/eslint
最新版本 3.19.0
月下载量 600万

ESLint是一个而插拔的代码校验工具。每一个校验规则都是一个插件来贯彻,所以他得灵活配置成你所用之指南。

JSHint

JSHint

key value
官网 jshint.com
仓库地址 github.com/jshint/jshint
最新版本 2.9.4
月下载量 200万

一个活的JavaScript代码校验工具,他可好好的于真正的谬误与严的语法要求里赢得大好的平衡(既好窥见代码中之错误,又未必严格的照死板的语法标准来校验代码)。JSHint是自我个人太欣赏用的一个校验工具。

JSLint

JSLint

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

就是首批实现平等效严格默认规则之代码校验工具有,但是及时对于自身是使用状况貌似不太一样(我未希罕下这个家伙)。

工具: 测试工具

TDD(测试驱动开发)需要而先编制测试代码(用来测试工作代码),然后再次开勾画作业代码。当然如果你能够编代码去测试你的测试代码那便再也好了。

这么的工具而会出诸多挑,比如:Ava, Tape 和 Jest ,但是最为盛的老三单如下所列:

Mocha

Mocha

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

Mocha是一个既可以Node.js运行吧可以在浏览器运行的JavaScript测试框架。Mocha支持异步的测试办法,他平常与Chai合下,为了使测试代码能够为相同种植而读之法子为代表。

Jasmine

Jasmine

key value
官网 jasmine.github.io
仓库地址 github.com/jasmine/jasmine-npm
最新版本 2.6.0
月下载量 200万

Jasmine是千篇一律暂缓行为令的测试工具,他可以自动测试你的UI和浏览器被之互行为。

QUnit

QUnit

key value
官网 https://qunitjs.com/
仓库地址 github.com/kof/node-qunit
最新版本 1.0.0
月下载量 2.5万

一定,QUnit是一个单元测试框架,他得以于传递特定参数时检查函数结果。它还将上报测试覆盖率,以保险您没有遗漏特定的代码分支。

工具:其他

尽管自己一直了生老之极力,我要接受有人不喜欢JavaScript!也许编译器比如:TypeScript, LiveScript 和 CoffeeScript会为您的支出在变得有趣一点。另外,现代之变工具Babel能将简单之 ES2015代码转换为浏览器兼容的ES5代码,也许又见面被您发出重多之意。

市面上现设有几十个JavaScript驱动的HTML模板引擎,比如:Mustache, Handlebars, Pug
(Jade) 和 EJS。我较支持于选以保持JavaScript语法的轻量模板,比如:EJS 和 doT。

末,
能自动生成文档的时节谁会愿意自己手动的夺写吧?ES2015匹的文档生成器有: ESDoc, JSDoc, YUIdoc, documentation.js 和 Transcription。

总结及推介

还多来作者的章

  • 网被尽令人讨厌的“黑暗模式”

  • 而的Web主机通过这7宗测试了邪?

设您选按大流,目前群众的主旋律或已经落伍于React对等一样类框架,而任何的库正在因类的技能方向前行。对于web应用来说,这是同种植通用的、安全的挑三拣四项,但是若也该考虑 Vue.js。

整体性的框架现在日益衰退,但是只要您的死类要一个严架构的话,AngularJS一如既往是一个没错的选。大部分口准坚称以V1.0本,但是就也许是出于项目用逼不得已的挑选。长期来拘禁,如果您肯学TypeScript,版本4+会是一个一发安全之抉择。

无须忽视jQuery。尽管他不是新潮的技能可行性,也非会见于各种科技讯中冒出,但它们是知难而进进步的,而且对网站同应用程序都出双重好的劳务支撑能力。众所周知,jQuery有着平滑的求学曲线。

假定您是喜挑战的话,Svelte大凡一个诙谐之客户端/服务端的挑选项,它亦可以构建时预渲染JavaScript,这恐怕能改我们的开发方式。

工具的取舍不是极重要,可能会见盖项目而异。Gulp是用最多的,但是WebPack正好更换得更加流行。使用ESLint 和 Mocha用来测试会为您免会见出错,但连无是只有及时半独可利用,也有为数不少的另工具得以运用。

也就是说,所有的门类、团队及技能栈都是例外的。技术选型的时光你的评估时是少的,所以您非常可能就是会下你懂之艺。本文将见面收推荐的茫然框架,但当你生锤子的早晚,一切看起来还如钉子一样(原文:
This article will receive comments recommending FrameworkX but
everything looks like a nail when you have a hammer.)。

最后,不要遗忘那些可供应选择的框架、库和工具!JavaScript开发在过去十年被生出了翻天覆地的扭转,我们已由几独核心的辅助库变成了一个压倒性的选料。我们特别容易陷入更为复杂的出陷阱,或者各级隔几个月就是切换到新型的风靡框架。小的私有项目可以考虑采用vanilla
JavaScript。在呢另外门类选择框架时这些文化无会见过时,这一点凡是坏可贵的。

自家没有排有而太欣赏以的JavaScript框架、库与工具?当然我会有脱! 欢迎给自身留言补充…

本文审校:Panayiotis
Velisarakos 和 Sebastian
Seitz。 感谢SitePoint’s
所有的审稿人,让本站内容质量变得更胜似!

翻译注:由于水平有限,如产生异议欢迎指正,谢谢~

版权声明

本译文仅用于学习、研究以及交流目的,欢迎非商业转载。转载请注明出处、译者跟众成翻译的整链接。要抱包含以上信息之正文Markdown源文本,请点击这里。

相关文章