【译】2015: 前端工具现状

2024-08-27 13:48

本文主要是介绍【译】2015: 前端工具现状,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原文:http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
译者:@lizheming


本文数据更新至 2015年09月09日。

由于当我发出这篇文章后,问卷又增加到了 1000 份(编写这篇文章的时候还是 649 份),所以我特地更新了一下文章的数据。比较有趣的事是虽然问卷的份数增加了,但是对之前的统计结果似乎没有特别大的影响。


几周之前,我发布了一份前端工程师的问卷调查来统计前端工具的使用情况。我的目的很简单,就是想要知道一下目前前端社区的知识和实战水平。我经常能够听到 “Sass 是最佳的预处理器选择”,“xxx JS 框架是的最新而且是最棒的!” 诸如此类的话语,但是我特别想知道当我询问他们知道什么工具并在他们的项目中使用什么工具的时候,他们的第一反应是什么?

在统计数据之前,我对问卷的数量不抱有特别大的期望。毕竟大家都很忙,没有福利纯义务的让大家填一份问卷听起来比较困难。然而看到问卷份数的时候我整个人都惊呆了,居然有 1044 份!远远超过了我的预期!真的非常感谢那些花时间帮忙填写这份问卷的人,谢谢!

长话短说下面我们就展示下最后的问卷统计结果吧。


事先声明

这些结果仅仅代表了业界一小撮前端工程师的情况,因此它有可能无法代表现在业界的状况,顶多算是未来的一种趋势吧。如果你不巧错过了问卷调查的时间,这也没有关系。我将在几周之后重新开启这份问卷然后在本文中更新数据。

问题一:预处理器

我问的第一个问题是“你用什么预处理器?”。

常用的预处理器基本上都在答案中有了,不得不指出的是我之所以没有把 PostCSS 放在列表中是因为 PostCSS 作为后处理器很多使用的人往往也会配合使用其它的预处理器在他们的工作中,这样会引起选择强迫症的困扰。我在问卷中指出,如果你真的是只使用 PostCSS 的话,那你就选择“其它”吧。

下面是这道题的统计结果:

预处理器得票数百分比
Sass68966.00%
Less14013.41%
Stylus444.21%
不使用预处理14113.51%
其它302.87%

Q1

如你所见, Sass 得票 66% 是大家的预处理器第一选择。仅有 13.5% 的人选择了不适用任何预处理器,这不得不说明我们已经越来越接近“预处理器使用峰值”了。这里我想要强调一下,CSS 预处理毫无疑问是前端工程师必备技能,很多项目和工作中都需要用到它,如果你还没有学过它赶快去补习一下吧!另外在投其它的票中,有 21 票(总数的 2%)其实是使用 PostCSS 的。


问题二 :PostCSS 和 Rework

下一个问题,我想要看看到底有多少工程师听过“后处理器”工具,例如 PostCSS 或者 Rework。所以这道题我的问题是:“你是否曾听说过下面列出的 CSS 处理工具?”。

这是这道题的结果

 听/看过偶尔用常用从没听过
PostCSS53.64% (560)10.34% (108)8.91% (93)27.11% (283)
Rework21.84% (228)2.30% (24)0.86% (9)75.00% (783)

Q2

从原始数据中我们可以知道,有 72.89% 的人是知道或者用过 PostCSS 的,对比之下 Rework 只有 25% 的人。两个工具都只有极少的一部分人会经常使用他们。

分析这个数据我们可以知道,有 269 票(超过 25%)的人既没有听过 PostCSS 也没有听过 Rework。相比较之下,有 95 票(9.1%)表示他们经常使用这两款工具中的至少一种。

我认为这个结果反映出了后处理器领域在前端界还是个比较新的领域,我希望在将来能看到这个数字会飞速增长。

问题三:自动化工具

下一个问题是我最感兴趣的——“你更喜欢在你的工作中使用哪款自动化工具?”。

我们先看一下 npm 的下载数量,Grunt 的下载量是 145 万/月,Gulp 则是 134 万/月。从下载使用量上来看,这两者似乎是差不多的,不过从问卷的数据来看,用 Gulp 代替 Grunt 似乎成了一种趋势。

让我们来看看问卷结果吧:

自动化工具得票数百分比
Gulp48846.74%
Grunt27426.25%
NPM403.83%
Broccoli131.25%
Other504.79%
不使用任何工具17917.15%

Q3

令人惊讶的事,Gulp 获得了 46.7% 的投票而 Grunt 只有 26.3%,这说明大家越来越喜欢使用 Gulp 了。另外只有 17.2% 的人说他们不适用任何自动化工具,说明大部分前端开发人员已经意识到了自动化构建工具的好处并将其运用在项目和团队中。

问题四:JS 库和框架

另外一个我比较感兴趣的问题是现在最流行的 JS 库和框架是什么,下面是结果:

 听/看过偶尔用常用从没听过
jQuery1.7% (18)6.8% (71)91.5% (955)0% (0)
Underscore33.4% (349)19.2% (200)38.6% (403)8.8% (92)
Backbone58.1% (606)21.6% (226)18.6% (194)1.7% (18)
AngularJS36.4% (380)34.9% (364)28.5% (298)0.2% (2)
Ember76.8% (802)15.6% (163)4.6% (48)3% (31)
React59.6% (622)21.8% (228)15.7% (164)2.9% (30)
Polymer70.5% (736)12.2% (127)3.3% (35)14% (146)
Knockout67.9% (709)10.4% (109)5.5% (57)16.2% (169)

