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

工具:执行通用任务

创设工具自动执行各类Web开发义务,例如预处理、编译、优化图像、减弱代码、代码分析和运营测试等。职务可以在二个可实施包中集合保管。

当下最受欢迎的工具如下:

QUnit

Browserify

Backbone.js

图片 1

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

Backbone.js是提供劳务器端框架中广泛的MVC结构的最早客户端选项之一。它唯一的借助是Underscore.js。

Backbone.js声称是2个类库,因为它可以与其余类型并入,不过作者觉得半数以上开发人士都觉着它是三个框架。

优点:

  • 体量小,重量轻,复杂度低

  • 不添加HTML逻辑

  • 文本丰硕

  • 行使了无数拔取,包涵Trello、WordPress.com、LinkedIn和Groupon

缺点:

  • 与AngularJS等其他框架相比较,抽象度较低

  • 内需额外的零部件来已毕数量绑定等职能

  • 最新的框架已经不使用MVC架构了

图片 2

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

npm是Node.js包管理器,但其脚本工具可用来运营通用任务。对于有着少量凭借关系的简便项目来说,那是二个很好的精选。不过,更扑朔迷离的义务恐怕会变得不太适用。

图片 3

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开发规范

缺点:

  • 特大型分配式

  • 与其余正在向较小器件结构向上的框架相比较,它不行的特大

  • 学习曲线陡峭

越来越多的框架和类库

以下连串纵然不是专门流行,但值得考虑:

  • Polymer – 可以跨浏览器援救HTML5网页组件的类库

  • Meteor – 1个用来Web应用程序的全栈平台

  • Aurelia  – 一种周旋较新的,轻量级的跨平台框架

  • Svelte – 贰个将框架源代码转换为干净JavaScript的新类型

  • Conditioner.js  – 3个基于状态自动加载和卸载模块的类库

Jasmine

jQuery

Grunt

工具:代码分析

代码分析工具用于分析代码中潜在错误或离开语法的正儿八经。贰个未闭合括号或未声明的变量一定会被检测出。

Ember.js

图片 4

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

Browserify辅助Node.js正在采纳的CommonJS模块,它将具有模块编译成单个浏览器包容的公文。

ESLint

比较之下于JavaScript开发人员的数码,如今JavaScript框架、类库和工具的数额犹如越来越多一些。为止二零一七年九月,GitHub上的迅速搜索突显,有当先110万个JavaScript项目。npmjs.org有50万个可用的软件包,每月下载量近100亿次。

RequireJS

图片 5

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

Vue.js是1个用来营造用户界面的轻量级渐进框架。它提供了三个近似React的杜撰DOM驱动视图层,可以与其它类库集成,用于营造强大的单页面应用。该框架是由事先在AngularJS工作过的埃文You创制的,他领到了AngularJS中温馨喜欢的部分。

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

优点:

  • 可以连忙利用,并且逐步普及

  • 很简单进步高品位开发人士的知足度

  • 借助于小,品质好

缺点:

  • 一个较新的序列 – 危机可能会更大

  • 有个别正视开发人士举办翻新

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

图片 6

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

Mocha是贰个JavaScript测试框架,可以在Node.js或浏览器中运转测试。它协助异步测试,并且平日与Chai合作使用,那样能够使测试代码以可读取的措施发挥。

Knockout.js

图片 7

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

Knockout.js是最早的MVVM框架之一,它确保了UI与底层数据保持同步,具有模板和凭借关系跟踪。

优点:

  • 小而方便,无依靠

  • 可以的浏览器扶助,可以接济到IE6

  • 不错的文档财富

缺点:

  • 较大的系列可能变得很复杂

  • 进化已经款款

  • 动用状态就好像在削弱

Vue.js

图片 8

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

Angular
2.0于二〇一五年三月公布。这是三个完整的重写,它引入了使用TypeScript创制的依照模块化组件的模型。Angular
4.0于二〇一七年十月宣布。

Angular 2.x与v1版本截然差距,也不与其他版本兼容– 恐怕谷歌(Google)应该给品种起二个区其他名字!

优点:

  • 支付现代Web应用程序的缓解方案

  • 是规范MEAN栈的一局地,固然唯有为数不多的学科可用

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

缺点:

  • 上学曲线陡峭

  • 大的代码库

  • 不能从Angular 1.x升级

  • 与1.x相对而言,Angular 2.x较难领悟

  • 学习进程中碰到如何难题或许想博得学习能源的话,欢迎到场学习沟通群
    343599877,大家共同学前端!

NPM

图片 9

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实用程序来补偿原生字符串、数字、数组和其余原始对象方法。就算三个类库之间有一部分交汇,然则不太大概在1个序列中并且利用那四个类库。

虽说八个类库在客户端使用率很低,但是却足以在劳务器端的Node.js应用程序中拔取那七个类库。

优点:

  • 小而简约

  • 优质的文档易于学习

  • 与大部分类库和框架包容

  • 不扩充内置对象

  • 可以在客户端或服务器上行使

缺点:

  • 些微措施只在ES二〇一四及更高版本的JavaScript中可用。

框架

框架是应用程序的龙骨。它须要以特定的主意来展开软件设计,在一些节点上贯彻团结的逻辑。框架经常提供了轩然大波、存储和数量绑定等效果。

框架常常提供了比类库更高层次的抽象,辅助赶快创设项目标前80%。

框架的弱点:

  • 若是你的应用程序超出了框架的限制,最终20%或许会很难

  • 框架更新很狼狈

  • 主导框架代码和概念很少更新

WebPack

图片 10

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

