AngularJS2017最好的JavaScript框架、库和工具 — SitePoint

与开发者数量相比较,只怕有更加多的JavaScript框架、库和工具。停止到二零一七年四月,在GitHub上飞速搜索能搜到超过110万的JavaScript项目。 在npmjs上有50万的可用包,并且那些包每一个月的下载量将近100亿次。

2017.05.29: 更新了本文,目的在于能科学的描述当前JavaScript生态的气象。

正文重视讲述近来最风靡的客户端JavaScript框架、库和工具之间的基本差别和他们的基本介绍。至于是否你要摸索的拔尖实践那是此外贰个问题。你能够挑选四个,并坚定不移运用一段时间,你要知道您最喜悦的那些有大概被“更好”的所代表,而任由您是还是不是选择使用那个更好的。

大纲目录

读书本作品前,请接受下列条款和标准化…!

  • 因为JavaScript的升华百废具兴,所以本文揭穿后或许及时就过时了。

  • 自己所说的“最好”的情趣是“最受欢迎和流行的种类”。小编所列出的有所的免费/开源的类型也许没有您喜爱使用的百般。

  • 业已宣告病逝的花色,比如:YUI不在本文所列的列表中,即便它还有为数不少的使用者。

  • 正文只谈谈客户端的连串。一些能在服务端工作的纯服务端框架,比如:Express.js 或者 Hapi不在本文的研究列表中。

  • 有关每三个品类的新闻,笔者都以明知故犯简明扼要的概述,目标是为着促使你协调做越来越的钻研。

  • 每种体系都自身提供了二个“普及度目的”,然而显然总结数据往往都以不那么规范的,而且也有或者会误导外人,所以数据仅供参考。

  • 本身大概存在偏见,你也说不定期存款在偏见,每一种人都有大概存在偏见。本文列举的持有工具笔者并不是都有采用过,但小编会告诉你自作者最欣赏使用哪个,可是你应该依据自身的要求做出自身的评估和选取。

  • 在此注解,你的挑选导致的不佳的结果,小编和SitePoint不负任何义务。

复杂的术语

“框架(framework)”、“库(library)”和“工具(tool)”那些用语,对于差异的人在不一致时间分歧的语境下会有分裂的精晓,但对此这一个用语本文中应用的定义如下:

3个库是三个有团体的功能的汇集。三个天之骄子的库应该包蕴字符串处理、日期处理、HTML
DOM成分处理、事件处理、cookie处理、动画、互联网请求处理等功用。每一种封装好的API函数都能将值不易的归来给调用他的应用程序,该应用程序是依据你选择的效果去看情况贯彻的。那足以作为小车零件的挑选:你可以肆意的精选零件来组装叁个方可干活的完全车辆,可是你无法不协调去建造你本人的外燃机。

库经常提供的是二个更高的悬空级别,那对于贯彻细节和差别性会越加平缓和雅致。例如:Ajax日常会凭借XMLHttpRequest
API
,可是那须求几行代码就足以兑现拍卖跨浏览器的轻微的表现差异。库会提供多少个ajax()函数,而你能够肆意的瞩目标去落实您的更高级其余事体逻辑即可。

付出中利用贰个库,可以节约伍分一的支出时间,因为你不必去关爱某一功力具体的兑现细节。但是缺点是:

  • 借使你使用的仓库储存在bug,往往难以稳定和修补

  • 一旦有bug,不可能保险库的开销共青团和少先队会急速的宣布补丁

  • 三个补丁的翻新大概会招致API的变更,进而会促成你的代码要做要紧的变动来适应这一个补丁的换代。

框架

一个框架是一个应用程序的骨架。他供给您要以一种独特的章程(约定好的措施)举办软件的布署,必须特定的点进入你自个儿的逻辑。一般框架都会提供事件处理、存款和储蓄、数据绑定等功用。拿小车类比的话,框架会提供小车的礁盘、车身和内燃机。保险功用符合规律运维的情形下您可以加上、删除和修改有些零部件。

框架通常比库提供更高的虚幻级别,框架能够火速帮你创设你项目标4/5的行事。不过显明是:

  • 比方你的剩余的2/10的做事超过了框架的范围限定,将会变得很难做下去。

  • 框架的翻新是很困难的 – 假如是可更新的话

  • 框架的宗旨代码和定义很少是前进成熟的。处理同样的政工作时间开发者总是能找到更好的处理格局。

工具

2个简单易行的工具能够加强开销功能,不过那并不是类别中不可或缺的一有个别。一般工具都包罗:营造系统、编写翻译器、转换职能、代码压缩、图像压缩、铺排机制等职能。

工具应该提供三个更便于的付出流程。例如:很多开发者喜欢用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应用程序中动用那四个库。

优点:

  • 小 且 简单

  • 宏观的文书档案方便学习

  • 和多数的库、框架都以协作的

  • 不扩张内置对象

  • 客户端和服务端都足以采纳

缺点:

  • 唯有一对方法援救ES二零一五和翻新的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
于2014年4月发表。相相比前面包车型客车本子是一点一滴被重写了,2.x版本引入了应用TypeScript(必要被编写翻译为JavaScript)创制的基于模块化组件的模子。尤其混乱的是,在前年的三月份通知了4.0的本子(版本3一向被跳过,为了防止版本语义的难题)。

