Ashley Nolan
是来自英国食品速递公司JUST EAT 的一名资深
Web UI
工程师。为了了解整个前端开发社区当前的知识和使用水平,他发起了一个面向前端开发人员的调查,问题涉及CSS、“任务执行器(Task
Runner)”、JavaScript等方面。前期,他收到了649份回复。近日,参与者数量达到了1044。因此,他重新修正了前期的统计分析结果,不过总体而言变化不大。

原文地址

2017年前端开发工具趋势

2017/05/11 · CSS · 2
评论 ·
开发工具

原文出处: Craig
Buckler   译文出处:愚人码头   

澳门新葡萄京官网首页 1

你有两年以上的前端开发经验吗?你会用 Sass 和 Autoprefixer
等高级的CSS辅助技能吗?你的 JavaScript 知识是否融汇贯通,你是否喜欢使用
Gulp , npm 和 jQuery ?如果是这样,根据 澳门新葡萄京官网首页,Ashley Nolan
的前端问卷调查,你是一个典型的前端开发工程师。

在 Ashley 的调查中,有 2 个问题是关于 CSS
预处理后处理工具的。调查显示,使用
Sass 作为 CSS
预处理工具的受访者最多,占66%,使用
Less 的次之,占
13.41%,还有一小部分受访者(4.21%)使用
Stylus。另外,有 13.5% 的受访者在编写
CSS 时不使用任何 CSS
预处理工具。对于后处理工具PostCSS 和
Rework,能够“熟练使用(Feel
Comfortable Using)”的受访者比较少,前者为 8.91%,而后者仅有
0.86%。特别是 Rework,有 75% 的受访者都没有听说过。Ashley 认为,这反映出
CSS 后处理对前端开发人员而言是一个非常新的领域。

有些还真没听过,比如 CSS 预处理/后处理,任务执行器~

谎言,该死的谎言,统计数字和调查问卷

愚人码头注:谎言,该死的谎言,统计数字(英文:Lies, damned lies, and
statistics),是一句著名的西方谚语。主要描述数字的说服能力,特别是用来讽刺一些使用统计数字支持、但毫无说服力的分析报告,以及人们倾向于贬低那些不支持其立场的统计结论。
维基百科

诸如此类的调查有助于你发现新工具和你的知识短板。至本文撰写时,本次问卷调查收到了5,254份答复,这是比大多数民意调查更具有样本价值。但是,调研结果是否代表真相还是应该抱审慎态度。。。

有 4 个问题同 JavaScript 有关,涉及 JavaScript
库和框架、模块打包器及测试等三个方面。在有关前端开发者当前 JavaScript
知识水平的调查中,不出所料,能够熟练使用jQuery的受访者最多,比例高达
91.5%,远远高于其它框架,而且没有人不知道这个框架。能够熟练使用
Underscore、AngularJS、Backbone、React
等框架的受访者也比较多,比例分别为38.6、28.5%、18.6%、15.7%。Ember、Polymer、Knockout
等框架也可以说是广为人知,但能够熟练使用的受访者占比仅为个位数。关于
JavaScript 库,Ashley 后来追加了一个问题,“在大多数项目中,你使用什么
JavaScript 库或框架?”jQuery 以极大的优势成为使用最多的框架,占比为
56.53%,AnjularJS 排名第二,占比为 15.42%,其它框架占比均低于
10%。值得一提的是 Backbone,仅占 2.36%。另外,有 11.13%
的受访者不使用任何 JS 框架,他们仅使用 本地 JS。

Ashley
Nolan是来自英国食品速递公司JUST
EAT的一名资深 Web UI
工程师。为了了解整个前端开发社区当前的知识和使用水平,他发起了一个面向前端开发人员的调查,问题涉及
CSS、“任务执行器(Task
Runner)”、JavaScript等方面。前期,他收到了649份回复。近日,参与者数量达到了1044。因此,他重新修正了前期的统计分析结果,不过总体而言变化不大。

全球性的统计结果

这次问卷调查是全球性的,但将主要来自英语国家。
在其他地方开发或使用的流行工具可能被忽略。

谈及 JavaScript
模块打包器,总共有将近一半(48.47%)的受访者使用模块打包器管理管理
JavaScript 中的依赖关系,其中 17.7% 的使用
Browserify,13.6% 的使用
RequireJS,11.5% 的使用
Webpack。在 JavaScript
测试方面,58.91% 的受访者不使用任何工具辅助 JavaScript
测试。在受访者使用的 JavaScript
测试工具中,Mocha 和
Jasmine 使用最多,占比分别为 15.42%
和 15.23%。

