2017年前端框架、类库、工具大比拼

相比于JavaScript开发人员的数量,目前JavaScript框架、类库和工具的数量似乎更多一些。截至2017年5月,GitHub上的快速搜索显示,有超过110万个JavaScript项目。npmjs.org50万个可用的软件包,每月下载量近100亿次。

本文将会讨论目前最为流行的客户端JavaScript框架、类库和工具以及它们之间的基本差异。也许本文无法告诉你哪个是最好的,但是最适合自己项目的,就是最好的。

类库

类库是一个有组织的功能集合。典型的类库包括字符串处理、日期、HTML DOM元素、事件、Cookie、动画、网络请求等功能。你可以自己实现一个函数,以便选择该函数被调用时是否需要返回一个值。

类库通常提供一种高级别的抽象方法,能够帮助顺利实现项目的细节部分。例如,Ajax通常依赖于XMLHttpRequest API,只需要几行代码就实现功能,只是浏览器之间存在细微的差异。类库提供了更简单的ajax()函数,因此开发者可以专注于更高级别的业务逻辑上。

类库能够使将开发时间缩短20%,开发者不必担心细节实现。

但是也有缺点:

  • 类库中的错误难以定位和修复
  • 开发团队不能保证快速发布补丁
  • 补丁程序可能会更改API,导致大量代码必须更改

框架

框架是应用程序的骨架。它要求以特定的方式来进行软件设计,在某些节点上实现自己的逻辑。框架通常提供了事件、存储和数据绑定等功能。

框架通常提供了比类库更高层次的抽象,帮助快速构建项目的前80%。

框架的缺点:

  • 如果你的应用程序超出了框架的范围,最后20%可能会很难
  • 框架更新很困难
  • 核心框架代码和概念很少更新

工具

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

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

类库、框架和工具的区别

类库、框架和工具之间的区别很小。框架可以包括一个类库,类库可以实现类似框架的方法,项目中任何一种工具都是必不可少的。所以不需要明确的区分类库、框架和工具。

JavaScript框架和类库

以下是按照流行程度进行的排序:

jQuery


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


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实用程序来补充原生字符串、数字、数组和其它原始对象方法。虽然两个类库之间有一些重叠,但是不太可能在一个项目中同时使用这两个类库。

虽然两个类库在客户端使用率很低,但是却可以在服务器端的Node.js应用程序中使用这两个类库。

优点:

  • 小而简单
  • 良好的文档易于学习
  • 与大多数类库和框架兼容
  • 不扩展内置对象
  • 可以在客户端或服务器上使用

缺点:

  • 有些方法只在ES2015及更高版本的JavaScript中可用。

AngularJS 1.x


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)


Angular


 


类型


框架


网站


angular.io


知识库


github.com/angular/angular.js


当前版本


4.1


开发人员


Google


发布日期


2016年9月


大小


最小450kb


用途


单页面应用


使用度


Angular 2.0于2016年9月发布。这是一个完整的重写,它引入了使用TypeScript创建的基于模块化组件的模型。Angular 4.0于2017年3月发布。

Angular 2.x与v1版本截然不同,也不与其它版本兼容 - 也许Google应该给项目起一个不同的名字!

