二〇一七年前端框架、类库、工具大比拼

相对而言于JavaScript开发职员的数据,近日JavaScript框架、类库和工具的数量就好像越多一些。结束前年五月,GitHub上的长足搜索显示,有抢先110万个JavaScript项目。npmjs.org有50万个可用的软件包,每月下载量近100亿次。

本文将会谈谈近来非常盛行的客户端JavaScript框架、类库和工具以及它们中间的主导差距。可能本文无法告知您哪些是最棒的,但是最契合本身项指标,就是最棒的。

类库

类库是2个有集体的机能汇集。典型的类库包罗字符串处理、日期、HTML
DOM成分、事件、库克ie、动画、互联网请求等功效。你能够团结达成一个函数,以便选用该函数被调用时是还是不是要求再次回到2个值。

类库平时提供一种高级其余空洞方法,可以接济顺遂落到实处项目标细节部分。例如,Ajax经常依赖于XMLHttpRequest
API,只需求几行代码就贯彻效益,只是浏览器之间存在细微的差异。类库提供了更简明的ajax()函数,因此开发者能够小心于更高级别的工作逻辑上。

类库能够使将支付时间减少20%,开发者不必担心细节达成。

只是也有欠缺:

  • 类库中的错误难以稳定和修复

  • 支出公司不可能担保高速公布补丁

  • 补丁程序可能会更改API,导致大气代码必须变更

  • 学习进程中相见如何难题照旧想取得学习财富的话,欢迎参与学习调换群
    343599877,大家一同学前端!

框架

框架是应用程序的骨架。它要求以一定的法子来拓展软件设计,在好几节点上落到实处自个儿的逻辑。框架经常提供了事件、存款和储蓄和数目绑定等成效。

框架日常提供了比类库更高层次的空洞,协助飞快营造项目标前80%。

框架的弱项:

  • 假如您的应用程序超出了框架的限制,最终20%也许会很难

  • 框架更新很困苦

  • 主干框架代码和定义很少更新

工具

工具会拉扯开发工作,但却不是类别的组成都部队分。工具包含营造系统、编写翻译器、转译器、代码分割器、图像压缩器、布置机制等。

工具帮助达成二个更便于的支出进度。例如,相比较于CSS,许多编码者更欣赏Sass,因为它提供了代码分离、嵌套、渲染时变量、循环和函数。浏览器不了解Sass
/ SCSS语法,由此在测试和安顿在此之前,必须利用相当的工具将代码编写翻译为CSS。

类库、框架和工具的分别

类库、框架和工具之间的分别一点都不大。框架能够回顾1个类库,类库可以兑现类似框架的格局,项目中别的一种工具都以必备的。所以不供给显著的分别类库、框架和工具。

JavaScript框架和类库

以下是奉公守法流行水平实行的排序:

jQuery

Node.js 1

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成效的系列来说,如故是1个好选取。

优点:

  • 遍布范围小

  • 读书曲线平缓,丰裕的在线扶助

  • 简洁的语法

  • 不难开始展览

缺点:

  • Node.js,追加了原生API的进程成本

  • 浏览器包容性糟糕,但已得到改良

  • 用法扁平

  • 有的行业反对利用

Lodash 和 Underscore

Node.js 2

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实用程序来补充原生字符串、数字、数组和任何原始对象方法。尽管五个类库之间有部分重叠,可是不太可能在2个项目中而且利用这四个类库。

虽说三个类库在客户端使用率非常的低,不过却能够在服务器端的Node.js应用程序中选择那三个类库。

优点:

  • 小而简易

  • 能够的文档易于学习

  • 与超过45%类库和框架包容

  • 不扩展内置对象

  • 能够在客户端或服务器上使用

缺点:

  • 稍加措施只在ES二零一五及更高版本的JavaScript中可用。

AngularJS 1.x

Node.js 3

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)

Node.js 4

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

Angular
2.0于二零一六年7月公布。那是三个完全的重写,它引入了选取TypeScript创立的遵照模块化组件的模子。Angular
4.0于前年六月发布。

Angular 2.x与v1版本截然区别,也不与别的版本兼容– 恐怕谷歌(Google)应该给项目起一个见仁见智的名字!