Webpack接济具有流行的模块选项,并已化作React开发的代名词。即便Webpack声称是一个模块捆绑程序,不过曾经得以视作通用任务运维程序了。

图片 11

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

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

类库

类库是多少个有集体的功效集聚。典型的类库包罗字符串处理、日期、HTML
DOM成分、事件、Cookie、动画、互联网请求等功能。你可以协调达成三个函数,以便接纳该函数被调用时是或不是必要重临多个值。

类库平时提供一种高级其余空洞方法,可以支持顺遂落到实处项目标底细部分。例如,Ajax日常着重于XMLHttpRequest
API,只要求几行代码就落到实处效益,只是浏览器之间存在细微的出入。类库提供了更简便的ajax()函数,因而开发者可以小心于更高级其他政工逻辑上。

类库可以使将开发时间收缩20%,开发者不必顾虑细节已毕。

而是也有弱点:

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

  • 支出协会不大概确保高速公布补丁

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

  • 学学进程中相遇怎么样难点依旧想得到学习财富的话,欢迎参加学习交换群
    343599877,大家共同学前端!

图片 12

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

Angular是框架(或MVC应用程序框架)类列表中的第2个。近来最盛行的Angular版本是1.x,它采用双向数据绑定扩大HTML,同时解耦了DOM操作和应用程序逻辑。

即便版本2(以后是本子4!)已经揭橥了,可是Angular 1.x仍在付出中。

优点:

  • 一些大商厦正在利用的盛行框架

  • 支付现代Web应用程序的消除方案

  • 是业内MEAN栈(MongoDB,Express.JS,AngularJS,NodeJS)的一局部,有为数不少篇章和科目可用

缺点:

  • 上学曲线陡峭

  • 大的代码库

  • 不能晋升到Angular 2.x

小结与提议

日前极端流程的框架是React,同时此外的框架也在向着流行的趋势发展。

一旦急需三个安全的、通用的Web应用程序,可以考虑选拔Vue.js。

总体框架已经不复受欢迎了,借使你须要对二个较大型项目进展严刻的构造管理,AngularJS是2个正确的取舍。如今大多数人坚称运用Angular
1.0本子,可是长时间来讲,如若你愿意上学TypeScript,Angular
4.x版本是个更好的挑选。

jQuery即便以后并不要命风靡,在技术情报中也很少会被波及,但不可否认它是主动开发的,同时也是网站和应用程序的雄强工具。jQuery具有中和的求学曲线,举世许多开发人士可以很好地领会。

借使你想要冒险,可以尝试Svelte那是三个妙趣横生的客户端/服务器框架,它可以在打造时事先展现JavaScript,并且可以变动大家付出的艺术。

工具的采取因项目而异。固然眼下利用居尔p的开发者占半数以上,但WebPack却愈发受欢迎。同时你也不只怕错过ESLint和Mocha等测试工具。

Gulp.js

图片 13

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

尽管如此居尔p不是首先个任务履行工具,它却很快变成了最受欢迎的。居尔p使用不难阅读的JavaScript代码,将源文件加载到流中,并在将数据输出到打造文件夹此前,通过种种插件管理数据。在其余别的选项此前检查居尔p.js是简单、火速和幽默的。

工具:模块绑定

七个JavaScript文件的军事管制已经变为了一件繁琐的工作。暗许景况下,浏览器文件不会被编译,因而其借助关系必须以适度的一一举行加载或一连。纵然有像ES6模块和CommonJS那样的选项,但是浏览器扶助是少数的,因而模块绑定变得不行重中之重。

JSHint

图片 14

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

JSHint是二个心灵手巧的JavaScript代码分析工具,它很好的平衡了确实的荒谬和老旧的语法。

工具

工具会扶助开发工作,但却不是类其余组成部分。工具包蕴创设系统、编译器、转译器、代码分割器、图像压缩器、安排机制等。

工具扶助完结几个更便于的开发进程。例如,相比于CSS,许多编码者更爱好Sass,因为它提供了代码分离、嵌套、渲染时变量、循环和函数。浏览器不明白Sass
/ SCSS语法,由此在测试和布局以前,必须运用方便的工具将代码编译为CSS。

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

JSLint

图片 15

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

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

图片 16

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

QUnit是3个单元测试框架,可以在输入特定参数时,检查函数结果。它还举报测试结果,确保没有失去特定的代码分支。

React

图片 17

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

图片 18

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

ESLint是一种可插拔的代码分析工具。各种规则都以3个插件,因而可以按照个人喜好举行安顿。

类库、框架和工具的界别

类库、框架和工具之间的界别很小。框架可以包涵多个类库,类库可以兑现类似框架的艺术,项目中任何一种工具都是必不可少的。所以不须求肯定的区分类库、框架和工具。

JavaScript框架和类库

以下是依照流行水平进行的排序:

正文将会谈论近日极端流行的客户端JavaScript框架、类库和工具以及它们之间的中央差距。恐怕本文不可以告诉你哪个是最好的,但是最契合自个儿项目标,就是最好的。

工具:单元测试

测试驱动开发的职分须求需求编制代码来测试本人的代码。近期有多如牛毛拔取,包涵Ava, Tape 和Jest ,但眼前最流行的七个工具是:

Mocha

AngularJS 1.x

图片 19

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

图片 20

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

Grunt是率先批被广大利用的JavaScript职务执行工具之一,但其速度和复杂性的JSON配置却造成了居尔p的兴起。将来那么些题目已经获取了化解,Grunt还是是三个受欢迎的取舍。

图片 21

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

Jasmine是2个作为使得的测试工具,可以在浏览器中活动测试UI和相互。

相关文章