优点:

  • 开发现代Web应用程序的解决方案
  • 是标准MEAN栈的一部分,尽管只有少量的教程可用
  • 对于熟悉静态类型语言(如C#和Java)的开发人员,TypeScript提供了一些优势。

缺点:

  • 学习曲线陡峭
  • 大的代码库
  • 不能从Angular 1.x升级
  • 与1.x相比,Angular 2.x较难理解

React


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

Vue.js


Vue.js


 


类型


框架


网站


vuejs.org


知识库


github.com/vuejs/vue


当前版本


2.0


开发人员


Evan You


发布日期


2014年2月


大小


最小19kb


用途


单页面应用


使用度


Vue.js是一个用于构建用户界面的轻量级渐进框架。它提供了一个类似React的虚拟DOM驱动视图层,可以与其它类库集成,用于构建强大的单页面应用。该框架是由之前在AngularJS工作过的Evan You创建的,他提取了AngularJS中自己喜欢的部分。

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

优点:

  • 可以快速使用,并且日益普及
  • 很容易提高高水平开发人员的满意度
  • 依赖性小,性能好

缺点:

  • 一个较新的项目 - 风险可能会更大
  • 部分依赖开发人员进行更新
  • 相比于其它框架,资源较少

Backbone.js


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


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


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开发任务,例如预处理、编译、优化图像、缩小代码、代码分析和运行测试等。任务可以在一个可执行包中统一管理。

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

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包管理器,但其脚本工具可用于运行通用任务。对于具有少量依赖关系的简单项目来说,这是一个很好的选择。然而,更复杂的任务可能会变得不太适用。

Grunt


Grunt


 


网站


gruntjs.com


知识库


github.com/gruntjs/grunt


当前版本


1.0.1


每月下载


200万

Grunt是第一批被大规模采用的JavaScript任务执行工具之一,但其速度和复杂的JSON配置却导致了Gulp的兴起。现在这些问题已经得到了解决,Grunt仍然是一个受欢迎的选择。

工具:模块绑定

多个JavaScript文件的管理已经成为了一件繁琐的事情。默认情况下,浏览器文件不会被编译,因此其依赖关系必须以适当的顺序进行加载或连接。虽然有像ES6模块和CommonJS这样的选项,但是浏览器支持是有限的,因此模块绑定变得十分重要。

WebPack


WebPack


 


网站


webpack.js.org


知识库


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


每月下载


百万

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

工具:代码分析

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

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万

JSHint是一个灵活的JavaScript代码分析工具,它很好的平衡了真正的错误和老旧的语法。

JSLint


JSLint


 


网站


jslint.com


知识库


github.com/reid/node-jslint


当前版本


0.10.3


每月下载


50000

JSLint是最早的代码分析工具之一,它实现了一套严格的默认规则。

工具:单元测试

测试驱动开发的任务要求需要编写代码来测试自己的代码。目前有许多选择,包括AvaTape 和Jest ,但目前最流行的三个工具是:

Mocha


Mocha


 


网站


mochajs.org


知识库


github.com/mochajs/mocha


当前版本


3.3.0


每月下载


500万

Mocha是一个JavaScript测试框架,可以在Node.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


每月下载


25000

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

总结与建议

目前最为流程的框架是React,同时其它的框架也在向着流行的趋势发展。

如果需要一个安全的、通用的Web应用程序,可以考虑使用Vue.js

整体框架已经不再受欢迎了,如果你需要对一个较大型项目进行严格的结构管理,AngularJS是一个不错的选择。目前大多数人坚持使用Angular 1.0版本,但是长远来讲,如果你愿意学习TypeScript,Angular 4.x版本是个更好的选择。

jQuery虽然现在并不十分流行,在技术新闻中也很少会被提到,但不可否认它是积极开发的,同时也是网站和应用程序的有力工具。jQuery具有平缓的学习曲线,全球许多开发人员能够很好地理解。

如果你想要冒险,可以试试Svelte这是一个有趣的客户端/服务器框架,它可以在构建时预先呈现JavaScript,并且可以改变我们开发的方式。

工具的选择因项目而异。虽然目前使用Gulp的开发者占大多数,但WebPack却越来越受欢迎。同时你也不能错过ESLintMocha等测试工具。

过去的十年,JavaScript经历了革命性的发展。过去只有少量基本的类库可以选择,但是现在可供选择的类库已经铺天盖地。也许无法确定哪个类库、框架和工具是最好的,但是最适合自己项目的,就是最好的。

如果本文错过了你最喜欢的JavaScript类库,框架或工具?欢迎在文末评论。

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

转载请注明出自:葡萄城控件

 

相关阅读:

【报表福利大放送】100余套报表模板免费下载

开放才能进步!Angular和Wijmo一起走过的日子

这 5 个前端组件库,可以让你放弃 jQuery UI

Angular vs React 最全面深入对比

 

时间: 2024-10-16 16:26:47

2017年前端框架、类库、工具大比拼的相关文章

对Web开发中前端框架与前端类库的一些思考

  这篇文章主要介绍了对Web开发中前端框架与前端类库的一些思考,本文讲解了前端框架的理解误区.前端框架与前端类库的区别.前端MVC框架思想等内容,需要的朋友可以参考下 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道.就好像一个日均pv只有

[译] 2017 年了,这么多前端框架,你会怎样选择?

本文讲的是[译] 2017 年了,这么多前端框架,你会怎样选择?, 原文地址:Choosing a frontend framework in 2017 原文作者:Taras Mankovski 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:LeviDing 校对者:sunui, warcryDoggie 过去七年来,前端框架生态系统发展蓬勃.我们已经学了很多关于构建和维护大型应用的知识.我们看到了很多新想法的出现.其中一些新想法改变了我们构建 We

Web前端框架与类库的思考

说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技术选型和架构设计当中,脱离网 站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道.就好像一个日均pv只有几百的小型电商网站,却要大喊"某宝就是这么 搞的",然后搭建应用服务器集群,使用分布式文件系统和分布式数据库系统...等巴拉巴拉的一堆用来处理高并发,海量数据

2017年前端开发工具趋势

本文来源于全球的5254份前端工具使用的调查报告,期望通过本文能够帮助大家更好的了解最新的前端开发工具趋势. 受访者组成 83%的受访者具有两年以上的前端技术经验,只有5%的受访者不到一年: CSS 开发者中有63%为高级开发者和专家: 尽管CSS被认为只是属性-参数值对的简单集合,但是CSS却是很难掌握的.CSS3引入了许多的新特性,要想完全的掌握CSS变得越来越困难. 如果你想学习前端可以来这个群,首先是二九一,中间是八五一,最后是一八九,里面可以学习交流也有资料可以下载. CSS预处理器

Vue.js 2.0 和 React、Augular等其他前端框架大比拼_javascript技巧

React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 保持注意力集中在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库. 相似的作用域,我们会用更多的时间来讲这一块的比较.不仅我们要保持技术的准确性,同时兼顾平衡.我们指出React比Vue更好的地方,例如,他们的生态系统和丰富的自定义渲染器. React社区在这里非常积极地帮助我们实现这一平衡,特别感谢来自 React

对Web开发中前端框架与前端类库的一些思考_javascript技巧

说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道.就好像一个日均pv只有几百的小型电商网站,却要大喊"某宝就是这么搞的",然后搭建应用服务器集群,使用分布式文件系统和分布式数据库系统...等巴拉巴拉的一堆用来处理高并发,海量数据访问

HTML+CSS体验设计师:前端技术和框架与工具

文章描述:HTML+CSS体验设计师:前端技术和框架与工具. 我一直笃信不知道HTML和CSS的体验设计师是连砖头和钢筋都没有摸过的建筑师,因此在以往的十几个项目里虽然总是进行策略层的设计,但也不忘记锻炼自己HTML和CSS能力,只有手够脏才能成为一位好的设计师. 最近的讨论里,我们总在纠结于设计师和开发人员无法相处的话题,其实答案很简单──当你没有我的生活体验,你如何让我理解你.在开发人员那个充满逻辑.过程.抽象.定义的世界里,到底哪个部分是曾涉足,决定了你是不是一个足够理解开发人员的设计师.

14个优秀 JS 前端框架、库、工具及其使用时机

这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景. 新的 Javascript 库层出不穷,从而Web 社区愈发活跃.多样.在多方面快速发展.详细去描述每一种主流的 Javascript 框架和库近乎不可能,所以在这篇文章中主要介绍一些对前端发展最具影响力的前端框架.接下来让我们来共同研究一些主流前端框架.库和工具,并讨论它们的适 用场景. 同时: 如果该篇文章没有包含你喜欢的 Javascript 框架,勿喷 在使用前端框架进行开发时,建议保持版本更

2017年最受欢迎的5个前端框架比较

如今的 CSS 前端框架的发展非常迅猛,但是真正好的框架不多.在这篇文章中,我将对我认为当今最好的 5 个框架进行比较.每个框架都有它自己的强项和弱项,以及适合的领域,你需要根据这些特点来进行选择.例如,如果你的项目很简单,那就没有必要选择复杂的框架.此外,还有一些选项是模块化,这样你就可以根据需要选择所需的组件,或者来自不同框架混合的组件. 我选择的这些框架是根据它们在 Github 的受欢迎程度来的,而最受欢迎的毫无疑问是 Bootstrap. (注意:文章中的一些数据日新月异,例如 Git