在 Ashley 的调查中,有两个问题是关于 CSS
预处理后处理工具的。调查显示,使用 Sass 作为
CSS 预处理工具的受访者最多,占66%,使用 Less
次之,占13.41%,还有一小部分受访者(4.21%)使用
Stylus。另外,有 13.5%
的受访者在编写 CSS 时不使用任何 CSS 预处理工具。对于后处理工具
PostCSS 和
Rework,能够“熟练使用(Feel
Comfortable Using)”的受访者比较少,前者为 8.91%,而后者仅有
0.86%。特别是 Rework,有 75% 的受访者都没有听说过。Ashley 认为,这反映出
CSS 后处理对前端开发人员而言是一个非常新的领域。

开发人员知识

本次问卷调查呼吁经验丰富的开发人员对调研问题有深刻理解并且有时间,有兴趣去完成本次调查。

83% 的受访者有两年或两年以上的前端技术经验,只有 5%
的受访者不到一年前端经验:

澳门新葡萄京官网首页 2

具备较低前端技能的开发人员不太可能完成本次问卷调查,因此结果可能会相应偏离。

另外,Ashley 还调查了“任务执行器(Task Runner)”的使用情况。从 NPM
的下载统计看,Grunt 和
Gulp的每月下载量相差不大,一个为145万次,一个为134万次。但调查结果多少有些出人意料,46.74%
的受访者更喜欢使用 Gulp,而Grunt 的这一数据仅为 26.25%。此外,17.2%
受访者表示,他们根本不使用任务执行器。不过,总的来说,大部分前端开发人员都认识到了,使用此类工具可以很好地在
项目和团队之间保持一致。

有四个问题与 JavaScript 有关,涉及 JavaScript
库和框架、模块打包器及测试等三个方面。在有关前端开发者当前JavaScript知识水平的调查中,不出所料,能够熟练使用
jQuery
的受访者最多,比例高达91.5%,远远高于其它框架,而且没有人不知道这个框架。能够熟练使用
Undercore、AnjularJS、Backbone、React
等框架的受访者也比较多,比例分别为38.6、28.5%、18.6%、15.7%。Ember、Polymer、Knockout
等框架也可以说是广为人知,但能够熟练使用的受访者占比仅为个位数。关于JavaScript库,Ashley后来追加了一个问题,“在大多数项目中,你使用什么JavaScript库或框架?”jQuery以极大的优势成为使用最多的框架,占比为56.53%,AnjularJS排名第二,占比为
15.42%,其它框架占比均低于10%。值得一提的是Backbone,仅占2.36%。另外,有11.13%的受访者不使用任何JS框架,他们仅使用本地JS。

意见和偏见

受访者被要求判断自己的水平。有些人可能比较谦虚,有些有选择困难综合症。有些人可能高估了自己的水平,因为他们可能是一群新手程序员团队中唯一前端开发人员。自我偏见的偏差可以被平均,但没有办法证明。

最后一个问题是关于包和工作流管理。大部分受访者都可以熟练使用
NPM 和
Bower,相比之下,大部分受访者根本没有听说过
Ender。另外,Yeoman
在 Ashley 看来是最有用的工具之一,但只有 22.13%
的受访者可以熟练使用,他认为这个比例太低了。

谈及JavaScript模块打包器,总共有将近一半(48.47%)的受访者使用模块打包器管理管理JavaScript中的依赖关系,其中17.7%的使用Browserify,13.6%的使用RequireJS,11.5%的使用Webpack。在JavaScript测试方面,58.91%的受访者不使用任何工具辅助JavaScript测试。在受访者使用的JavaScript测试工具中,Mocha和Jasmine使用最多,占比分别为15.42%和15.23%。

过去的行为不代表未来的趋势

调查结果突显了开发人员已经使用的工具。这并不意味着这些工具是有用的,可以节省时间或将在将来的项目中使用。

对于上述结果,Ashley
认为,一方面,在前端开发领域,前端工具的使用率已经相当高。CSS
预处理后处理工具、JavaScript
模块打包器或者任务执行器是前端开发人员工具库的重要组成部分;另一方面,JavaScript
测试工具的使用还比较少。

另外,Ashley还调查了“任务执行器(Task
Runner)”的使用情况。从NPM的下载统计看,Grunt 和
Gulp
的每月下载量相差不大,一个为145万次,一个为134万次。但调查结果多少有些出人意料,46.74%的受访者更喜欢使用Gulp,而Grunt的这一数据仅为26.25%。此外,17.2%受访者表示,他们根本不使用任务执行器。不过,总的来说,大部分前端开发人员都认识到了,使用此类工具可以很好地在项目和团队之间保持一致。

