2015: 前端工具现状,看完真的感觉有好多要补的

jopen 9年前
 

这是一篇来自w3ctech的译文。

结果是来自一份调查的数据。

主要调查了这么几个问题:

问题一:预处理器

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

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

预处理器 得票数 百分比
Sass 689 66.00%
Less 140 13.41%
Stylus 44 4.21%
不使用预处理 141 13.51%
其它 30 2.87%

问题二 :PostCSS 和 Rework

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

这是这道题的结果


听/看过 偶尔用 常用 从没听过
PostCSS 53.64% (560) 10.34% (108) 8.91% (93) 27.11% (283)
Rework 21.84% (228) 2.30% (24) 0.86% (9) 75.00% (783)

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

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

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

问题三:自动化工具

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

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

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

自动化工具 得票数 百分比
Gulp 488 46.74%
Grunt 274 26.25%
NPM 40 3.83%
Broccoli 13 1.25%
Other 50 4.79%
不使用任何工具 179 17.15%

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

问题四:JS 库和框架

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


听/看过 偶尔用 常用 从没听过
jQuery 1.7% (18) 6.8% (71) 91.5% (955) 0% (0)
Underscore 33.4% (349) 19.2% (200) 38.6% (403) 8.8% (92)
Backbone 58.1% (606) 21.6% (226) 18.6% (194) 1.7% (18)
AngularJS 36.4% (380) 34.9% (364) 28.5% (298) 0.2% (2)
Ember 76.8% (802) 15.6% (163) 4.6% (48) 3% (31)
React 59.6% (622) 21.8% (228) 15.7% (164) 2.9% (30)
Polymer 70.5% (736) 12.2% (127) 3.3% (35) 14% (146)
Knockout 67.9% (709) 10.4% (109) 5.5% (57) 16.2% (169)

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

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

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

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

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


得票数 百分比
只用原生不用库 52 11.13%
jQuery 264 56.53%
AngularJS 72 15.42%
React 38 8.14%
Ember 15 3.21%
Backbone 11 2.36%
Underscore 7 1.50%
Polymer 2 0.43%
Knockout 6 1.28%
其它(请指出) 0 0.00%

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

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

问题六:JS 模块加载器

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

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

模块加载器 得票数 百分比
不使用加载器 538 51.53%
Browserify 185 17.72%
RequireJS 142 13.60%
webpack 120 11.49%
JSPM 30 2.87%
其它 29 2.78%

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

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

问题七:JS 单元测试

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

下面是统计结果:

工具 得票数 百分比
不使用测试工具 615 58.91%
Mocha 161 15.42%
Jasmine 159 15.23%
QUnit 35 3.35%
Tape 20 1.92%
Jest 11 1.05%
Karma 6 0.57%
Intern 10 0.96%
其它 27 2.59%

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

问题八:其它工具

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

下面是统计结果:


听/看过 偶尔用 常用 从没听过
Bower 23.75% (248) 26.44% (276) 47.89% (500) 1.92% (20)
Yeoman 37.45% (391) 30.56% (319) 22.13% (231) 9.86% (103)
Ender 30.36% (317) 1.92% (20) 0.86% (9) 66.86% (698)
NPM 6.80% (71) 17.91% (187) 71.07% (742) 4.22% (44)

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

总结

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