优点:

  • 支出现代Web应用程序的化解方案

  • 是专业MEAN栈的一片段,固然只有为数不多的学科可用

  • 对此熟知静态类型语言(如C#和Java)的开发人士,TypeScript提供了一部分优势。

缺点:

  • 上学曲线陡峭

  • 大的代码库

  • 不能从Angular 1.x升级

  • 与1.x对待,Angular 2.x较难驾驭

  • 学习进程中蒙受什么难题要么想赢得学习财富的话,欢迎加入学习交换群
    343599877,大家一齐学前端!

React

Node.js 5

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

React是1个用来创设用户界面包车型地铁JavaScript类库,也是2018年最受关怀的类库。它小心于Model-View-Controller(MVC)开发的“View”部分,使用它能够轻松创立保留状态的UI组件。它是促成虚拟DOM的首要采纳类库之一, 它的内部存款和储蓄器结构能够使得地持筹握算差距,页面更新也特别实用。

计算显示React的使成本如同十分的低,因为它是在应用程序中行使而不是在网站。

优点:

  • 神工鬼斧,高效,快速灵活

  • 简短的组件模型

  • 非凡的文书档案和在线财富

  • 可达成服务器端渲染

  • 脚下受欢迎,经历了飞快拉长

缺点:

  • 须求学习新的定义和语法

  • 打造筑工程具很重庆大学

  • 内需别的类库或框架提供model和Controller部分

  • 与修改DOM的代码和其他类库不匹配

叩问越多关于React the ES6 Way

Vue.js

Node.js 6

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

Vue.js是3个用来营造用户界面包车型大巴轻量级渐进框架。它提供了四个接近React的虚构DOM驱动视图层,能够与其余类库集成,用于营造强大的单页面应用。该框架是由事先在AngularJS工作过的EvanYou创制的,他领取了AngularJS中友好喜欢的一部分。

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

优点:

  • 能够快捷利用,并且稳步普及

  • 很简单提升高水准开发人士的满足度

  • 凭借小,品质好

缺点:

  • 一个较新的花色 – 风险恐怕会更大

  • 局地重视开发职员实行翻新

  • 比较之下于其余框架,财富较少

Backbone.js

Node.js 7

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

Node.js 8

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

Node.js 9

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开发职务,例如预处理、编写翻译、优化图像、减弱代码、代码分析和平运动行测试等。任务可以在2个可进行李包裹中集合保管。

日前最受欢迎的工具如下:

Gulp.js

Node.js 10

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

尽管居尔p不是第二个任务履行工具,它却非常的慢变成了最受欢迎的。居尔p使用简单阅读的JavaScript代码,将源文件加载到流中,并在将数据输出到构建文件夹在此之前,通过各类插件管理数据。在任何别的选项从前检查居尔p.js是粗略、快捷和有趣的。

NPM

Node.js 11

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

npm是Node.js包管理器,但其脚本工具可用以运维通用任务。对于具有少量凭借关系的回顾项目以来,那是3个很好的选拔。不过,更复杂的职分大概会变得不太适用。

Grunt

Node.js 12

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

Grunt是率先批被大面积利用的JavaScript职分执行工具之一,但其速度和复杂的JSON配置却招致了居尔p的起来。未来那一个标题早就获得了缓解,Grunt依旧是二个受欢迎的挑三拣四。

工具:模块绑定

四个JavaScript文件的管住已经济体制改进为了一件繁琐的事情。默许情状下,浏览器文件不会被编写翻译,因而其借助关系必须以妥帖的逐条举行加载或连续。就算有像ES6模块和CommonJS那样的选项,不过浏览器支持是有限的,因而模块绑定变得那些器重。

WebPack

Node.js 13

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

Webpack援助具有流行的模块选项,并已化作React开发的代名词。尽管Webpack声称是1个模块捆绑程序,不过曾经得以当作通用职责运维程序了。

Browserify

Node.js 14

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

Browserify支持Node.js正在接纳的CommonJS模块,它将有着模块编译成单个浏览器包容的文本。

RequireJS

Node.js 15

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

RequireJS是一种浏览器中的模块加载器,它也得以在Node.js中利用。

工具:代码分析

代码分析工具用于分析代码中潜在错误或离开语法的科班。八个未闭合括号或未申明的变量一定会被检查和测试出。

ESLint

Node.js 16

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

ESLint是一种可插拔的代码分析工具。每个规则都以1个插件,由此能够依据个体爱好进行安插。

JSHint

Node.js 17

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

JSHint是贰个灵活的JavaScript代码分析工具,它很好的平衡了实在的不当和老旧的语法。

JSLint

Node.js 18

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

JSLint是最早的代码分析工具之一,它落成了一套严厉的默许规则。

工具:单元测试

测试驱动开发的任务供给须要编写制定代码来测试本身的代码。如今有不少挑选,包罗Ava, Tape 和Jest ,但日前最风靡的多少个工具是:

Mocha

Node.js 19

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

Mocha是3个JavaScript测试框架,能够在Node.js或浏览器中运作测试。它帮衬异步测试,并且不时与Chai同盟使用,那样能够使测试代码以可读取的措施发挥。

Jasmine

Node.js 20

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

Jasmine是三个作为使得的测试工具,能够在浏览器中机动测试UI和互动。

QUnit

Node.js 21

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

QUnit是2个单元测试框架,能够在输入特定参数时,检查函数结果。它还反映测试结果,确认保证没有错过特定的代码分支。

计算与建议

当前最为流程的框架是React,同时别的的框架也在向着流行的大势发展。

尽管急需三个安然无恙的、通用的Web应用程序,能够考虑采纳Vue.js。

完整框架已经不再受欢迎了,如若您必要对一个较大型项目进展严加的组织管理,AngularJS是八个不利的选项。近来大多数人坚称运用Angular
1.0本子,可是长时间来讲,尽管你愿意上学TypeScript,Angular
4.x版本是个更好的精选。

jQuery即便未来并不尤其流行,在技能情报中也很少会被提到,但不可不可以认它是积极付出的,同时也是网站和应用程序的强硬工具。jQuery具有四之日的上学曲线,满世界许多开发人士能够很好地领略。

一旦您想要冒险,能够试试Svelte那是一个有意思的客户端/服务器框架,它可以在塑造时事先显示JavaScript,并且能够改变大家开发的主意。

工具的挑三拣四因项目而异。就算方今应用Gulp的开发者占超越二分之一,但WebPack却更是受欢迎。同时您也不可能错过ESLint和Mocha等测试工具。