CSS

63%的开发人员将他们自己的CSS知识评为高级或专家水平:

澳门新葡萄京官网首页 3

虽然 CSS 是一个看似简单的 属性 和 值 的键值对集合,但是 CSS
是众所周知地难以掌握。 CSS3引入了一系列新效果,
并且越来越难以掌握所有的知道。例如,我对新的
CSS网格模块 知之甚少,还有当开发
Flexbox
布局时常常需要翻阅手册(或随机尝试性的使用各种属性和值)!

愚人码头注:推荐阅读 CSS3
Flexbox属性可视化指南 

10%的受访者承认不到一年的开发经验,却声称已经掌握高级的CSS知识!我怀疑他们很快就会意识到,懂的越多,意味着不懂的也就越多!

调查还会持续一段时间,Ashley
会在数周后再次修正结果。读者可以继续参与调查。

最后一个问题是关于包和工作流管理。大部分受访者都可以熟练使用
NPM 和
Bower,相比之下,大部分受访者根本没有听说过
Ender。另外,Yeoman
在Ashley看来是最有用的工具之一,但只有 22.13%
的受访者可以熟练使用,他认为这个比例太低了。

CSS 预处理器

超过 63% 的受访者使用 Sass –
无可争议的预处理器冠军。8%的受访者还使用
PostCSS,虽然它通常与其他预处理器结合使用以提供有用的功能
– 如AutoPrefixer( 65%
的受访者采用)。

近 14% 的受访者不使用预处理器,而更喜欢使用原始 CSS
代码。当你认为它是最简单的(和最好的)开始前端开发的方式时,这个比例似乎有点低。如果
86% 的开发人员使用 CSS
预处理器,我预计平均每个网站的CSS文件请求应该低于7.2个。

近 70% 的受访者尝试过 Less ,19% 的受访者尝试了
Stylus 。80% 从未听说过
Rework。

转自:    

对于上述结果,Ashley
认为,一方面,在前端开发领域,前端工具的使用率已经相当高。CSS
预处理后处理工具、JavaScript
模块打包器或者任务执行器是前端开发人员工具库的重要组成部分;另一方面,JavaScript
测试工具的使用还比较少。

CSS 命名方案

46% 的受访开发人员使用命名方案,但是对于那些将 CSS
水平自我评价为高级或专家级别的人来说,这一比例上升到 57% 。

最受欢迎的选择是 BEM ,占40%,其次是
CSS模块(CSS
Modules)(16%),OOCSS(15%)和
SMACSS(13%)。

调查还会持续一段时间,Ashley 会在数周后再次修正结果。

其它CSS工具

当前 39% 的项目中正在使用 Modernizr
。这似乎令人惊讶,因为它的主要用途是兼容大部分已经被弃用的旧版本IE。(Microsoft已于2016年1月停止支持IE10及以下版本。)

14% 的受访者使用 Stylelint
来检查CSS有效性。这似乎很低,但最流行的IDE和编辑器有一些类似的 CSS
检查,所以可能没有必要。

23% 的开发人员不使用任何CSS工具或命名方案。

JavaScript

如果你认为 CSS 的各种工具已经很混乱了,欢迎来到迷人的 JavaScript 世界!

JavaScript 开发人员比较谦虚,51% 的受访者认为自己的JavaScript
知识达到了高级或专家水平:

澳门新葡萄京官网首页 4

库和框架

尽管有相关性的质疑,超过 99% 的开发人员在某些时候使用
jQuery,并且 31% 的受访者认为对很多项目来说
jQuery 是必要的。70% 的受访者在当前项目中继续使用 jQuery ,这与
W3Techs
观察到的数据相似:

澳门新葡萄京官网首页 5

框架情况更令人困惑:

  • 已有 38%
    的现有项目采用了React。然而,只有
    29% 的开发人员使用它感到舒适,18%
    的受访者认为它是必要的。只有0.1%的网站被发现正在使用React,但请记住,调查结果是从前端开发人员收集的
    – 而不是所有的Web开发人员。
  • 有 25% 的项目使用 Angular
    1,虽然只有8%的人认为它是不可替代。Angular
    2则相对受冷落,只比8%多一点。只有3%的人在多数项目中使用它。
  • Vue.js 已经被 10% 的项目采用,但少于 6%
    的开发人员对框架感到舒适,3% 认为它是必要的。