Q4

没有悬念 jQuery 得到了 91.5% 的最高票数,并且这只是常用它的人。不得不说它是所有库里面影响最深远的一个了。数据还显示,有 28.5% 的开发者经常使用 AngularJS,18.6% 的人常用 Backbone,15.7% 的人常用 React。

让我们撇开 jQuery 和 Underscore 两个库看看这些 MV* 框架的数据,有超过 50%(531票)的人至少使用其中一款框架。

题外话,之后我重开这个调查问卷的时候我会再问一个“有多少开发者开始使用 ES6(ES2015) 了?”我相信这个会有很大的增长空间,并且我很好奇这个问题的具体现状。


问题五:你在你的主要项目中使用哪款 JS 库/框架

这题我问的是:“你在你的主要项目中会使用哪款 JS 库/框架?”。这题因为是后面加上去的,所以只有 467 个投票,这个或多或少会影响最后的统计。下面是统计结果:

 得票数百分比
只用原生不用库5211.13%
jQuery26456.53%
AngularJS7215.42%
React388.14%
Ember153.21%
Backbone112.36%
Underscore71.50%
Polymer20.43%
Knockout61.28%
其它(请指出)00.00%

Q5

即使在投票总数少了一半的情况下,jQuery 也凭着 56.53%(264票)的高票拿到了最常使用库的宝座,紧随其后的是 AngularJS,有 15.42%(72票)。

因为这到底的总票实太少了,我也不想对这道题的数据进行太多的预测分析。但是 jQuery 的高票仍让我比较感兴趣,我相信随着 ES2015 的普及 jQuery 的份额会慢慢降低,大家都会转而使用原生或者一些小而美的库。


问题六:JS 模块加载器

模块加载器我自己也使用过一段时间,不过我比较想知道是否所有的前端工程师们也都会使用它,如果是的话他们会选择使用哪款工具?所以这道题的问题是:“你是否在你的工作中使用过一款 JS 模块加载器?”

下面是这道题的统计结果:

模块加载器得票数百分比
不使用加载器53851.53%
Browserify18517.72%
RequireJS14213.60%
webpack12011.49%
JSPM302.87%
其它292.78%

Q6

数据可以看出,48.47% 的开发者已经开始使用模块加载器管理他们的依赖了。其中 17.7% 的人使用的是 Browserify,13.6% 的人使用 RequireJS,11.5% 的人使用 webpack。webpack 最近得到了高度的关注而且我们可以看到数据上其实 webpack 并没有差前两名多少。当然在 ES2015 普及之后数据将如何变化我也是非常关心的。

不管怎么说看到大家都在使用模块加载器我还是很高兴的,当然我也喜欢在未来那些不适用加载器的人会越来越少。


问题七:JS 单元测试

我一直很好奇是不是所有的人都会对他们的 JS 代码或者项目进行单元测试?所以这道题我的问题是:“在你的项目中你使用什么单元测试工具进行测试?”。

下面是统计结果:

工具得票数百分比
不使用测试工具61558.91%
Mocha16115.42%
Jasmine15915.23%
QUnit353.35%
Tape201.92%
Jest111.05%
Karma60.57%
Intern100.96%
其它272.59%

Q7

数据可以看出占大头的是不使用任何测试工具,占了 58.91%,数据说明有恨大一部分人在项目中忽视了单元测试这一环节,虽然它真的很重要。在其它一些使用单元测试工具的投票中,大部分人选择了 Mocha(15.42%) 或 Jasmine(15.23%) 这两款工具。总的说来就是前端工程师在 JS 单元测试这块有一定的差距。


问题八:其它工具

最后一个问题列举了一些包管理和项目管理里常用的工具,然后我问的是:“这里哪些工具你曾用过?”。

下面是统计结果:

 听/看过偶尔用常用从没听过
Bower23.75% (248)26.44% (276)47.89% (500)1.92% (20)
Yeoman37.45% (391)30.56% (319)22.13% (231)9.86% (103)
Ender30.36% (317)1.92% (20)0.86% (9)66.86% (698)
NPM6.80% (71)17.91% (187)71.07% (742)4.22% (44)

Q8

大家的主要使用工具基本上是 Bower 和 NPM,甚至有很大一部分人没有听说过 Ender。而我认为我用过的最棒的一个工具 Yeoman 的普及度也比较低,只有 22.13% 的人经常用,将近 10% 的人没有听说过它。在我的经验里,它能让项目变的更加简单,项目中使用它是非常有价值的。


结论

总的说来,还是有很大一部分人在工作中使用前端工具的。当然如果你熟练使用 JS, CSS 的那些脚手架工具,你一定是他们当中的佼佼者。另一方面来看,JS 测试工具的普及程度还比较低,唯一的解决办法就是向大家普及如何在项目中使用和迁移这些工具,当然最重要的是如何编写可测试的 JS 代码。

如果其他人有任何的疑问或者想用数据分析其他的方面,欢迎在 Twitter 上联系我!当然我还要说一遍,如果你错过了这次的问卷填写也没有关系,我将在之后几周再开一次这个问卷并在本文中更新数据。我们的问卷地址是:http://ashn.uk/survey-tooling

这篇关于【译】2015: 前端工具现状的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1111844

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

高效录音转文字:2024年四大工具精选!

在快节奏的工作生活中,能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候,一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具! 365在线转文字 直达链接:https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具,它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件,只

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具,采用无代理架构(agentless),基于 SSH 连接进行管理,具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用,旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',