Angular 2+版本和v1版本之间具有根本的界别。 两者互不兼容—— 可能 谷歌应该给2+本子此外取多个不比的名字!

优点:

  • 营造现代web应用程序的十足化解方案

  • 依旧是 MEAN 技术栈的一有的,就算Angular 2+
    教程
     只有很少的一有个别是可用的

  • TypeScript提供了一些类似于静态语言(例如:C#、Java)的新特色。

缺点:

  • 相比较其余框架有着陡峭的学习曲线

  • 代码库文件不小

  • 心慌意乱从Angular 1.x本子间接进步

  • 与1.x相对而言,Angular 2.x的使用率相对较低

  • 就算是谷歌(谷歌(Google))项目,谷歌(Google)仿佛从未动用它?

Vue.js

Vue.js

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

Vue.js是叁个用于营造用户界面包车型地铁轻量级渐进式框架。Vue.js的中坚是提供2个像样于React的杜撰DOM服务于视图层,他不仅仅能够独自的塑造1个完整的单页面应用,也得以与别的库集成使用。该框架是由在此以前在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自称是几个库,因为她能够与别的门类并入。小编猜半数以上人都把她当做2个框架,即使不像别的人觉得的那么。

优点:

  • 小, 轻量 ,简单

  • 不在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 – 3个用以web应用程序的全栈平台。

  • Aurelia – 叁个较新的,轻量级的,跨平台的框架。

  • Svelte –
    贰个丰硕新的类型,这些体系得以把框架的源码解压缩并格式化为呈现本身的JavaScript。

  • Conditioner.js –
    2个基于状态自动决定加载也许卸载模块的库。

工具: 通用自行营造筑工程具

营造筑工程具得以自动构建种种web开发职责,比如:预编写翻译、编译、图像压缩优化、代码压缩、代码校验以及运转测试等。并且能够在单纯可进行的公文中管理所需的天职。最常用的工具如下所列:

Gulp.js

Gulp.js

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

居尔p.js并不是首先个电动构建筑工程具,但他快捷成为了最风靡的,他也是自己个人最喜爱用的。居尔p使用简单阅读的JavaScript代码,将源文件加载到流中,并在将数据输出到营造文件夹此前经过各类插件管道处理多少。它总结、飞速、有趣——居尔p.js和事先其余1个可选用相比你都会发现那个特点(examine
居尔p.js before any other option)。

npm

npm

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

npm是Node.js的包管理工科具,可是他的台本工具得以被用于通用的自行创设筑工程具。对于六个一向不过多注重的简练项目来说这是3个没错的挑选。然则,用于很复杂的天职你会快捷发现那是不现实的。

Grunt

Grunt

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

Grunt是第3个落到实处批量拍卖的JavaScript职责自动创设筑工程具之一,不过她的创设速度的瓶颈和复杂性的JSON配置导致了居尔p的全速前进。未来最倒霉的标题一度被化解了,Grunt依旧是三个很好的工具可供采纳。

工具:模块打包工具

治本愈多的JavaScript文件将连忙成为一个苦差事。一般景色下,浏览器加载文件是不会被编译的,所以文件之间的正视性关系必须经过适当的公文加载顺序来担保。处理那种顺序的主意有成都百货上千,比如: ES6
Modules
 和 CommonJSAngularJS,,然则浏览器援助的限量,模块打包工具变得必不可少。

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代码,通过编写翻译将兼具模块打包在3个浏览器兼容的文书中。

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(测试驱动开发)需求您先编写制定测试代码(用来测试工作代码),然后再初叶写作业代码。当然就算您能编写代码去测试你的测试代码那就更好了。

那般的工具你会有为数不少增选,比如:AvaTape 和 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!大概编写翻译器比如:TypeScriptLiveScript 和 CoffeeScript可见让你的付出生活变得有趣一点。其余,现代的转移工具Babel可见将精简的 ES2015代码转换为浏览器包容的ES5代码,大概又会让您有越多的意趣。

市面上以往设有几十二个JavaScript驱动的HTML模板引擎,比如:MustacheHandlebarsPug
(Jade)
 和 EJS。小编相比较援救于选取使用保持JavaScript语法的轻量模板,比如:EJS 和 doT

末段,
能自动生成文书档案的时候哪个人会愿意本身手动的去写啊?ES二〇一六协作的文书档案生成器有: ESDocJSDocYUIdocdocumentation.js 和 Transcription

小结和推荐介绍

越来越多来自小编的篇章

比方你挑选随大流,近年来群众的可行性恐怕曾经落伍于React等一类框架,而别的的库正在以看似的技巧可行性前进。对于web应用来说,那是一种通用的、安全的选项,可是你也应有考虑 Vue.js

全体性的框架未来逐步衰退,可是一旦你的大类型须求3个严酷架构的话,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
全数的审阅稿件人,让本站内容品质变得更高!

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

版权申明

本译文仅用于学习、商讨和交换指标,欢迎非商业转发。转发请评释出处、译者和众成翻译的完全链接。要获取包罗以上信息的正文马克down源文本,请点击这里

相关文章