对于明年的问卷调查,这个问题可能有用:“你是否放弃了一个框架或者在项目中切换框架?

尽管有大量的JavaScript专家,只有 21%
的人认为框架不是必须的,并乐意编写原生代码。这是一个令人担忧的统计数据吗?30%
的开发人员认为他们的框架抽象技能集可以满足他们的全部需求?

任务执行器和模块打包工具

Gulp是最大的赢家,接近 44%
的开发人员在使用。然而,更简单的 npm
scripts 脚本在2016年增加了 23%
,达到 26% 。

愚人码头注:可以查看两篇文章:为什么我放弃 Gulp 和 Grunt 而使用 npm
Scripts 和 为什么使用 npm
Scripts 构建项目

Grunt 已经失去了优势,跌落到 12%。另外,9%
的受访者选择了不使用任务运行器。

那些使用模块打包工具在2016年增加了 20%,达到 68% 。
Webpack 是最为流行,占 31%
,Browserify 为 11%
,RequireJS 为 8% 。

我很惊讶,“其他”模块打包工具占不到
4%,当有几个任务运行器插件可以更简单的管理依赖关系,例如
gulp-deporder
。也许因为每个开发人员都在使用JavaScript 转译器…

ES6到ES5的转译器 (transpilers)

62% 的开发人员正在使用诸如 Babel
之类的工具,将简洁的 ES6 代码转换为旧版浏览器支持的 ES5 代码。
31% 的人听说过可能性,但没有使用工具,和 7% 从未听说过这个词。

这个数字似乎相当高。Internet Explorer 和老的应用程序不支持最新的
JavaScript 语法,但是如果您要编写 ES6 代码,为什么还要支持他们呢?
如果你确实需要支持 IE11 及以下版本,编写 ES5 代码不是更容易吗?

其他JavaScript工具

41%的开发人员使用 ESLint , 19% 使用
JSLint 和 14% 使用
JSHint 来检查他们的代码的有效性 –
例如缺少括号,省略分号,格式缩进等。

23%的受访者不使用代码检查工具 –
虽然,也有可能他们依靠他们的文本编辑器或 IDE 来发现最严重的语法错误。

使用测试工具的用户在一年中增长了 12% ,达到了 52% 。
历史上,JavaScript 测试一直是一个挑战。
诸如测试驱动开发(TDD)等技术可以捕获逻辑问题,但不能解决异步事件遇到的问题,例如当
UI 在特定浏览器中执行某种意外操作时。
幸运的是,行为驱动开发(BDD)的可能性已经出现,以检查在真实的浏览器中的活动,并使前端测试更具可行性。
最流行的系统有:

  • Mocha – TDD/BDD (23%)
  • Jasmine – BDD (17%)
  • QUnit – TDD (4%)
  • Jest – TDD/BDD (3%)
  • Ava – TDD/BDD (2%)

最后,有 94% 的受访者使用 npm – Node.js
的包管理器。出乎意料,有 32% 曾经使用过
TypeScript 。

你在2017年应该使用什么?

关于 CSS,Sass 的知识,PostCSS 和 BEM
很明显是必要的。也就是说,开发的多样性很广。我建议你研究一些预处理器和命名方案,以便了解每个工具可以实现什么
– 即使是你选择不使用它们。

JavaScript 方面的工具不太好说。有一些明显的特征和趋势:

  • Node.js 和 npm
    将变得至关重要,因为你采用的工具记得上都是 Node.js 和 npm
    实现管理的。
  • Gulp 和/或
    Webpack
    也值得尝试一下。
  • 了解ES6,即使您仍然在向后兼容的 ES5 项目上工作。

我从不羡慕那些尝试为新项目选用类库或框架的人。从调研结果来看,jQuery是明显是最受欢迎的。然而随着
IE 的消亡,jQuery
的跨浏览器支持变得没那么重要,并且许多功能已经和浏览器原生 API 和 CSS
重复。

你可以选择一个框架,如 React,因为它很受欢迎 –
但这并不代表它就适用于你的应用。即使 React
将最终被更好,更优秀的东西取代。

我的建议:从众多框架中挑选某一个之前,先学习HTML,CSS,JavaScript
和浏览器开发的基础知识。无论 JavaScript
社区如何评价哪些工具集,这些知识将终生受用。也许有一天,你甚至会编写出一个高大上的工具,也成为各种框架中的一员。

感谢 Ashley Nolan
的前端工具调查和结果分析。

1 赞 7 收藏 2
评论

澳门新葡萄京官网首页 6