2017年前端框架,2017年大比拼

作者: 前端知识  发布:2019-09-26

总结与建议

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

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

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

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

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

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

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

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

2 赞 5 收藏 评论

图片 1

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

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

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

优点:

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

缺点:

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

图片 3

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中可用。

Jasmine

jQuery

图片 4

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

Jasmine是一个行为驱动的测试工具,可以在浏览器中自动测试UI和交互。

图片 5

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

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

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

工具:模块绑定

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

图片 6

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的速度开销
  • 浏览器兼容性不好,但已得到改善
  • 用法扁平
  • 一些行业反对使用

AngularJS 1.x

Grunt

总结与建议

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

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

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

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

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

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

相比于JavaScript开发人员的数量,目前JavaScript框架、类库和工具的数量似乎更多一些。截...

jQuery

React

图片 7

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

React

图片 8

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

图片 9

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

Jasmine是一个行为驱动的测试工具,可以在浏览器中自动测试UI和交互。

工具:单元测试

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

工具:单元测试

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

ESLint

NPM

图片 10

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

Browserify支持Node.js正在使用的CommonJS模块,它将所有模块编译成单个浏览器兼容的文件。

Grunt

工具:代码分析

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

图片 11

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的速度开销

  • 浏览器兼容性不好,但已得到改善

  • 用法扁平

  • 一些行业反对使用

图片 12

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

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

图片 13

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

ESLint是一种可插拔的代码分析工具。每个规则都是一个插件,因此可以根据个人喜好进行配置。

JSHint

图片 14

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

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

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

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

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

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

图片 17

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较难理解

Knockout.js

图片 18

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

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

优点:

  • 小而轻便,无依赖

  • 优秀的浏览器支持,可以支持到IE6

  • 良好的文档资源

缺点:

  • 较大的项目可能变得很复杂

  • 发展已经放缓

  • 使用情况似乎在减弱

类库、框架和工具的区别

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

图片 19

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较难理解

  • 学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
    343599877,我们一起学前端!

AngularJS 1.x

Browserify

RequireJS

Ember.js

更多的框架和类库

以下项目虽然不是特别流行,但值得考虑:

  • Polymer – 可以跨浏览器支持HTML5网页组件的类库
  • Meteor – 一个用于Web应用程序的全栈平台
  • Aurelia  – 一种相对较新的,轻量级的跨平台框架
  • Svelte – 一个将框架源代码转换为干净JavaScript的新项目
  • Conditioner.js  – 一个基于状态自动加载和卸载模块的类库

JSLint

图片 20

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

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

图片 21

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

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

图片 22

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

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

框架

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

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

框架的缺点:

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

Mocha

图片 23

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

Jasmine

本文由金沙澳门官网发布于前端知识,转载请注明出处:2017年前端框架,2017年大比拼

关键词: 金沙澳门官网

上一篇:金沙澳门官网网址:来自前端的小段子
下一篇:没有了